:root{
  --sidebar-w: 300px;
  --gap: 12px;
  --accent: #3758F9;
}
*{box-sizing:border-box;font-family:Inter,system-ui,Arial,Helvetica,sans-serif}
body,html,#app{height:100%;margin:0}
#app{display:flex;gap:var(--gap);height:100vh}
aside#sidebar{width:var(--sidebar-w);border-right:1px solid #e6e6e6;padding:12px;overflow:auto}
#sidebar header{display:flex;flex-direction:column;gap:8px}
#sidebar h1{margin:0;font-size:18px}
.controls{display:flex;gap:6px;align-items:center}
.controls input{flex:1;padding:4px;border:1px solid #ddd;border-radius:4px}
#menu{margin-top:8px}
.folder{margin-top:8px}
.folder h3{margin:0;font-size:13px;color:#333}
.files{list-style:none;padding-left:10px;margin:6px 0}
.files li{margin:6px 0}
.file-link{cursor:pointer;color:#2b6cb0;text-decoration:underline}

main#preview{flex:1;display:flex;flex-direction:column;height:100%}
#toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid #eee}
.device-buttons button{padding:6px 10px;margin-right:6px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.device-buttons button.active{background:var(--accent);color:#fff;border-color:var(--accent)}
#frameWrap{flex:1;display:flex;align-items:center;justify-content:center;background:#f7f8fb}
iframe#frame{border:1px solid #ddd;border-radius:8px;width:100%;height:100%;max-width:none;max-height:100%;box-shadow:0 4px 20px rgba(0,0,0,0.06)}

/* sizes applied to #frame via classes */
/* .size-desktop iframe{width:1200px!important;height:800px!important} */
.size-tablet iframe{width:820px!important;height:1080px!important; max-height: calc(100vh - 80px) !important;}
.size-mobile iframe{width:375px!important;height:812px!important; max-height: calc(100vh - 80px) !important;}

@media (max-width:900px){
  :root{--sidebar-w:220px}
  .size-desktop iframe{width:900px}
}