/* ===============================
   GLOBAL
================================ */

*{
box-sizing:border-box;
--border-color:#c9ccd1;
}

.desktop-info{
border:1px solid var(--border-color);
}

.clock-mini{
border:1px solid var(--border-color);
}

.search-box{
border:1px solid var(--border-color);
}

.quick-links button{
border:1px solid var(--border-color);
}


.add-app-btn button{
border:1px solid var(--border-color);
}


body{
margin:0;
background:#ffffff; /* clean white background */
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
color:#111;
line-height:1.5;
}

/* ===============================
   MAIN DESKTOP
================================ */

.desktop{
max-width:1150px;
margin:auto;
padding:26px 18px 70px;
}

.desktop-topbar{
display:flex;
justify-content:flex-end;

margin-right:-12px;  /* remove right space */
margin-bottom:10px;  /* create gap below */
}

.clock-mini{
display:inline-flex;
align-items:center;

font-size:13px;
font-weight:600;

padding:6px 12px;

border:1px solid #e5e7eb;
border-radius:20px;

background:#fff;
white-space:nowrap;
}

/* ===============================
   INSTALL BUTTON
================================ */

.install-area{
text-align:center;
margin:20px 0 10px;
}

.install-btn{
display:inline-flex;
align-items:center;
gap:6px;

background:linear-gradient(135deg,#3b82f6,#2563eb);
color:#fff;

border:none;
padding:8px 16px;

font-size:13px;
font-weight:600;

border-radius:22px;
cursor:pointer;

box-shadow:0 6px 16px rgba(0,0,0,.15);
transition:.2s ease;
}

.install-btn:hover{
transform:translateY(-2px);
}

.install-icon{
width:14px;
height:14px;
stroke:#fff;
stroke-width:2;
fill:none;
}

.chrome-note{
font-size:12px;
color:#6b7280;
margin-top:8px;
}
/* ===============================
   WIDGETS
================================ */

.desktop-widgets{
display:flex;
justify-content:center;
margin-bottom:26px;
}

.clock-widget{
width:100%;
max-width:640px;

background:#fff;

border-radius:16px;

padding:20px 16px;

text-align:center;

border:1px solid #e7e7e7;

box-shadow:0 6px 20px rgba(0,0,0,.05);
}

#clockTime{
font-size:32px;
font-weight:600;
letter-spacing:.5px;
}

#clockDate{
font-size:13px;
color:#6b7280;
margin-top:4px;
}

/* ===============================
   SEARCH
================================ */
.desktop-search{
margin-top:16px;     /* gap above */
margin-bottom:16px;  /* gap below */
display:flex;
justify-content:center;
}

.search-box{
display:flex;
background:#fff;
border-radius:30px;
border:1px solid #e5e7eb;
overflow:hidden;

max-width:650px;   /* limit width */
width:100%;
}

.search-box input{
flex:1;
border:none;
padding:12px 16px;
font-size:14px;
outline:none;
}

.search-box button{
border:none;
background:#111;
color:#fff;
padding:0 18px;
font-size:13px;
cursor:pointer;
}

.search-box button:hover{
background:#000;
}

/* ===============================
   TITLES
================================ */

.section-title{
font-size:28px;
font-weight:700;
text-align:center;
margin-bottom:40px;
color:#111;
}

/* ===============================
   APPS GRID
================================ */

.apps-grid{
display:grid;
grid-template-columns:repeat(auto-fill,80px);
gap:10px;
justify-content:flex-start;
margin-top:10px;
}

.apps-grid a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

background:#fff;

border-radius:14px;

padding:16px 10px;

border:1px solid #e7e7e7;

text-decoration:none;

color:#111;

font-size:12px;

transition:.2s ease;

box-shadow:0 3px 12px rgba(0,0,0,.04);
}

