*{box-sizing:border-box}

:root{
--bg:#07111f;
--bg2:#0b1728;
--card:#111e30;
--card2:#142238;
--text:#f7f9fc;
--muted:#8e9bad;
--border:#1b2b40;
--accent:#7847f5;
}

body{
margin:0;
font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:linear-gradient(145deg,#06101d,#091729);
color:var(--text);
min-height:100vh;
}

button,input{font:inherit}

button{cursor:pointer}

.app{
display:grid;
grid-template-columns:190px 1fr;
min-height:100vh;
}

.sidebar{
background:#071321;
border-right:1px solid var(--border);
padding:22px 16px;
display:flex;
flex-direction:column;
gap:22px;
}

.brand{
display:flex;
align-items:center;
gap:10px;
padding:0 8px 8px;
}

.brand-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
border:2px solid #8057ff;
border-radius:12px;
font-size:22px;
}

.brand strong{
display:block;
font-size:20px;
}

.brand span{
display:block;
font-size:10px;
letter-spacing:2px;
color:#a77cff;
font-weight:800;
}

.sidebar nav{
display:flex;
flex-direction:column;
gap:4px;
}

.nav{
border:0;
background:transparent;
color:#dbe4ef;
padding:10px 12px;
border-radius:8px;
display:flex;
gap:11px;
align-items:center;
text-align:left;
}

