/* ၁။ Layout အခြေခံ (Sepia Theme) */
body.sepia-mode {
    margin: 0;
    font-family: 'Pyidaungsu', sans-serif;
    /* Font ကြီးလျှင် ဘေးတိုက် Scroll မဖြစ်အောင် ထိန်းချုပ်ခြင်း */
    overflow-x: hidden; 
    position: relative;
    width: 100%;
}

.container {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 80px;
    padding-top: 70px; /* Top Bar နဲ့ မငြိစေရန် အပေါ်မှ နေရာချန်ထားခြင်း */
    width: 100%;
    box-sizing: border-box;
}

/* ၂။ Top Bar & Setting Controls */
.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; 
    background: #eadebc;
    position: fixed; 
    top: 0;
    left: 0;
    /* ဖုန်းမျက်နှာပြင် အကျယ်အတိအကျယူရန် vw ကိုသုံးသည် */
    width: 100vw; 
    height: 60px; 
    z-index: 1000;
    border-bottom: 1px solid #d4c5a0;
    box-sizing: border-box;
}



.back-link {
    display: flex;
    align-items: center;    /* ဒေါင်လိုက် အလယ်ချရန် */
    justify-content: center;
    text-decoration: none;
    color: #443300;
    gap: 4px;               /* icon နဲ့ စာကြား အကွာအဝေး */

    /* +,- ခလုတ်တွေရဲ့ ပုံစံအတိုင်း border ထည့်ခြင်း */
    background: #f4ecd8;                /* ခလုတ်နောက်ခံအရောင် */
    border: 1px solid #443300 !important; /* အညိုရောင် ဘောင် */
    width: 70px;              /* အကျယ် 60px */
    height: 30px;             /* အမြင့် 30px */                  /* အတွင်းနေရာလွတ် */
    border-radius: 8px;                 /* ထောင့်ဝိုင်း */
    cursor: pointer;                    /* လက်ညှိုးပုံစံ */
    font-weight: bold;                  /* စာသားအထူ */
}

.nav-icon {
    font-size: 28px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-block;
    margin-top: -4px; font-weight: bold;    /* လိုအပ်ပါက အပေါ်ကို 2px လောက် တိုးမြှင့်ပေးပါသည် */
}

.nav-text {
    font-size: 18px !important;
    font-weight: bold;
    line-height: 1;         /* စာသား၏ line-height ကို 1 ထားမှ တည့်ပါမည် */
}


/* Icon (⌂) အတွက် သီးသန့် ဆိုဒ် */
.nav-icon {
    font-size: 28px !important; /* Icon ကို ပိုကြီးအောင် လုပ်ထားပါသည် */
    line-height: 1; font-weight: 900 !important;  
}

/* စာသား (ပင်မ) အတွက် သီးသန့် ဆိုဒ် */
.nav-text {
    font-size: 18px !important; /* စာသားဆိုဒ်ကို သတ်မှတ်ပါသည် */
    font-weight: bold;
}


/* ညာဘက်က ခလုတ်စုစည်းမှု (Layout မှန်စေရန်) */
.right-controls {
    display: flex;
    align-items: center;
    color: #443300;
    gap: 8px; /* ခလုတ်တွေကြား အကွာအဝေး */
    font-size: 20px !important;
    /* အရှင်ဘုရား လိုချင်သည့်အတိုင်း ဘယ်ဘက်သို့ တိုးရန် */
    margin-right: 35px; /* ညာဘက်အစွန်းမှ ခပ်ခွာခွာဖြစ်အောင် နေရာချခြင်း */
}


/* ⚙️ Setting ခလုတ်နှင့် Font ခလုတ်များ (ပထမပုံက ဆိုဒ်အတိုင်း) */
.font-controls button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;            /* ခလုတ်ကို စတုဂံပုံစံ ဖြစ်စေရန် အကျယ်သတ်မှတ်ခြင်း */
    height: 30px;           /* ခလုတ်ကို အမြင့်သတ်မှတ်ခြင်း */
    font-size: 24px !important; /* သင်္ကေတကို ကြီးစေရန် */
    padding: 0 !important;  /* Padding ကို 0 ထားပြီး width/height နဲ့ ထိန်းပါ */
    background: #f4ecd8;
    border: 1px solid #443300;
    border-radius: 8px;
    cursor: pointer;
    color: #443300;
    font-weight: bold;
}