.apps-grid a:hover{
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.apps-grid img{
width:38px;
height:38px;
border-radius:10px;
margin-bottom:8px;
}

/* ===============================
   ADD APP
================================ */

.add-app-btn{
margin-top:14px;
}

.add-app-btn button{
width:100%;

background:#fafafa;

border:1px dashed #d1d5db;

border-radius:12px;

padding:12px;

font-size:13px;

cursor:pointer;

transition:.2s;
}

.add-app-btn button:hover{
background:#f3f4f6;
}

/* ===============================
   QUICK LINKS
================================ */
.desktop-links{
background:#fff;
border:1px solid #e5e7eb;
border-radius:14px;

padding:18px 20px;

margin-bottom:20px;

box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.quick-links{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;

font-size:14px;
margin-top:10px;
}

.quick-links a{
color:#1a73e8;
text-decoration:none;
font-weight:500;
}

.quick-links a:hover{
text-decoration:underline;
}

.divider{
color:#9ca3af;
font-size:14px;
}

/* mobile */

@media(max-width:600px){

.quick-links{
justify-content:center;
font-size:13px;
}

}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width:900px){

.desktop{
max-width:100%;
padding:20px 14px 60px;
}

.apps-grid{
grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
}

}

@media (max-width:600px){

#clockTime{
font-size:26px;
}

.apps-grid{
grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
}

.apps-grid img{
width:34px;
height:34px;
}

}

@media (max-width:400px){

.apps-grid{
grid-template-columns:repeat(4,1fr);
}

}

.links-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:14px;
}

.clock-mini::before{
content:"🕒";
margin-right:6px;
font-size:12px;
}

.clock-mini{
font-size:13px;
font-weight:600;

color:#111827;

padding:6px 14px;

border-radius:30px;

background:rgba(255,255,255,0.6);
backdrop-filter:blur(8px);

border:1px solid rgba(255,255,255,0.4);

box-shadow:0 4px 14px rgba(0,0,0,.08);

letter-spacing:.3px;
}

.app{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
cursor:pointer;
}

/* ICON WRAPPER */

.app-icon{
position:relative;
width:40px;
height:40px;
}

/* ICON */

.app-icon img{
width:100%;
height:100%;
border-radius:10px;
}

/* CLOSE BUTTON */

.app-remove{
position:absolute;
top:-6px;
right:-6px;

width:18px;
height:18px;

background:#ef4444;
color:#fff;

border:none;
border-radius:50%;

font-size:12px;
font-weight:bold;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;
}

.app-remove:hover{
background:#dc2626;
}


.add-app-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.4);

display:none;
align-items:center;
justify-content:center;

z-index:2000;
}
.add-app-box{
background:#fff;
padding:28px;
border-radius:14px;

width:520px;      /* large popup for desktop */
max-width:96%;    /* expands on mobile */

box-shadow:0 14px 40px rgba(0,0,0,.18);
}

/* Mobile */

@media (max-width:600px){

.add-app-box{
width:96%;
padding:24px;
}

}

.add-app-box h3{
margin-top:0;
margin-bottom:16px;
font-size:18px;
}

.add-app-box input{
width:100%;
padding:12px 14px;
margin-bottom:14px;

border:1px solid #e5e7eb;
border-radius:8px;

font-size:15px;
}

.add-app-actions{
display:flex;
gap:8px;
justify-content:flex-end;
}

.add-app-actions button{
padding:6px 12px;
border:none;
background:#2563eb;
color:#fff;
border-radius:6px;

}

.add-app-actions button:last-child{
background:#aaa;
}



.app-tools{
display:flex;
gap:10px;
margin-top:10px;
}

.app-tools button,
.restore-btn{
flex:1;
padding:10px;
border:1px dashed #cbd5e1;
border-radius:10px;
background:#fff;
font-size:14px;
cursor:pointer;
text-align:center;
}

.restore-btn input{
display:none;
}





/* Hide header text and specific menu items */

.logo span{
display:none;
}

/* Desktop menu */

.menu a[href="https://apps.dremart.com"],
.menu a[href="/apppwa/image-converter.php"]{
display:none;
}

/* Right buttons */

.right a[href="/apppwa/login.php"],
.right a[href="/apppwa/register.php"]{
display:none;
}

/* Mobile menu */

.mobile-menu a[href="/apppwa/"],
.mobile-menu a[href="/apppwa/image-converter.php"],
.mobile-menu a[href="/apppwa/login.php"],
.mobile-menu a[href="/apppwa/register.php"]{
display:none;
}

.desktop-popular{
max-width:1200px;
margin:60px auto;
padding:0 20px;
}

.popular-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}

/* Card */

.popular-box{
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:14px;
padding:20px;
transition:all .2s ease;
}

.popular-box:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* Category title */

.popular-box h3{
font-size:16px;
font-weight:600;
margin-bottom:14px;
color:#111;
}

/* List */

.popular-box ul{
list-style:none;
padding:0;
margin:0;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:6px 10px;
}

/* Links */

.popular-box li a{
display:block;
padding:6px 8px;
font-size:13px;
color:#444;
text-decoration:none;
border-radius:6px;
transition:.15s;
}

