html, body {
		height: 100%;
		margin: 0;
		overflow: hidden;
	}
        :root { 
            --bg: #FAF9F6; --surface: #f4f4f5; --text: #18181b; --border: #e4e4e7; --accent: #000000; --header-bg: #ffffff;
            --font-main: 'Plus Jakarta Sans', sans-serif;
            --danger: #ef4444;
        }
        [data-theme="sepia"] { --bg: #f4ecd8; --surface: #e9dfc4; --text: #433422; --border: #d3c5a3; --accent: #5d4037; --header-bg: #f4ecd8; }
        [data-theme="night"] { --bg: #0f172a; --surface: #1e293b; --text: #f1f5f9; --border: #334155; --accent: #38bdf8; --header-bg: #0f172a; }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
        body { font-family: var(--font-main); background: var(--bg); color: var(--text); }
		
        /* --- PRINT LOGIC --- */
        @media print {
            body { position: static; overflow: visible; background: #fff !important; color: #000 !important; }
            #home-page, .editor-header, #toolbar, .fab, .dropdown, #sidebar, .popup-box, .align-popup { display: none !important; }
            #editor-page { display: block !important; height: auto !important; position: static !important; }
            .editor-body { padding: 0 !important; overflow: visible !important; }
            #note-title { border: none !important; font-size: 28pt !important; display: block !important; margin-bottom: 20px !important; color: #000 !important; }
            #note-content { border: none !important; font-size: 12pt !important; color: #000 !important; }
            input[type=checkbox] { appearance: auto; -webkit-appearance: checkbox; }
        }

        /* --- UI STRUCTURE --- */
        .app-page{
            position: fixed;
            inset: 0;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background: var(--bg);
            overflow: hidden;
        }
        
        .page-header{
            flex-shrink: 0;
            height: 60px;
            z-index: 50;
        }
        
        .page-body{
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .page-content{
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
        }
        
        .page-footer{
            flex-shrink: 0;
        }
        
        #home-page{
            width:100%;
            height: 100%;
            position:fixed;
            inset:0;
            display:flex;
            flex-direction:column;
            overflow:hidden;
            background:var(--bg);
        }
        
        #sidebar { position: fixed; left: -280px; top: 0; width: 280px; height: 100%; background: var(--bg); z-index: 2000; transition: 0.3s; box-shadow: 5px 0 15px rgba(0,0,0,0.1); padding: 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
        #sidebar.active { left: 0; }
        
        .home-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
        .home-header h1 { font-size: 18px; margin: 0; flex: 1; text-align: center; }
        #notes-list {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 100px;
        }
        
        .note-card { background:#fff; border-radius:8px; padding: 16px; margin:12px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; box-shadow:0 4px 12px rgba(0,0,0,0.06);}
        .note-card:hover { background: var(--surface); }
        

        #editor-page {
            display: none;
            flex-direction: column;
            height: 100dvh;
            width: 100vw;
            position: fixed;
            top: 0;
            left: 0;
            overflow: hidden;
            background: var(--bg);
        }
        .editor-header { padding: 0 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 4px; height: 60px; flex-shrink: 0; background: var(--header-bg); }
        .editor-body {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }
        
        #note-title {
					position:absolute;
					top:60px;
					left:0;
					right:0;
					width:100%;
					border:none;
					font-size:20px;
					padding:10px 16px;
					background:var(--bg);
					display:none;
					z-index:2000;
					border-bottom:1px solid var(--border);
				} 		
		#note-content {
                    border: none;
                    font-size: 17px;
                    padding: 12px;
                    line-height: 1.6;
                    outline: none;
                    color: var(--text);
                    min-height: auto;
                    overflow: visible;
                }
        #note-content input[type="checkbox"] { vertical-align: middle; margin-right: 8px; transform: scale(1.2); cursor: pointer; }
		#note-content div { margin:12px 0; line-height:1.6; }
		#title-preview{ flex:1; font-size:18px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:text; padding:0 10px; }
        /* --- TOOLBAR --- */
        #toolbar {
            flex-shrink: 0;
            background: var(--surface);
            border-top: 1px solid var(--border);
            display: none;
            overflow-x: auto;
            white-space: nowrap;
            padding: 3px 8px;   
            gap: 10px;          
            min-height: 42px;
        }
        #toolbar::-webkit-scrollbar { display: none; }
        .tool-btn { background: transparent; border: none; border-radius: 6px; min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--text); flex-shrink: 0; cursor: pointer; position: relative; }
        .tool-btn:active { background: var(--surface); }
        .tool-btn.active { background: var(--accent) !important; color: #fff !important; }
        .fs-select { height: 32px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; padding: 0 8px; text-align: center; }

        /* --- MENUS & MODALS --- */
        .dropdown { position: fixed; right: 10px; top: 55px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; width: 220px; display: none; z-index: 3000000; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; max-height: 300px; overflow-y: auto; }
        .dropdown-item { padding: 12px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); }
        .dropdown-item:hover { background: var(--surface); }
        .dropdown-item i { width: 18px; height: 18px; }
		.dropdown-item.active { background: var(--accent); color: #fff; }
		
		/* alert and toast */ 
		#toast{
			position:fixed;
			bottom:25px;
			left:50%;
			transform:translateX(-50%);
			background:#222;
			color:#fff;
			padding:12px 18px;
			border-radius:30px;
			font-size:14px;
			opacity:0;
			pointer-events:none;
			transition:all 0.3s ease;
			z-index:9999;
			box-shadow:0 5px 20px rgba(0,0,0,0.2);
		}

		#toast.show{
			opacity:1;
			bottom:40px;
		}

        /* Alignment Popup (Drop-up) */
        .align-popup {
            position: fixed;
            display: flex;
            align-items: center;
            width: max-content;
        
            gap: 5px;
            padding: 5px;
            background: var(--bg);
            border: 1px solid var(--border);
            border-radius: 50px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            z-index: 9999999;
        }
		
        .modal-btn{
			width:100%;
			padding:12px;
			border-radius:10px;
			border:1px solid var(--border);
			background:var(--surface);
			color:var(--text);
			font-weight:500;
			cursor:pointer;
			display:flex;
			align-items:center;
			gap:10px;
			transition:.2s;
			}

		.modal-btn:hover{
			background:rgba(0,0,0,.05);
			}
			
        .fab { position: fixed; bottom: 30px; right: 20px; width: 56px; height: 56px; background: #E0E0E0; color: #343541; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.3); z-index: 1000; cursor: pointer; }

        /* Folder List Items in Sidebar */
        .folder-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
        .folder-row.active { background: var(--surface); font-weight: 600; }
        .folder-actions { display: flex; gap: 8px; }
        .folder-actions button { background: none; border: none; padding: 4px; cursor: pointer; color: var(--text); opacity: 0.6; }
        .folder-actions button:hover { opacity: 1; color: var(--accent); }
        .folder-actions button.del:hover { color: var(--danger); }
        
        /* Reading Mode */
        .reading-mode .editor-body { font-family: 'Lora', serif; line-height: 1.8; font-size: 19px; max-width: 800px; margin: 0 auto; }
        .reading-mode #toolbar { display: none !important; }
        .reading-mode #note-title { pointer-events: none; border-bottom: 2px solid var(--border); padding-bottom: 10px; margin-bottom: 20px; }
		
		.material-symbols-outlined {
			font-size: 24px;
			vertical-align: middle;
			user-select: none;
		}
		
		@media print {

    @page {
        size: A4;
        margin: 20mm;
    }

    body {
        overflow: visible !important;
        height: auto !important;
        background: #fff !important;
	}	

    #editor-page {
        position: static !important;
        inset: auto !important;
    }

    .editor-body {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 !important;
        overflow: visible !important;
    }

    #note-content {
        font-size: 12pt;
        line-height: 1.7;
        word-break: break-word;
    }
	h1, h2, h3 {
        page-break-after: avoid;
    }

    ul, ol, blockquote {
        page-break-inside: avoid;
    }

    img, table {
        page-break-inside: avoid;
        max-width: 100%;
    }
	
	#editor-statusbar {
				display: none !important;
			  }	  
}
	
	#settings-page{
        position: fixed;
        inset: 0;
        display: none;
        flex-direction: column;
        overflow: hidden;
        background: var(--bg);
    }

		.settings-header{
    		height:60px;
    		display:flex;
    		align-items:center;
    		padding:0 14px;
    		border-bottom:1px solid var(--border);
    		background:var(--header-bg);
    	}

    		.settings-header h2{
    		flex:1;
    		text-align:center;
    		font-weight:600;
    		letter-spacing:.3px;
    	}   

		.settings-body{
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
	

		.settings-title{
		font-size:13px;
		letter-spacing:.08em;
		text-transform:uppercase;
		opacity:.6;
		margin:24px 0 10px;
		}
		
        .settings-group{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top:10px;
        }
        
        .setting-pill{
        display:flex;
        align-items:center;
        justify-content:space-between;
        
        padding:14px 18px;
        
        border-radius:10px;
        
        border:1px solid var(--border);
        
        background:var(--card-bg,#fff);
        
        cursor:pointer;
        
        transition:.2s;
        
        font-size:15px;
        }
        
        .setting-pill:hover{
        background:rgba(0,0,0,.04);
        }
        
        .setting-left{
        display:flex;
        align-items:center;
        gap:10px;
        }
        
        .setting-right{
        display:flex;
        align-items:center;
        gap:6px;
        opacity:.8;
        }
        
        .settings-footer{
            flex-shrink: 0;
        }

.popup-title{
font-weight:600;
margin-bottom:6px;
}

.popup-box button{
display:flex;
align-items:center;
gap:10px;
padding:12px;
border-radius:10px;
border:1px solid var(--border);
background:var(--surface);
color:var(--text);
cursor:pointer;
transition:.2s;
}

.popup-box button:hover{
background:rgba(0,0,0,.05);
}

.setting-arrow{
font-size:18px;
opacity:.6;
margin-left:2px;
}

.menu-wrap{
position:relative;
}

.settings-menu{
position:absolute;
right:0;
top:40px;

background:var(--card-bg,#fff);

border:1px solid var(--border);
border-radius:10px;

box-shadow:0 6px 16px rgba(0,0,0,.08);

display:none;
min-width:160px;
}

.settings-menu button{
width:100%;
padding:10px 14px;

border:none;
background:transparent;

text-align:left;
cursor:pointer;
font-size:14px;
}

.settings-menu button:hover{
background:rgba(0,0,0,.05);
}

.about-group{
margin-top:10px;
}

.about-item{
justify-content:space-between;
}

.about-item .setting-left{
gap:12px;
}

.settings-footer{
margin-top:10px;
text-align:center;
opacity:.9;
margin-bottom: 5px;
}

.footer-line{
height:3px;
background:#1e6cff;
width:90%;
margin:30px auto 18px;
border-radius:4px;
}

.footer-text{
font-size:14px;
line-height:1.6;
}

.footer-text span{
font-size:12px;
opacity:.6;
}

/* ===== Profile Modal ===== */

#profile-modal .popup-box{
background:var(--surface);
border-radius:14px;
padding:20px;
width:90%;
max-width:420px;
}


#profile-modal h2{
    margin-top:0;
    font-size:20px;
	align-items: center;
}

.profile-field{
    margin-bottom:12px;
}

.profile-field label{
    display:block;
    font-size:14px;
    margin-bottom:4px;
}

.profile-field input{
    width:100%;
    padding:8px;
    border:1px solid var(--border);
    border-radius:6px;
}

/* ===== Secret Key Popup ===== */

#secretkey-popup .popup-box{
background:var(--surface);
border-radius:14px;
padding:20px;
width:90%;
max-width:420px;
}

