html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: Arial, sans-serif;
        background-color: #f4f4f9a9;
        font-size: 16px; 
    }

    .main-container {
        display: flex;
        flex-direction: column;
        height: calc(100% - 19px);
        padding: 0.5vw;
        box-sizing: border-box;
    }

    .main-container-readonly {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 1vw;
        box-sizing: border-box;
        background-color: black;
    }

    /* --- 狀態訊息樣式 --- */
    .status-info {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 3px 10px;
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        background-color: #eee;
        border-top: 1px solid #ccc;
        z-index: 1000;
        box-sizing: border-box;
    }

    /* --- 主分頁按鈕樣式 --- */
    .tabs {
        flex-shrink: 0;
        margin-bottom: 0;
        background-color: #f4f4f9;
        padding: 0px 0px;
    }

    .tabs button {
        background-color: #20904fc5;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 4px 16px;
        transition: 0.3s;
        margin-right: 11px;
        border-radius: 10px;
        font-size: 16px;
        color: white;
    }

    .tabs button:hover {
        background-color: #ddd;
    }

    .tabs button.active {
        /*background-color: #2196F3;*/
        color: white;
    }

    /* --- 分頁內容容器 --- */
    .tab-content {
        display: none;
        padding: 0px;
        /*order: 1px solid #ccc;*/
        /*border-top: none;*/
        background-color: white;
        flex-grow: 1;
        overflow: hidden;
        box-sizing: border-box;
        height: 100%;
    }

    .tab-content.active {
        display: flex;
        flex-direction: column;
    }

    /* --- 分頁 A (加密/解密) 樣式 --- */
    #TabA {
        display: none;
    }
    #TabA.active {
        display: flex;
        flex-direction: column;
    }

    .control-row {
        margin-bottom: 10px;
        flex-shrink: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 5px; /* 按鈕間距 */
    }

    #TabA input[type="password"] { 
        padding: 8px; 
        border: 1px solid #ccc; 
        border-radius: 4px; 
        width: 100%; 
        box-sizing: border-box;
        margin-bottom: 5px;
    }

    #TabA button { 
        padding: 8px 12px; 
        color: white; 
        border: none; 
        border-radius: 4px; 
        cursor: pointer; 
        font-size: 16px;
    }

    /* 按鈕顏色分類 */
    #encryptBtn, #decryptBtn, #copyBtn  { background-color: #4CAF50; }
    #exportBtn, #importBtnTrigger { background-color: #FF5722; }
    #saveDBBtn2, #getDBBtn2, #newPageBtn{ /*background-color: #9c27b0;*/  color: white;}
    
    .external-link-btn { background-color: #607d8b; }

    #TabA button:hover { opacity: 0.9; }

    #encryptedContent {
        width: 100%;
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        resize: none;
        font-family: monospace;
    }

    /* --- 分頁 B (筆記) 樣式 - 修改版 --- */


    /* 子分頁容器：使用 Flex 並允許換行 */
    .sub-tabs-header {
        display: flex;
        flex-wrap: wrap; /* 允許整個頭部換行，確保按鈕不跑版 */
        align-items: flex-end;
        border-bottom: 1px solid #ccc;
        background-color: #f4f4f9;
        padding-top: 1px;
        flex-shrink: 0;
        min-height: 20px;
    }

/* 分頁太長時會開水平滾動 */
.sub-tabs {
    display: flex;
    flex-wrap: nowrap;       /* 1. 強制不換行 */
    overflow-x: auto;        /* 2. 當內容溢出時，開啟水平滾動 */
    overflow-y: hidden;      /* 3. 隱藏垂直方向的溢出，避免出現奇怪的抖動 */
    
    /* 讓滑動更流暢（iOS 設備建議加上） */
    -webkit-overflow-scrolling: touch; 
    
    margin-bottom: -2px; 
    margin-top: 3px;

    /* 確保容器寬度固定，不會被內容撐爆外部版面 */
    width: 100%; 
}

/* 4. 關鍵：確保內層的按鈕（Tab）不會因為空間不夠而被擠壓變形 */
.sub-tabs > button, 
.sub-tabs > div { 
    flex-shrink: 0; 
}



