:root{

--bg:#101010;
--surface:#1b1b1b;
--surface2:#252525;
--accent:#4CAF50;
--text:#ffffff;
--sub:#aaaaaa;
--radius:18px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{

background:var(--bg);
color:var(--text);
height:100vh;
display:flex;
flex-direction:column;
overflow:hidden;

}

.header{

padding:20px;

}

.title h1{

font-size:32px;

}

.title p{

color:var(--sub);
margin-top:4px;

}

.searchContainer{

margin-top:18px;

}

#search{

width:100%;
padding:15px 20px;
border:none;
outline:none;
border-radius:999px;

background:var(--surface);

color:white;

font-size:16px;

}

main{

flex:1;
overflow:hidden;

}

.vmList{

height:100%;
overflow-y:auto;

padding:16px;

}

.vm{

display:flex;

align-items:center;

background:var(--surface);

border-radius:var(--radius);

padding:16px;

margin-bottom:14px;

transition:.25s;

cursor:pointer;

}

.vm:hover{

background:var(--surface2);

transform:translateY(-2px);

}

.vmIcon{

width:58px;
height:58px;

margin-right:16px;

flex-shrink:0;

}

.vmIcon img{

width:100%;
height:100%;

object-fit:contain;

}

.vmInfo{

flex:1;

}

.vmName{

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

}

.vmDetails{

margin-top:5px;

color:var(--sub);

font-size:14px;

}

.vmButtons{

display:flex;

align-items:center;

gap:8px;

}

.vmButtons button{

width:42px;
height:42px;

border:none;

border-radius:50%;

background:#303030;

color:white;

cursor:pointer;

font-size:18px;

transition:.2s;

}

.vmButtons button:hover{

background:#444;

}

.modal{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

display:none;

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

background:rgba(0,0,0,.7);

z-index:1000;

}

.modalCard{

width:min(700px,92vw);

max-height:90vh;

overflow-y:auto;

background:#1b1b1b;

border-radius:20px;

padding:22px;

}

.modalHeader{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.closeButton{

width:42px;
height:42px;

border:none;

border-radius:50%;

background:#333;

color:white;

font-size:20px;

cursor:pointer;

}

.tabBar{

display:flex;

gap:10px;

margin-bottom:20px;

}

.tab{

padding:12px 22px;

border:none;

border-radius:999px;

background:#2d2d2d;

color:white;

cursor:pointer;

}

.tab.active{

background:var(--accent);

}

.tabContent{

display:none;

}

.tabContent.active{

display:block;

}

.infoTable{

width:100%;

border-collapse:collapse;

margin-bottom:18px;

}

.infoTable td{

padding:10px;

border-bottom:1px solid #333;

vertical-align:top;

}

.infoTable td:first-child{

width:170px;

font-weight:bold;

}

#infoDescription{

margin:12px 0;

line-height:1.6;

color:#ddd;

}

#infoSource{

color:#6db7ff;

text-decoration:none;

}

pre{

margin-top:12px;

padding:14px;

border-radius:12px;

background:#111;

overflow:auto;

white-space:pre-wrap;

word-break:break-word;

}

#qemuDecoded{

margin-top:18px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:12px;

}

.qemuItem{

background:#252525;

padding:12px;

border-radius:12px;

}

.qemuTitle{

font-weight:bold;

margin-bottom:6px;

}

.qemuValue{

color:#cccccc;

}

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#444;

border-radius:20px;

}