html, body{
height:100%;
}

body{
display:flex;
flex-direction:column;
min-height:100vh;
}

#utilities{
flex:1;
}

body{
background:#0f172a;
min-height:100vh;
}

/* FULL BACKGROUND LAYER (FIX) */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;

background:
radial-gradient(circle at 20% 20%, #1e293b 0%, transparent 40%),
radial-gradient(circle at 80% 0%, #1e40af 0%, transparent 40%),
#0f172a;
}



.editor-area{
white-space:pre-wrap; /* preserve formatting */
word-break:break-word;
}



/* WRAPPER */

.wrapper{
max-width:1200px;
margin:auto;
padding:120px 20px 80px;
}

/* HERO BUTTONS */

.hero-buttons{
margin-top:30px;
display:flex;
justify-content:center;
gap:16px;
flex-wrap:wrap;
}

.btn{
padding:12px 24px;
border-radius:10px;
font-size:14px;
text-decoration:none;
transition:.25s;
}

.btn-primary{
background:#2563eb;
color:white;
}

.btn-primary:hover{
background:#1d4ed8;
}

.btn-outline{
border:1px solid #334155;
color:#94a3b8;
}

.btn-outline:hover{
border-color:#2563eb;
color:white;
}

/* CARD EFFECT */

.card{
position:relative;
overflow:hidden;
}

.card::before{
pointer-events:none;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:
radial-gradient(
circle 200px at var(--x) var(--y),
rgba(37,99,235,.15),
transparent 40%
);
opacity:0;
transition:.25s;
}

.card:hover::before{
opacity:1;
}

/* NAV SHADOW */

.nav{
box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* HERO TEXT */

.hero h1{
background:linear-gradient(90deg,#ffffff,#94a3b8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* MOBILE SAFE */

@media (max-width:768px){

.wrapper{
padding:100px 16px 60px;
}

.hero-buttons{
gap:10px;
}

.btn{
padding:10px 16px;
font-size:13px;
}

}

/* ===============================
   NAV MOBILE FINAL FIX
================================ */

.nav-toggle{
display:none;
flex-direction:column;
gap:4px;
cursor:pointer;
}

.nav-toggle span{
width:22px;
height:2px;
background:white;
display:block;
}

@media (max-width:768px){

.nav-inner{
flex-direction:row;
justify-content:space-between;
}

.nav-toggle{
display:flex;
}

.nav-links{
position:absolute;
top:60px;
left:0;
width:100%;
background:#0f172a;
flex-direction:column;
align-items:center;
gap:16px;
padding:20px 0;
display:none;
border-bottom:1px solid #1e293b;
}

.nav-links.active{
display:flex;
}

.nav-links a{
margin:0;
}

}


/* =========================
APPS GRID (MOBILE STYLE)
========================= */

.apps-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
gap:20px;
justify-items:center;
}

.app-card{
width:90px;
display:flex;
flex-direction:column;
align-items:center;   /* 🔥 FIX: centers icon + text */
justify-content:center;
text-align:center;
cursor:pointer;
transition:.2s;
}

.app-card:hover{
transform:scale(1.05);
}

.app-icon{
width:64px;
height:64px;
border-radius:18px;
background:linear-gradient(180deg,#2563eb,#1d4ed8);
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
box-shadow:0 10px 25px rgba(0,0,0,.5);
}

.app-name{
margin-top:8px;
font-size:13px;
color:#cbd5f5;
width:100%;           /* 🔥 FIX */
text-align:center;    /* 🔥 FIX */
}

.app-card.disabled{
opacity:0.4;
pointer-events:none;
}



/* =========================
NOTES APP UI
========================= */

.notes-app{
display:flex;
height:80vh;
gap:10px;
}

/* SIDEBAR */
.notes-sidebar{
width:220px;
background:#020617;
padding:12px;
border-radius:12px;
display:flex;
flex-direction:column;
gap:10px;
}

.sidebar-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

/* PAGES */
.pages-list{
flex:1;
overflow:auto;
}

.page-item{
padding:8px;
border-radius:8px;
cursor:pointer;
color:#cbd5f5;
}

.page-item:hover{
background:#1e293b;
}

/* EDITOR */
.notes-editor{
flex:1;
display:flex;
flex-direction:column;
}

.editor-toolbar{
display:flex;
gap:10px;
margin-bottom:10px;
}

.editor-toolbar button{
background:#1e293b;
border:none;
padding:6px 10px;
border-radius:6px;
color:white;
cursor:pointer;
}

.editor-area{
flex:1;
background:#020617;
min-height:300px;
padding:15px;
border-radius:12px;
outline:none;
color:white;
overflow:auto;
}


.editor-area:empty:before{
content: attr(data-placeholder);
color:#64748b;
pointer-events:none;
}

/* MOBILE */
@media (max-width:768px){

.notes-app{
flex-direction:column;
height:auto;
}

.notes-sidebar{
width:100%;
flex-direction:row;
overflow:auto;
}

.page-item{
white-space:nowrap;
}

}


/* =========================
APP SECTIONS
========================= */

.apps-section{
margin-bottom:30px;
}

.apps-section-title{
font-size:16px;
color:#94a3b8;
margin-bottom:14px;
}