/* 分頁全都列出來
    .sub-tabs {
        display: flex;
        flex-wrap: wrap; /* 關鍵：讓分頁按鈕可以換行 /
        /*flex-grow: 1;*/ /* 打開可以讓分頁按鈕區域撐滿剩餘空間，確保按鈕靠左 /
        margin-bottom: -2px; /* 為了配合 border /
        margin-top: 3px; /* 為了配合 border /
    }
*/
    .sub-tab-button {
        background-color: #e7e7e7;
        border: 0px solid #ccc;
        border-bottom: 1px solid #ccc; /* 預設有底線 */
        outline: none;
        cursor: pointer;
        padding: 1px 5px;
        transition: 0.3s;
        border-radius: 5px 5px 0 0;
        margin-right: 2px;
        font-size: 16px;
        margin-bottom: 0px; /* 換行時增加上下間距 */
        display: flex;
        align-items: center;
        white-space: nowrap; /* 防止按鈕內文字換行 */
    }

    .sub-tab-button:hover { background-color: #ddd; }
    
    .sub-tab-button.active {
        background-color: #b0fdbc;
        border-bottom: 1px solid #ffffff; /* 蓋過底線 */
        /*font-weight: bold;*/
        z-index: 10;
        margin-bottom: 0px; /* 讓 active 的按鈕貼齊底部 */
        position: relative;
    }

    .delete-sub-btn {
        margin-left: 8px;
        color: #999;
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        padding: 0 2px;
    }
    .delete-sub-btn:hover {
        color: #ff0000;
    }

    .sub-tab-content-container {
        flex-grow: 1;
        position: relative;
        overflow: hidden;
        margin-top: 1px;
        height: 100dvh;
    }

    .sub-tab-content {
        display: none;
        height: 100%;
        flex-direction: column;
    }

    .sub-tab-content.active {
        display: flex;
    }

    .block-name {
        display: none;
        width: 100%;
        padding: 5px;
        margin-bottom: 5px;
        border: 2px solid #2196F3;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .editable-text {
        width: 100%;
        flex-grow: 1;
        padding: 5px;
        border: 1px solid #aaa;
        border-radius: 5px;
        font-size: 18px;
        line-height: 1.6;
        resize: none;
        box-sizing: border-box;
        font-family: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono',Consolas, Menlo, Monaco, 'Liberation Mono', 'DejaVu Sans Mono',monospace;
        scroll-margin-bottom: 100px;
    }

    /* 修改新增按鈕樣式：移除 absolute，加入流式排版 
    #addSubPageBtn {
        position: static;
        margin: 0px;
        padding: 1px 1px;
        background-color: #008CBA;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 10px;
        flex-shrink: 0;
        height: fit-content;
        align-self: center;
    }*/

    #keyNameDef {
        padding: 8px; 
        border: 1px solid #ccc; 
        border-radius: 4px; 
        width: 120px; 
        box-sizing: border-box;
        display: none;
    }

    #listBtn {
        padding: 8px 12px; 
        color: white; 
        border: none; 
        border-radius: 4px; 
        cursor: pointer; 
        font-size: 16px;
    }

    #nameBtn, #listBtn , #delBtn {
        background-color: #3f51b5;
    }   

    #listBtn:hover, #nameBtn:hover {
        opacity: 0.9;
    }   

    #delBtn {
        padding: 8px 12px; 
        color: white; 
        border: none; 
        border-radius: 4px; 
        cursor: pointer; 
        font-size: 13px;
    }

    #delNameDef {
        padding: 8px; 
        border: 1px solid #ccc; 
        border-radius: 4px; 
        width: 120px; 
        box-sizing: border-box;
    }

    /* 密碼輸入燈箱 */
    #passwordOverlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.95);
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 999;
    }
    #passwordInput {
        font-size: 28px;
        padding: 15px 20px;
        width: 300px;
        text-align: center;
        border: none;
        border-bottom: 3px solid #00ff88;
        background: transparent;
        color: #fff;
        outline: none;
    }
    #passwordInput:focus {
        border-bottom-color: #00ff88;
    }
    .tip {
        margin-top: 20px;
        color: #888;
        font-size: 16px;
    }

    #tabAbtn ,#noshow{
        background-color: #f4f4f9;
        color: #f4f4f9;
        border: none;
    }