.setting-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;            /* +,- ခလုတ်နဲ့ အတူတူ ဖြစ်စေရန် */
    height: 30px;
    color: #443300;
    font-size: 24px !important; /* ဂီယာသင်္ကေတကို ကြီးစေရန် */
    padding: 0 !important;
    background: #f4ecd8;
    border: 1px solid #443300;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
}


/* အလယ်က ဂဏန်း (25/30) နေရာမှန်စေရန် */
#font-size-display {
    margin: 0 8px;
    font-weight: bold;
    color: #443300;
    font-size: 1.2rem;
    
}


/* ၃။ Setting Menu Popup */
.setting-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 1100;
}


.setting-content {
    background: #f4ecd8;
    width: 300px;
    position: absolute;
    top: 65px;
    right: 20px;
    padding: 0;
    max-height: 80vh;
    border-radius: 12px;
    border: 2px solid #443300;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.setting-body {
    padding: 0 20px 20px 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.setting-item {
    display: block;
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: #eadebc;
    border: 1px solid #443300;
    border-radius: 6px;
    color: #443300;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 16px !important;
}

/* ၁။ အသစ်လုပ်ရန် ခလုတ် (Refresh) */
.setting-menu-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    background: #eadebc;
    border: 1px solid #443300;
    color: #443300;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.setting-menu-refresh .nav-icon {
    font-size: 20px !important;
    line-height: 1;
}

.setting-menu-refresh .nav-text {
    font-size: 16px !important;
}


/* Setting Header နှင့် ပိတ်ရန်ခလုတ် */
.setting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    padding: 10px 15px;
    background: #f4ecd8;
    border-bottom: 1px solid #d4c5a0;
}

.setting-title {
    margin: 0;
    color: #443300;
    font-size: 1.5rem;
    font-weight: bold;
}

.setting-close-btn {
    font-size: 32px;
    color: #443300;
    cursor: pointer;
    line-height: 1;
    font-weight: bold;
}

.setting-close-btn:hover {
    color: #b38b00;
}
/*စက်တင် ထွက် ခလုပ်အဆုံး*/

/* ၄။ Floating Buttons (Left Side) */
.floating-left-group {
    position: fixed;
    bottom: 25px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 12px; 
    z-index: 999;
}

.toc-toggle-btn {
    /* အညိုအကြည်ရောင် (နောက်ဆုံးက 0.8 သည် အရောင်စူးမှု) */
    background: rgba(68, 51, 0, 0.8) !important; 
    
    color: #f4ecd8;
    border: none;
    padding: 12px 20px;
    border-radius: 25px; 
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    text-align: center;
    
    /* Blur (ဝါးခြင်း) ကို လုံးဝဖြုတ်လိုက်ပါပြီ */
}



.top-btn {
    background: #443300;
    color: #f4ecd8;
    width: 35px;  
    height: 35px; 
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    opacity: 0.8; 
    transition: 0.3s;
}

.top-btn:hover {
    opacity: 1;
    transform: scale(1.1); 
}

/* ၅။ မာတိကာ Popup Overlay */
.toc-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 1050;
}






/* ၁။ မာတိကာ Box အပြင်ဘောင် (Header နဲ့ List ကို ခွဲထုတ်ထားပါသည်) */
.toc-content {
    background: #f4ecd8;
    width: 85%; 
    max-width: 400px;
    margin: 50px auto;
    padding: 0; /* အရေးကြီးသည်- Padding ကို ဖြုတ်ပြီး အထဲက Item များတွင် ညှိပါမည် */
    border-radius: 12px;
    border: 2px solid #443300;
    position: relative;
    max-height: 80vh; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* အပြင်ဘောင်ကြီး တစ်ခုလုံး မရွေ့စေရန် */
}