.popular-box li a:hover{
background:#f3f4f6;
color:#000;
}

/* Mobile */

@media (max-width:600px){

.desktop-popular{
margin:40px auto;
}

.popular-grid{
gap:14px;
}

.popular-box{
padding:16px;
}

.popular-box h3{
font-size:15px;
margin-bottom:10px;
}

.popular-box li a{
font-size:12px;
padding:5px 6px;
}

}


.desktop-notes{
max-width:800px;
margin:40px auto;
}

#quickNotes{
width:100%;
min-height:140px;
resize:vertical;

padding:14px;

font-size:14px;
line-height:1.5;

border-radius:10px;
border:1px solid #e5e7eb;

background:#ffffff;

outline:none;

transition:.2s;
}

#quickNotes:focus{
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,0.1);
}


.notes-tools{
display:flex;
gap:10px;
margin-top:10px;
}

.notes-tools button,
.restore-notes-btn{
font-size:13px;
padding:6px 12px;
border-radius:6px;
border:1px solid #e5e7eb;
background:#fff;
cursor:pointer;
}

.notes-tools button:hover,
.restore-notes-btn:hover{
background:#f3f4f6;
}

.restore-notes-btn input{
display:none;
}


/* AI PROMPTS */

.desktop-ai{
max-width:1100px;
margin:50px auto;
padding:0 20px;
}

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

.ai-box{
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
padding:14px;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.ai-box p{
font-size:14px;
margin-bottom:10px;
color:#111;
}

.ai-actions{
display:flex;
gap:8px;
}

.ai-actions button,
.ai-actions a{
font-size:12px;
padding:5px 10px;
border-radius:6px;
border:1px solid #e5e7eb;
background:#fff;
cursor:pointer;
text-decoration:none;
color:#111;
}

.ai-actions button:hover,
.ai-actions a:hover{
background:#f3f4f6;
}


/* AI SEARCH */

.ai-search{
display:flex;
justify-content:center;
gap:8px;
margin-bottom:20px;
}

.ai-search input{
width:280px;
padding:8px 10px;

border:1px solid #e5e7eb;
border-radius:8px;

font-size:13px;
outline:none;
}

.ai-search input:focus{
border-color:#2563eb;
}

.ai-search button{
padding:8px 14px;

font-size:13px;
font-weight:600;

border-radius:8px;
border:1px solid #e5e7eb;

background:#fff;
cursor:pointer;
}

.ai-search button:hover{
background:#f3f4f6;
}




/* RECENTLY USED */

/* RECENT APPS DOCK */

.desktop-recent{
max-width:1100px;
margin:10px auto 30px;
padding:0 20px;
}

.recent-title{
font-size:13px;
font-weight:600;
margin-bottom:10px;
color:#666;
}

.recent-apps{
display:flex;
gap:14px;
flex-wrap:wrap;
}

.recent-app{
width:44px;
text-align:center;
cursor:pointer;
}

.recent-app img{
width:32px;
height:32px;

border-radius:8px;

display:block;
margin:auto;

transition:.2s;
}

.recent-app span{
font-size:11px;
color:#555;

display:block;
margin-top:4px;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.recent-app:hover img{
transform:translateY(-3px) scale(1.1);
}


.recent-icon{
position:relative;
}

.recent-remove{

position:absolute;
top:-6px;
right:-6px;

width:16px;
height:16px;

font-size:11px;

border:none;
border-radius:50%;

background:#ef4444;
color:#fff;

cursor:pointer;

opacity:1;

transition:.2s;

}

.recent-app:hover .recent-remove{
opacity:1;
}



/* DESKTOP INFO TEXT */

.desktop-text{
display:flex;
justify-content:center;
margin:30px 0 40px;
padding:0 20px;
}

.desktop-info{

max-width:680px;

font-size:14px;
line-height:1.6;

color:#444;

text-align:center;

background:#ffffff;

border:1px solid #e5e7eb;
border-radius:12px;

padding:18px 20px;

box-shadow:0 2px 8px rgba(0,0,0,0.04);

}

.install-text-btn{

display:inline-block;

margin-top:10px;

padding:6px 12px;

font-size:13px;
font-weight:600;

border-radius:8px;

border:1px solid #e5e7eb;

background:#f9fafb;

cursor:pointer;

color:#111;

transition:.2s;

}

.install-text-btn:hover{

background:#f3f4f6;

}