#mdShowArea {
    width: 100%;
    max-width: 100%;      /* 確保絕對不會超過父層 */
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;   /* 強制隱藏水平捲軸，防止意外溢出 */
    -webkit-overflow-scrolling: touch; 
    
    /* 關鍵：讓 padding 不會增加寬度 */
    box-sizing: border-box; 
    
    /* 文字折行強化 */
    word-break: break-word; /* 比 break-all 更友善，會優先在空格處斷行 */
    overflow-wrap: anywhere; /* 針對極長的連續網址非常有校 */
    
    * {
        line-height: 1.5; /* 行距 */
        letter-spacing: 0.05em; /* 字母間距 */
    }

/*Special markdown syntax ----------------------------------------------------------------------------------------*/

    font-family: 'Inter', "PingFang TC", "Apple LiGothic Medium", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-size: 18px; /* 基礎文字大小 */
    line-height: 1.7; /* 行距 */
    letter-spacing: 0.03em; /* 字母間距 */
    color: #cccccc; /* 淺灰文字，適應黑底 */
    background-color: #000000; /* 純黑背景 */
    max-width: 6000px; /* 最大寬度限制 */
    margin: 0 auto; /* 居中 */
	font-weight: 250; 




a,
a.visited {
	color: inherit;
	text-decoration: none;
}

a {
  display: inline-block; /* 關鍵：必須是 block 或 inline-block 才能觸發 ::first-letter */
  text-decoration: none;
  color: #cccccc;        /* 你的主文字色 */
  transition: 0.3s;
}

/* 針對第一個字的強調 */
a::first-letter {
  font-size: 1.0em;      /* 放大 */
  font-weight: 300;     /* 加粗 */
  letter-spacing: 0.02em;
  color: #99976d;  
  /* margin-right: 2px;     與後方文字保持微小間距 */
}

/* Hover 時讓整個 a 標籤與第一個字一起變化 */
a:hover {
  color: #ebebeb;
}

a:hover::first-letter {
  color: #e2dc6f;        /* Hover 時第一個字變亮 */
}

/* 標題樣式 */
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700; /* 粗體 */
    color: #2ecc71;
    letter-spacing: 0.05em; /* 字母間距 */
    margin: 1.8em 0 0.2em;
    border-bottom: 1px solid #4a90e2; /* 淺藍底線 */
    padding-bottom: 0.1em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); /* 深色陰影增強對比 */
    transition: color 0.3s ease;
}

h1:hover {
    color: #58d68d; /* 懸停時變亮 */
    transform: scale(0.995);
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 500; /* 中等粗體 */
    color: #a2d149; /* 金色 */
    letter-spacing: 0.03em;
    margin: 1.5em 0 0.2em;
    padding-bottom: 0.1em; /* 添加輕微底部間距，與h1一致 */
    border-bottom: 1px solid rgba(212, 160, 23, 0.3); /* 淺金色底線，增加層次 */
    transition: color 0.3s ease, transform 0.3s ease; /* 添加transform動畫 */
}

h2:hover {
    color: #c1e18a; /* 懸停時變亮金色 */
    /*transform: scale(1.02); /* 輕微放大，與其他元素懸停效果一致 */
    transform: scale(0.995);
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem; /* 比h2小，保持層次 */
    font-weight: 500; /* 中等粗體，與h2一致 */
    color: #f1c40f;
    letter-spacing: 0.02em;
    margin: 1.2em 0 0.2em;
    padding-bottom: 0.1em;
    /*border-bottom: 1px solid rgba(204, 204, 204, 0.2); /* 淺灰底線，與主題協調 */
    transition: color 0.3s ease, transform 0.3s ease;
}

h3:hover {
    color: #f4d31d;
    /*transform: scale(1.02); /* 與h2一致的懸停效果 */
    transform: scale(0.995);
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem; /* 比h3更小 */
    font-weight: 400; /* 較輕的字重，區分層次 */
    color: #e67e22;
    letter-spacing: 0.01em;
    margin: 1em 0 0.2em;
    transition: color 0.3s ease, transform 0.3s ease;
}

h4:hover {
    color: #f39c12;
    /*transform: scale(1.02); /* 一致的懸停效果 */
    transform: scale(0.995);
}
/* 粗體字 */
b, strong {
    font-weight: 600;
    color: #0eda03; /* 淺藍 */
    transition: color 0.3s ease;
}


/* 斜體字 */
i, em {
    font-style: italic;
    font-weight: 300;
    color: #0eda03; 
    transition: transform 0.3s ease;
}

/* 粗體斜體字 */
b i, strong em, i b, em strong {
    font-style: italic;
    font-weight: 600;
    color: #0eda03; 
    transition: transform 0.3s ease;
}