.nav:hover,.nav.active{
background:linear-gradient(90deg,#5522b9,#7047dd);
color:#fff;
}

.sidebar-bottom{
margin-top:auto;
display:grid;
gap:16px;
}

.scan-button{
border:0;
color:#fff;
background:linear-gradient(90deg,#6731d9,#526df2);
padding:12px 8px;
border-radius:8px;
}

.profile{
background:#101e31;
border:1px solid var(--border);
border-radius:10px;
padding:10px;
display:flex;
align-items:center;
gap:10px;
}

.avatar{
width:34px;
height:34px;
border-radius:50%;
background:#7544ed;
display:grid;
place-items:center;
font-weight:800;
}

.profile small{
display:block;
color:var(--muted);
margin-top:2px;
}

main{min-width:0}

.topbar{
height:68px;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
padding:0 26px;
gap:20px;
}

.search{
width:min(400px,50%);
height:40px;
border:1px solid var(--border);
background:#0d192a;
border-radius:22px;
padding:0 15px;
display:flex;
align-items:center;
gap:8px;
}

.search input{
width:100%;
border:0;
outline:0;
background:transparent;
color:#fff;
}

.top-actions{
margin-left:auto;
display:flex;
gap:8px;
}

.top-actions button,.menu-button{
background:transparent;
border:0;
color:white;
font-size:19px;
}

.menu-button{display:none}

#homeView{
padding:22px;
max-width:1500px;
margin:auto;
}

.welcome{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.welcome h1{
margin:0 0 5px;
font-size:26px;
}

.welcome p{
margin:0;
color:var(--muted);
}

.clock{
background:#101d30;
border:1px solid var(--border);
border-radius:10px;
padding:10px 16px;
text-align:center;
}

.clock small{
display:block;
color:var(--muted);
}

.clock strong{
font-size:23px;
}

.metrics{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-bottom:14px;
}

.metrics article{
background:linear-gradient(145deg,#111e31,#0e1a2b);
border:1px solid var(--border);
border-radius:10px;
padding:15px;
display:flex;
justify-content:space-between;
min-height:105px;
}

.metrics small,.metrics span{
display:block;
color:var(--muted);
}

.metrics strong{
display:block;
font-size:25px;
margin:7px 0 2px;
}

.metrics i{
width:42px;
height:42px;
border-radius:9px;
display:grid;
place-items:center;
font-style:normal;
font-weight:800;
}

.modules{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:11px;
}

.module{
border:0;
min-height:86px;
border-radius:9px;
padding:16px;
color:white;
display:grid;
grid-template-columns:50px 1fr 20px;
align-items:center;
gap:10px;
text-align:left;
transition:.15s transform;
}

.module:hover{transform:translateY(-2px)}

.module b{
width:46px;
height:46px;
border-radius:10px;
background:#ffffff1c;
display:grid;
place-items:center;
font-size:25px;
}

.module strong{
display:block;
font-size:17px;
}

.module span{
display:block;
font-size:12px;
margin-top:5px;
opacity:.85;
line-height:1.35;
}

.module em{
font-size:28px;
font-style:normal;
}

.purple{background:linear-gradient(135deg,#6731ce,#5630aa)}
.green{background:linear-gradient(135deg,#078d52,#0aa06a)}
.blue{background:linear-gradient(135deg,#0878cc,#0755a9)}
.orange{background:linear-gradient(135deg,#e37c00,#c56400)}
.cyan{background:linear-gradient(135deg,#0785ce,#0871b7)}
.violet{background:linear-gradient(135deg,#6c42c8,#4d3295)}
.emerald{background:linear-gradient(135deg,#119851,#087c40)}
.pink{background:linear-gradient(135deg,#c52d6b,#a8235b)}
.teal{background:linear-gradient(135deg,#0799a1,#087984)}
.royal{background:linear-gradient(135deg,#147bd0,#0753ad)}
.amber{background:linear-gradient(135deg,#e6a000,#bd7d00)}
.indigo{background:linear-gradient(135deg,#7047c7,#503292)}

.bottom-panels{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:14px;
}

.panel{
background:#101d2f;
border:1px solid var(--border);
border-radius:10px;
padding:14px;
}

.panel h3{
font-size:14px;
margin:0 0 8px;
display:flex;
justify-content:space-between;
}

.panel h3 button{
background:transparent;
border:0;
color:#ad82ff;
font-size:11px;
}

.row{
display:grid;
grid-template-columns:36px 1fr auto;
align-items:center;
gap:9px;
padding:10px 0;
border-bottom:1px solid #1d2b3c;
font-size:12px;
}

.row:last-child{border-bottom:0}

.row small{
display:block;
color:var(--muted);
margin-top:3px;
}

.round{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:8px;
}

.danger{color:#ff4d5c!important}
.warning{color:#ffd21c!important}
.success{color:#43d981!important}

.pink{background:#c52669}
.orange{background:#e77d00}
.green{background:#159353}
.blue{background:#1375cf}
.violet{background:#7045d1}
.amber{background:#bd8100}
.purple{background:#6a3cc7}

.mobile-title,.mobile-add,.bottom-nav{display:none}

.hidden{display:none!important}

.module-view{
padding:30px;
}

.back{
border:0;
background:#142239;
color:white;
padding:10px 15px;
border-radius:8px;
}

.empty-module{
max-width:620px;
margin:70px auto;
text-align:center;
background:#101d30;
border:1px solid var(--border);
border-radius:18px;
padding:50px 25px;
}

.empty-module>div{
width:75px;
height:75px;
margin:auto;
border-radius:20px;
background:linear-gradient(135deg,#7542ee,#326df0);
display:grid;
place-items:center;
font-size:30px;
}

.empty-module h1{
font-size:30px;
margin-bottom:10px;
}

.empty-module p{
font-size:18px;
}

.empty-module span{
color:var(--muted);
}

.modal{
position:fixed;
inset:0;
background:#000a;
display:grid;
place-items:center;
z-index:100;
padding:20px;
}

.modal-card{
width:min(520px,100%);
background:#101d30;
border:1px solid #273750;
border-radius:18px;
padding:24px;
position:relative;
}

.close{
position:absolute;
right:15px;
top:12px;
background:transparent;
border:0;
color:white;
font-size:25px;
}

.action-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin:20px 0;
}

.action-grid button{
background:#17263b;
border:1px solid #263952;
border-radius:10px;
color:white;
padding:18px 10px;
display:grid;
gap:8px;
font-size:20px;
}

.action-grid strong{font-size:13px}

.modal-card small{color:var(--muted)}


@media(max-width:850px){

body{padding-bottom:70px}

.app{display:block}

.sidebar{display:none}

.topbar{
height:58px;
padding:0 15px;
}

.menu-button{display:block}

.search{
width:auto;
flex:1;
}

.top-actions button:nth-child(2){display:none}

#homeView{
padding:16px 14px;
}

.welcome{
align-items:flex-start;
}

.welcome h1{font-size:21px}

.clock{display:none}

.metrics{
grid-template-columns:repeat(2,1fr);
gap:9px;
}

.metrics article{
min-height:100px;
padding:13px;
}

.metrics strong{font-size:23px}

.metrics i{
width:37px;
height:37px;
}

.mobile-title{
display:block;
font-size:15px;
margin:18px 0 10px;
}

.modules{
grid-template-columns:repeat(3,1fr);
gap:8px;
}

.module{
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
padding:9px 4px;
min-height:90px;
gap:5px;
}

.module b{
width:38px;
height:38px;
font-size:20px;
}

.module strong{
font-size:11px;
}

.module span,.module em{
display:none;
}

.bottom-panels{
grid-template-columns:1fr;
}

.bottom-panels .panel:nth-child(n+2){
display:none;
}

.mobile-add{
display:block;
width:210px;
margin:18px auto 5px;
border:0;
border-radius:24px;
padding:13px;
color:white;
background:linear-gradient(90deg,#6634dc,#5571f4);
}

.bottom-nav{
position:fixed;
left:0;
right:0;
bottom:0;
height:65px;
background:#071321f5;
border-top:1px solid var(--border);
display:grid;
grid-template-columns:repeat(5,1fr);
z-index:50;
}

.bottom-nav button{
border:0;
background:transparent;
color:#9da9b8;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
font-size:17px;
}

.bottom-nav span{
font-size:9px;
}

.bottom-nav .active{
color:#9769ff;
}

#bottomPlus{
width:48px;
height:48px;
border-radius:50%;
align-self:center;
justify-self:center;
background:linear-gradient(135deg,#753ee8,#536cf4);
color:white;
font-size:26px;
}

.module-view{
padding:20px 15px;
}

.empty-module{
margin:30px auto;
padding:40px 18px;
}

}


@media(max-width:390px){

.modules{
grid-template-columns:repeat(3,1fr);
}

.module{
min-height:82px;
}

.search input{
font-size:13px;
}

}