/* ၂။ "မာတိကာ" ခေါင်းစဉ် (မရွေ့ဘဲ Fixed ဖြစ်နေမည့်အပိုင်း) */
.toc-content h1 {
    margin: 0;
    padding: 10px 15px;
    background: #eadebc; /* ခေါင်းစဉ်ကို အရောင်ခွဲထားခြင်း */
    border-bottom: 2px solid #443300;
    font-size: 1.5rem;
    color: #443300;
}

/* ၃။ "×" ပိတ်သည့်ခလုတ် (မရွေ့ဘဲ Fixed ဖြစ်နေမည့်အပိုင်း) */
.close-btn {
    position: absolute;
    right: 15px; 
    top: 15px; /* ခေါင်းစဉ်နဲ့ တစ်တန်းတည်း ဖြစ်အောင် ညှိထားပါသည် */
    font-size: 30px;
    color: #443300;
    cursor: pointer;
    z-index: 10;
}

/* ၄။ မာတိကာ စာရင်းများ (Scroll ဆွဲ၍ရမည့်အပိုင်း) */
.toc-list { 
    list-style: none; 
    padding: 10px 25px; /* အထဲရောက်မှ ဘေး Padding ပြန်ပေးပါသည် */
    margin: 0; 
    overflow-y: auto; /* စာရင်းများရင် ဤနေရာ၌သာ Scroll ဆွဲနိုင်ပါသည် */
    flex-grow: 1; 
}

/* ၅။ မာတိကာထဲက Link များ Style (စာလုံးပြာနှင့် မျဉ်းပြာ ဖြုတ်ထားသည်) */
.toc-list li a {
    color: #443300 !important; 
    text-decoration: none !important; /* အောက်က မျဉ်းပြာတားတာကို ဖြုတ်ခြင်း */
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #d4c5a0;
    font-weight: bold;
}

/* နှိပ်ပြီးသား Link များကိုလည်း အပြာရောင်/ခရမ်းရောင် မပြောင်းစေရန် */
.toc-list li a:visited {
    color: #443300 !important; 
}


/* ခေါင်းစဉ်ကြီးလျှင် အောက်ကြောင်းဆင်းပေးရန် ပြင်ဆင်ချက် */
.book-header h1, 
.book-header h2 { 
    inline-size: 100%;
    overflow-wrap: break-word; 
    word-break: break-word;
}

/* စာကိုယ်ပိုင်း Font ကြီးလျှင် ဘေးမကားစေရန် ပြင်ဆင်ချက် */
.content-area { 
    padding: 20px; 
    line-height: 2.0; 
    font-size: 19px; 
    white-space: pre-line;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word; 
    word-wrap: break-word;
}

@media print {
    .top-controls, 
    .floating-left-group, 
    .setting-overlay, 
    .toc-overlay,
    #modeToggle {
        display: none !important;
    }

    .container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

     /* ၃။ စာသားအမည်း၊ နောက်ခံအဖြူ ဖြစ်စေရန် */
    body {
        background: #ffffff !important; 
        color: #000000 !important;
    }

    /* ၄။ စာသားအားလုံးကို အမည်းရောင်ဖြစ်စေရန် */
    * {
        color: #000000 !important;
        background: transparent !important;
    }
}

/* Fullscreen ခလုတ် Style */
.fullscreen-round-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid #443300;
    background: rgba(234, 222, 188, 0.4);
    color: #443300;
    cursor: pointer;
    position: fixed; 
    top: 80px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; 
    transition: 0.3s;
}

/* Focus Mode အသက်ဝင်ချိန် */
body.focus-mode .top-controls .back-link,
body.focus-mode .top-controls .right-controls,
body.focus-mode .floating-left-group,
body.focus-mode .book-header {
    display: none !important;
}