b:hover, strong:hover, i:hover, em:hover, b i:hover, strong em:hover, i b:hover, em strong:hover {
    transform: scale(1.05); /* 懸停輕微放大 */
    color: #8bfe7b;
}

/* 段落樣式 */
p {
    margin: 0.3em 0;
}

/* 圖片樣式 */
img {
    max-width: 100%; /* 圖片不超過父容器 */
    width: 92%; /* 圖片寬度與 body 一致（92%） */
    height: auto; /* 保持比例 */
    display: block; /* 確保居中 */
    margin: 1.8em auto; /* 上下間距與居中 */
    border: 1px solid #333333; /* 深灰邊框，適應黑底 */
    border-radius: 4px; /* 圓角 */
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1); /* 淺色陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
    transform: scale(0.99); /* 懸停輕微縮 */
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2); /* 增強陰影 */
}

/* 表格樣式 */
table {
    width: auto; /* 表格填滿父容器 */
    border-collapse: separate;
    border-spacing: 0;
    margin: 1em 0;
    /*box-shadow: 0 2px 8px rgba(255, 255, 255, 0.08);*/
    border-radius: 9px;
    overflow: hidden;
}

th, td {
    border: 1px solid #333333; /* 深灰邊框 */
    padding: 14px;
    text-align: left;
    transition: background-color 0.3s ease;
}

th {
    background-color: #4a90e2; /* 淺藍表頭 */
    color: #ffffff;
    font-weight: 500;
}

tr:nth-child(even) {
    background-color: #1a1a1a; /* 略淺的黑色 */
}

tr:hover {
    background-color: #2a2a2a; /* 懸停更亮 */
}

/* 列表樣式 */
ul, ol {
    margin: 0.6em 0;
    padding-left: 2.5em;
}

ul li {
    list-style-type: square; /* 方形項目符號 */
    color: #cccccc; /* 淺灰 */
}

ol li {
    list-style-type: decimal; /* 數字項目符號 */
    color: #cccccc;
}

li {
    margin-bottom: 0.5em;
    transition: color 0.3s ease;
}

li:hover {
    color: #d4a017; /* 懸停變金色 */
}

/* 代碼塊 */
pre, code {
    font-family: 'Courier New', monospace;
    background-color: #1a1a1a; /* 深黑背景 */
    color: #cccccc; /* 淺灰文字 */
	white-space: pre;            /* 不換行，保留原始格式 */
	overflow-x: auto;            /* 水平滾動 */
	overflow-y: auto;
	max-height: 300px;           /* 垂直也限制 */
	display: block;
    /*padding: 12px;
    border-radius: 4px;
    border: 1px solid #333333;*/
}


/* 頁腳樣式 */
footer {
    margin-top: 3em;
    padding-top: 1em;
    border-top: 1px solid #333333; /* 深灰邊框 */
    font-size: 0.9rem;
    color: #cccccc; /* 淺灰 */
    text-align: center;
}


/* 響應式設計 */
@media (width > 4096px) { font-size: 26px;}
@media (max-width: 4096px) { font-size: 24px; }
@media (max-width: 3120px) { font-size: 22px; }
@media (max-width: 2200px) { font-size: 20px; }
@media (max-width: 1920px) { font-size: 19px;}
@media (max-width: 1440px) { font-size: 18px; }
@media (max-width: 1024px) { font-size: 17px; }
@media (max-width: 768px)  { font-size: 16px; }
@media (max-width: 480px)  { font-size: 16px; }


/* end of special markdown syntax -----------------------------------------------------------------------------------*/

}

#markdownViewBtn {

}

.btn-container {
    display: flex;       /* 啟用 Flexbox 佈局 */
    width: 80%;          /* 容器佔滿父層的 80% */
    margin: 0 auto;      /* 選擇性：讓這 80% 的容器在頁面置中 */
    gap: 10px;           /* 兩個按鈕之間的間距 (可自行調整) */
}

.mdBtn {
    flex: 1;             /* 關鍵：讓兩個按鈕平分剩餘空間 */
    margin-top: 2px;
    padding: 5px 25px;       /* 增加一點 padding 讓按鈕看起來比例較好  */
    background-color: #00810d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

#mainTabs {
    display: none;
}

#mdvBtn {
    background-color: #f4f4f9;
    color: #f4f4f9;
    font-size: 16px;
    padding: 0px;
    margin: 0px;
}