#secretkey-value{
    word-break:break-all;
    background:#f5f5f5;
    padding:10px;
    border-radius:6px;
    margin:10px 0;
    font-family:monospace;
}

/* modern buttons */

.btn-primary{
    width:100%;
    padding:10px;
    border:none;
    border-radius:8px;
    background:#4a7cff;
    color:#fff;
    font-weight:600;
    cursor:pointer;
}

.btn-primary:hover{
    background:#3565e0;
}

.popup{
position:fixed;
inset:0;
background:rgba(255,255,255,.65);
backdrop-filter:blur(3px);
display:none;
align-items:center;
justify-content:center;
z-index:5000;
}

.popup-box{
background:var(--bg);
border-radius:14px;
padding:20px;
width:90%;
max-width:420px;
display:flex;
flex-direction:column;
gap:10px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.popup-box h2,
.popup-box h3{
text-align:center;
margin-top:0;
font-weight:600;
letter-spacing:.3px;
}

.backup-options{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin:15px 0;
}

.backup-options button{
	padding:10px;
	border:none;
	border-radius:10px;
	background:#eee;
	cursor:pointer;
}

.backup-options button.active{
	background:#0c9;
	color:#fff;
}

.backup-status{
	background:#f5f5f5;
	padding:10px;
	border-radius:10px;
	font-size:13px;
	margin:10px 0;
	line-height:1.6;
}



.pin-screen{
  position:fixed;
  inset:0;
  background:#f5f6fa;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:9999;
  font-family:sans-serif;
}

/* TOP AREA */
.pin-container{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#222;
}

#pin-title{
  font-size:22px;
  font-weight:600;
}