body.focus-mode .top-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* မာတိကာတွင် လက်ရှိဖတ်နေသည့် အခန်းကို Highlight ပြရန် */
.toc-list li a.active-chapter {
    color: #b38b00 !important; 
    font-weight: bold !important;
    border-left: 3px solid #443300;
    padding-left: 10px;
}

/*မာတိကာ အတွင်းမှ စာလုံးဆိုဒ် အစ*/
/* ခေါင်းစဉ်ကြီးအတွက် CSS */
.main-title {
    font-size: 22px !important;    /* စာလုံးဆိုဒ်ကို ၂၂ ပေးထားပါသည် */
    font-weight: bold !important;  /* စာလုံးကို အထူးပြု (Bold) လုပ်ထားပါသည် */
    text-decoration: none;
}

/* ခေါင်းစဉ်ငယ်အတွက် CSS */
.sub-title {
    font-size: 22px !important;    /* စာလုံးဆိုဒ်ကို ၁၆ သို့ လျှော့ထားပါသည် */
    font-weight: normal !important; /* စာလုံးကို ပုံမှန်အတိုင်းထားပါသည် */
    padding-left: 20px !important;  /* ဘေးကို နည်းနည်းတိုးပြီး ခေါင်းစဉ်ငယ်ပုံစံသွင်းသည် */
    text-decoration: none;
}
/*သုတ္တန်အတွက် css*/
.title  {
    font-size: 20px !important;    /* စာလုံးဆိုဒ်ကို ၁၆ သို့ လျှော့ထားပါသည် */
    font-weight: normal !important; /* စာလုံးကို ပုံမှန်အတိုင်းထားပါသည် */
    padding-left: 20px !important;  /* ဘေးကို နည်းနည်းတိုးပြီး ခေါင်းစဉ်ငယ်ပုံစံသွင်းသည် */
    text-decoration: none;
}

/*မာတိကာ အတွင်းမှ စာလုံးဆိုဒ် အဆုံး*/

/* စာသားကို Select လုပ်လိုက်တဲ့အခါ ပေါ်မယ့်အရောင် အစ */
::selection {
    background-color: #ffcc00 !important; /* အရှင်ဘုရား ကြိုက်နှစ်သက်သော အဝါရောင် */
    color: #000000 !important;           /* စာလုံးအရောင်ကို အမည်းရောင်ပြောင်းခြင်း */
}

/* Safari browser အတွက်ပါ ထည့်သွင်းခြင်း */
::-moz-selection {
    background-color: #ffcc00 !important;
    color: #000000 !important;
}
/* စာသားကို Select လုပ်လိုက်တဲ့အခါ ပေါ်မယ့်အရောင် အဆုံး */

/* စာလုံးအထူအပါး အတွက် Style အစ */
.setting-item-group {
    padding: 12px;
    background: #eadebc;
    border: 1px solid #443300;
    border-radius: 6px;
    margin: 8px 0;
    text-align: center;
}



.setting-title2 {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #443300;
    font-size: 16px !important;
}



.weight-spinner-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.spinner-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f4ecd8;
    border: 1px solid #443300;
    border-radius: 4px;
    width: 40px;
}

.spinner-box button {
    background: none;
    color: #443300;
    border: none;
    cursor: pointer;
    padding: 5px;
    width: 100%;
}

.spinner-box span {
    font-size: 1.3rem;
    font-weight: bold;
    color: #443300; 
    padding: 5px 0;
}

/* စာလုံးအထူအပါး အတွက် Style အဆုံး */

/* နှိပ်လိုက်ရင် အဝါရောင် ပေါ်ရန် အစ*/
/* ၁။ တစ်ကမ္ဘာလုံးရှိ နှိပ်သမျှ အရာအားလုံးအတွက် (Safari အပါအဝင်) */
* {
    /* ဖုန်းမှာ နှိပ်လိုက်ရင် ပေါ်တဲ့ အပြာရောင်ကို အဝါဖျော့ပြောင်းခြင်း (iOS Safari အတွက် အဓိက) */
    -webkit-tap-highlight-color: rgba(255, 204, 0, 0.4) !important;
}

