/* ================= RESET ================= */
*{
 box-sizing:border-box;
 margin:0;
 padding:0;
 font-family:'Segoe UI', Arial, sans-serif;
}

/* ================= ROOT / SCROLL FIX ================= */
html, body{
 width:100%;
 min-height:100%;
 overflow-y:auto;
 -webkit-overflow-scrolling:touch;
}

/* ================= BODY / THEME ================= */
body{
 padding:16px;
 background:
   radial-gradient(circle at top left, #c7f9ff, transparent 40%),
   radial-gradient(circle at bottom right, #e0d9ff, transparent 45%),
   linear-gradient(135deg, #f4f8ff, #eef6ff);
 color:#0f172a;
 overflow-y:scroll !important;
}

/* ================= HEADER ================= */
.header{
 text-align:center;
 padding:26px 14px;
 margin-bottom:22px;
 border-radius:22px;
 background:linear-gradient(135deg, #38bdf8, #6366f1);
 color:#ffffff;
 box-shadow:0 10px 25px rgba(99,102,241,0.35);
 position:relative;
}

.header h1{
 font-size:28px;
 letter-spacing:1.5px;
}

.header p{
 font-size:13px;
 margin-top:6px;
 opacity:0.9;
}

/* ================= BURGER ICON ================= */
.burger{
 position:absolute;
 left:16px;
 top:18px;
 font-size:26px;
 cursor:pointer;
 color:white;
}

/* ================= OVERLAY ================= */
.overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,.45);
 backdrop-filter:blur(3px);
 display:none;
 z-index:9998;
}

/* ================= SIDEBAR ================= */
.sidebar{
 position:fixed;
 left:-300px;
 top:0;
 width:280px;
 height:100%;
 background:#0f172a;
 color:white;
 transition:0.35s cubic-bezier(.4,0,.2,1);
 z-index:9999;
 display:flex;
 flex-direction:column;
 box-shadow:8px 0 25px rgba(0,0,0,0.4);
}

.sidebar.open{
 left:0;
}

/* sidebar header */
.sidebar-header{
 padding:18px;
 background:#1e293b;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid #334155;
}

.sidebar-header h3{
 font-size:18px;
 font-weight:700;
}

.close-btn{
 font-size:22px;
 cursor:pointer;
 opacity:.8;
}
.close-btn:hover{opacity:1}

/* profile card */
.profile-card{
 padding:18px;
 border-bottom:1px solid #1e293b;
 background:linear-gradient(135deg,#1e293b,#020617);
}

.profile-card strong{
 font-size:16px;
 display:block;
 margin-bottom:4px;
}

.profile-card p{
 font-size:13px;
 opacity:.7;
}

/* menu list */
.menu-list{
 padding-top:8px;
 flex:1;
}

.menu-item{
 padding:15px 22px;
 font-size:15px;
 cursor:pointer;
 transition:.25s;
 border-left:4px solid transparent;
}

.menu-item:hover{
 background:#1e293b;
 border-left:4px solid #6366f1;
 padding-left:26px;
}

/* logout button */
.logout{
 margin:20px;
 padding:12px;
 border:none;
 border-radius:12px;
 background:linear-gradient(135deg,#ef4444,#dc2626);
 color:white;
 font-weight:700;
 cursor:pointer;
 box-shadow:0 4px 12px rgba(239,68,68,.4);
}

.logout:active{
 transform:scale(.96);
}
/* ===== DARK MODE CONTENT FIX ===== */

body.dark .note-content{
    color:#f1f5f9 !important;
}

body.dark .note-content *{
    color:#f1f5f9 !important;
    background:transparent !important;
    border-color:#475569 !important;
}

/* ================= PDF layout ================= */
.pdf-page{
width:794px;
min-height:1123px;
margin:auto;
background:white;
position:relative;
padding:80px 60px 80px 60px;
box-sizing:border-box;
font-family:system-ui;
}

/* header */
.pdf-header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#0b2a5b;
color:white;
text-align:center;
padding-top:10px;
font-weight:bold;
}
.pdf-header small{
display:block;
font-size:12px;
margin-top:4px;
}

.pdf-red{height:3px;background:red}
.pdf-green{height:3px;background:#00a651}

/* footer */
.pdf-footer{
position:absolute;
bottom:0;
left:0;
width:100%;
height:70px;
text-align:center;
font-size:14px;
}

.footer-left{
position:absolute;
left:0;
bottom:0;
width:0;height:0;
border-left:40px solid #0b2a5b;
border-top:40px solid transparent;
}

.footer-right{
position:absolute;
right:0;
bottom:0;
width:0;height:0;
border-right:40px solid #00a651;
border-top:40px solid transparent;
}

.pdf-link{
position:absolute;
bottom:10px;
left:0;
right:0;
color:#0066ff;
}

/* ================= GRID ================= */
.grid{
 display:grid;
 grid-template-columns:repeat(2,1fr);
 gap:16px;
}

/* ================= CARD ================= */
.card{
 background:rgba(255,255,255,0.92);
 backdrop-filter:blur(6px);
 border-radius:20px;
 padding:22px 12px;
 text-align:center;
 box-shadow:0 8px 18px rgba(0,0,0,0.1);
 transition:0.25s ease;
 cursor:pointer;
}

.card span{
 font-size:32px;
 display:block;
 margin-bottom:10px;
}

.card p{
 font-size:14px;
 font-weight:700;
 line-height:1.35;
}

.card.full{
 grid-column:1 / -1;
}

.card:active{
 transform:scale(0.96);
 box-shadow:0 6px 14px rgba(0,0,0,0.15);
}

/* ================= LIST ================= */
.list-container{
 display:flex;
 flex-direction:column;
 gap:12px;
 padding-bottom:180px;
}

.list-item{
 background:#eef2ff;
 padding:14px 16px;
 border-radius:16px;
 font-weight:600;
 box-shadow:0 4px 10px rgba(0,0,0,0.08);
 cursor:pointer;
}

.list-item:active{
 background:#dbeafe;
}

/* ================= TOPIC ================= */
.topic-container{
 display:flex;
 flex-direction:column;
 gap:12px;
 padding:16px;
 padding-bottom:180px;
}

.main-topic{
 background:#ffffff;
 border-radius:18px;
 padding:16px;
 font-weight:700;
 box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

.sub-topics{
 margin-top:12px;
 display:none;
 flex-direction:column;
 gap:10px;
}

.sub-topic{
 background:#eef2ff;
 padding:12px 14px;
 border-radius:14px;
 font-size:14px;
 font-weight:600;
}

/* ================= BUTTONS ================= */
.btn{
 padding:10px 18px;
 border:none;
 border-radius:18px;
 font-weight:700;
 cursor:pointer;
}

.btn-primary{
 background:#6366f1;
 color:#fff;
}

.btn-secondary{
 background:#e5e7eb;
 color:#111827;
}

.back-btn{
 padding:10px 24px;
 border:none;
 border-radius:20px;
 background:#6366f1;
 color:#fff;
 font-weight:600;
 font-size:14px;
}

.back-btn:active{ transform:scale(0.96); }

/* ================= ALERT BAR ================= */
.alert-bar{
 width:100%;
 background:#ef4444;
 color:white;
 padding:8px 0;
 font-weight:700;
 overflow:hidden;
 white-space:nowrap;
}

.alert-scroll{
 display:inline-block;
 padding-left:100%;
 animation:scrollLeft 18s linear infinite;
}

.alert-item{margin-right:60px;}
.alert-highlight{color:yellow;font-weight:900;}

@keyframes scrollLeft{
0%{ transform:translateX(0); }
100%{ transform:translateX(-100%); }
}

/* ================= UTIL ================= */
.hidden{display:none;}
.center{text-align:center;}
.mt-20{margin-top:20px;}

/* =========================================================
   ⭐⭐⭐ FONT SIZE OVERFLOW FIX (NEW — DO NOT REMOVE)
   ========================================================= */

.reader-container{
 width:100%;
 max-width:100%;
 overflow-x:hidden !important;
}

.note-title,
.note-content,
.note-content *{
 overflow-wrap:break-word !important;
 word-wrap:break-word !important;
 word-break:break-word !important;
 white-space:normal !important;
}

/* Malayalam large glyph stability */
.note-content{
 line-height:1.8;
}

/* prevent layout expansion when font increases */
.reader-container,
.note-title,
.note-content{
 box-sizing:border-box;
 max-width:100%;
}

/* =========================================================
   (ALL YOUR REMAINING CODE BELOW — UNCHANGED)
   ========================================================= */

/* your reader mobile UI fix, dark fix, pdf fix, etc... */
/* (kept exactly same as you provided) */

.reader-top{ gap:8px; flex-wrap:wrap; }
.reader-actions{ flex-wrap:wrap; }
.reader-btn{ min-width:36px; }

@media (max-width:480px){
.note-title{ font-size:22px; }
.reader-container{ padding:18px 14px 120px; }
.reader-btn{ height:34px; font-size:13px; }
.lang-toggle button{ height:34px; font-size:13px; }
}

/* =========================================================
   ⭐⭐⭐ FULL WIDTH LAYOUT FIX (WEB + ANDROID APP)
   Added without modifying existing code
   ========================================================= */

html, body{
width:100%;
max-width:100%;
overflow-x:hidden;
}

.container,
.app,
.dashboard,
.grid,
.list-container,
.topic-container{
width:100% !important;
max-width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
}

.header{
width:100%;
max-width:100%;
box-sizing:border-box;
}

.card{
width:100%;
}

/* improve desktop layout automatically */
@media (min-width:900px){

.grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.stats{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

}