/* PIN BOXES */
#pin-boxes{
  display:flex;
  gap:20px;
  margin-top:25px;
}

.pin-box{
  width:18px;
  height:18px;
  border-bottom:2px solid #333;
}

.pin-box.filled::after{
  content:"•";
  font-size:20px;
  display:block;
  text-align:center;
  margin-top:-10px;
}

/* KEYPAD FULL WIDTH */
.pin-keypad{
  width:100%;
  background:#ffffff;
  padding:15px 10px 25px;
  box-shadow:0 -2px 10px rgba(0,0,0,0.08);

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

/* BUTTON STYLE */
.pin-keypad button{
  height:65px;
  font-size:20px;
  border:none;
  border-radius:14px;
  background:#f1f2f6;
  color:#222;
  font-weight:600;
  cursor:pointer;
  transition:0.15s;
}

.pin-keypad button:active{
  background:#dcdde1;
}

/* OK BUTTON SPECIAL */
.pin-keypad button:last-child{
  background:#4CAF50;
  color:#fff;
}



.color-popup {
    position: fixed;
    left: 12px;
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 160px;
    z-index: 9999;
}

.color-popup.show {
    display: grid;
}

.color {
    width: 24px;
    height: 24px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;             
    align-items: center;        
    justify-content: center;   
}

.tool-btn.color-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 4px;
	background: var(--line-color);
    border-radius: 0px;
}

.color-header {
    grid-column: span 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.color-header button {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
}

.font-popup {
    position: fixed;
    right: 12px;
    display: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 90px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    padding: 6px 0;
}

.font-popup.show {
    display: block;
}

.font-item {
    padding: 8px 10px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.font-item:hover {
    background: var(--surface);
}