/* ၂။ Desktop မှာ Tab ခလုတ်နှိပ်လို့ဖြစ်ဖြစ်၊ Mouse နဲ့နှိပ်လို့ဖြစ်ဖြစ် ပေါ်တဲ့ အပြာရောင်ဘောင်ကို ဖျောက်ခြင်း */
*:focus {
    outline: 2px solid #ffcc00 !important; /* အပြာရောင်အစား အဝါရောင်ဘောင်ပြောင်းခြင်း */
    outline-offset: 1px;
}

/* ၃။ Safari မှာ ခလုတ်တွေ နှိပ်လိုက်တဲ့အခါ အပြာရောင် Highlight ဖြစ်တာကို တားဆီးရန် */
button:active, a:active {
    background-color: rgba(255, 204, 0, 0.2) !important;
}

/* နှိပ်လိုက်ရင် အဝါရောင် ပေါ်ရန် အဆုံး*/

/* paper.html ထဲတွင် ဖိထားမှ စာရွေးလိုတဲ့ ကုဒ် အစ*/
article {
    /* ပုံမှန်အားဖြင့် စာရွေးလို့မရအောင် ပိတ်ထားမယ် */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
/* paper.html ထဲတွင် ဖိထားမှ စာရွေးလိုတဲ့ ကုဒ် အဆုံး*/



/* ===== Modern Preset System ===== */

.preset-group,
.adjust-group {

    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.preset-btn,
.adjust-group button {

    background: #f4ecd8;
    border: 1px solid #443300;
    color: #443300;

    padding: 8px 14px;

    border-radius: 6px;

    cursor: pointer;

    font-weight: bold;

    transition: 0.2s;
}

.preset-btn:hover,
.adjust-group button:hover {

    transform: translateY(-1px);
}

.preset-btn.active-preset {

    background: #443300;
    color: #f4ecd8;
}

#lh-display,
#ls-display {

    min-width: 55px;

    text-align: center;

    background: #f4ecd8;

    border: 1px solid #443300;

    border-radius: 6px;

    padding: 8px 10px;

    font-weight: bold;

    color: #443300;
}


/* ===== Optimized Setting UI ===== */

.preset-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
}

.preset-btn {
    background: #f4ecd8;
    border: 1px solid #443300;
    color: #443300;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.15s ease;
}

.preset-btn.active-preset {
    background: #443300;
    color: #f4ecd8;
}

.spinner-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.font-size-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.font-size-control button {
    width: 36px;
    height: 36px;
    border: 1px solid #443300;
    background: #f4ecd8;
    color: #443300;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
}

#font-size-display {
    min-width: 50px;
    text-align: center;
    padding: 6px 10px;
    background: #f4ecd8;
    border: 1px solid #443300;
    border-radius: 6px;
    font-weight: bold;
    color: #443300;
}

/* =========================
   TOC HEADER
========================= */

.toc-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}


/* =========================
   TOC SEARCH BAR
========================= */

#toc-search {

    flex: 1;

    padding: 10px 14px;

    border: none;

    border-radius: 12px;

    font-size: 14px;

    outline: none;
}


/* =========================
   TOC JUMP BUTTONS
========================= */

.toc-jump-buttons {

    position: absolute;

    right: 16px;

    bottom: 16px;

    display: flex;

    gap: 10px;

    z-index: 50;

    width: fit-content;
}


/* Jump Buttons */

.toc-jump-buttons button {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    font-size: 18px;

    cursor: pointer;

    transition: transform 0.2s ease;
}


/* Hover */

.toc-jump-buttons button:hover {

    transform: scale(1.08);
}
/* TOC JUMP BUTTONS အဆုံး*/


.raw-text p {
    /* 1.5em ထက် နည်းချင်ရင် 0.8em ဒါမှမဟုတ် 1em လို့ ပြောင်းနိုင်ပါတယ် */
    margin-bottom: 1.5em; 
    display: block;
}