html, body {
		height: 100%;
		margin: 0;
		overflow-x: hidden;
        overflow-y: auto;
	}
        :root { 
            --bg: #ffffff; --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 --- */
        #home-page{
            display:flex;
            flex-direction:column;
            width:100%;
            height:100%;
        }
        #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 { 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; }

        .note-card { border-bottom: 1px solid var(--border); padding: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
        .note-card:hover { background: var(--surface); }

        #editor-page { display: none; flex-direction: column; background: var(--bg); position: fixed; inset: 0; overflow: hidden; }
        .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; display: flex; flex-direction: column; padding: 20px; padding-bottom: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch;}
        
        #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 { flex: 1; border: none; font-size: 17px; padding: 12px; line-height: 1.6; outline: none; color: var(--text); min-height: 60vh; 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 { display:none; gap:4px; overflow-x:auto; padding:8px; background:var(--bg); border-bottom:1px solid var(--border); flex-shrink:0; }
        #toolbar::-webkit-scrollbar { display: none; }
        .tool-btn { background: transparent; border: none; border-radius: 6px; min-width: 40px; height: 40px; 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: absolute; 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: none;
			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;
		}
		
		#editor-statusbar {
					position:sticky;
					bottom:0;
					background:#f5f5f5;
					border-top:1px solid #ddd;
					padding:8px 12px;
					font-size:14px;
					display:flex;
					justify-content:space-between;
					color:#555;
				}
        .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 !im
	}	

    #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{
		display:none;
		flex-direction:column;
		position:fixed;
		inset:0;
		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;
		overflow-y:auto;
		padding:20px;
		margin:auto;
		width:100%;
	}
	

		.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;
}

.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;
}