:root{
  --left-bg:#e2e8f0;
  --left-btn:#1f2937;
  --left-btn-text:#ffffff;
  --back-btn:#c1121f;
  --right-bg:#fffdea;
  --file-btn-bg:#e6e6e6;
  --file-btn-text:#111111;
  --folder-btn-bg:#dbeafe;
  --folder-btn-text:#0b3d91;
  --font: Verdana, Arial, sans-serif;
}

html,body{height:100%; margin:0; font-family:var(--font); background: transparent;}
#app{display:flex; height:100vh; width:100vw; overflow:hidden;}

#leftPane{
  flex: 0 0 auto;
  width: fit-content;
  min-width: 220px;
  max-width: 460px;
  background:var(--left-bg);
  padding:10px 10px 14px;
  box-sizing:border-box;
  overflow:auto;
}

#rightPane{
  flex:1 1 auto;
  background:var(--right-bg);
  padding:12px;
  box-sizing:border-box;
  overflow:auto;
}

.stickyTop{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--left-bg);
  padding-bottom: 10px;
}

.navBtn{
  display:block;
  width: max-content;
  max-width: 100%;
  border:0;
  padding:10px 14px;
  margin:6px 0;
  border-radius:10px;
  background:var(--left-btn);
  color:var(--left-btn-text);
  font-weight:700;
  cursor:pointer;
  text-align:left;
  white-space: nowrap;
}
.navBtn:hover{filter:brightness(1.08);}

.backBtn{
  background:var(--back-btn) !important;
  color:#fff !important;
  width: 100%;
  text-align:center;
}

.breadcrumb{ font-size: 12px; margin: 8px 0 10px; opacity: .85; }

#rightTopBar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

#schemeBtn{
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font-weight:700;
  cursor:pointer;
}

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

.itemBtn{
  border:0;
  border-radius:12px;
  padding:12px;
  cursor:pointer;
  text-align:left;
  font-weight:700;
}
.fileBtn{ background:var(--file-btn-bg); color:var(--file-btn-text); }
.folderBtn{
  background:var(--folder-btn-bg);
  color:var(--folder-btn-text);
  border: 1px solid rgba(0,0,0,.08);
}
.itemBtn small{
  display:block;
  font-weight:400;
  opacity:.75;
  margin-top:6px;
}

#welcomeFrame{
  width: 100%;
  height: calc(100vh - 92px);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: transparent;
}

#bubble{
  position: fixed;
  left: 170px;
  top: 78px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  max-width: 220px;
  z-index: 50;
  font-size: 13px;
}
#bubble:before{
  content:"";
  position:absolute;
  left:-10px;
  top:14px;
  border-width:10px;
  border-style:solid;
  border-color: transparent #fff transparent transparent;
  filter: drop-shadow(-1px 0 0 rgba(0,0,0,.18));
}

@media (max-width: 900px){
  #leftPane{min-width: 210px; max-width: 380px;}
  #bubble{display:none;}
  #welcomeFrame{height: 60vh;}
}