:root{
  --bg:#1e1e1e;
  --rail:#121212;
  --panel:rgba(255,255,255,0.06);
  --panel2:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.10);
  --border2:rgba(255,255,255,0.14);
  --text:rgba(255,255,255,0.70);
  --muted:rgba(255,255,255,0.38);
  --muted2:rgba(255,255,255,0.14);
}

*{box-sizing:border-box; margin:0; padding:0; font-family:system-ui, -apple-system, Segoe UI, Inter, sans-serif;}
body{background:var(--bg); color:var(--text); height:100vh; overflow:hidden;}

.menubar{
  height:36px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  background:rgba(0,0,0,0.15);
}

.mitem{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  cursor:pointer;
}
.mitem:hover{background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.55);}
.mitem.subtle{opacity:.8}
.spacer{flex:1}

.stage{height:calc(100vh - 36px);}

.home{
  display:grid;
  grid-template-columns:260px 1fr;
  height:100%;
}
.rail{
  background:var(--rail);
  border-right:1px solid rgba(255,255,255,0.08);
}
.homeCenter{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  gap:34px;
}
.homeTitle{
  font-size:84px;
  font-weight:300;
  letter-spacing:1px;
  color:var(--muted2);
  user-select:none;
}

.cards{
  display:flex;
  gap:110px;
  align-items:center;
  justify-content:center;
}

.card{
  width:250px;
  height:175px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  transition:all .18s ease;
}
.card:hover{
  background:var(--panel2);
  border-color:var(--border2);
}
.card:active{transform:translateY(1px);}

.cardText{
  font-size:13px;
  color:rgba(255,255,255,0.36);
  letter-spacing:.2px;
}

.icon{
  width:64px; height:64px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  opacity:.92;
}
.icon.file{
  background:linear-gradient(180deg, #ffffff, #d9d9d9);
  clip-path:polygon(0% 0%, 72% 0%, 100% 28%, 100% 100%, 0% 100%);
  border-radius:10px;
  position:relative;
}
.icon.file::after{
  content:"";
  position:absolute;
  right:0; top:0;
  width:24px; height:24px;
  background:linear-gradient(180deg, #cfcfcf, #bdbdbd);
  clip-path:polygon(0 0,100% 0,100% 100%);
  border-top-right-radius:10px;
}
.icon.folder{
  background:linear-gradient(180deg, #ffd36a, #f3b63d);
  border-radius:10px;
  position:relative;
}
.icon.folder::before{
  content:"";
  position:absolute;
  top:-10px; left:10px;
  width:32px; height:18px;
  background:linear-gradient(180deg, #ffd36a, #f3b63d);
  border-radius:8px 8px 0 0;
}

.hint{
  margin-top:20px;
  font-size:12px;
  color:rgba(255,255,255,0.26);
}

.editor{height:100%; padding:14px;}
.editorWrap{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
textarea{
  flex:1;
  width:100%;
  resize:none;
  padding:14px;
  border-radius:14px;
  background:#171717;
  border:1px solid rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.72);
  outline:none;
  line-height:1.6;
  font-size:14px;
}
.statusbar{
  height:30px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 10px;
  background:rgba(0,0,0,0.15);
  border-top:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  font-size:12px;
  color:rgba(255,255,255,0.40);
}
.statusLeft{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.statusRight{min-width:90px; text-align:right;}

.hidden{display:none;}

.dropdown{
  position:fixed;
  top:36px;
  left:10px;
  background:#242424;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:10px;
  padding:6px;
  display:none;
  z-index:9999;
  min-width:190px;
}
.ditem{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(255,255,255,0.60);
  cursor:pointer;
}
.ditem:hover{background:rgba(255,255,255,0.08);}
.dsep{height:1px; background:rgba(255,255,255,0.08); margin:6px 4px;}

.aboutCard{
  padding:12px 12px 10px;
}
.aboutTitle{
  font-size:16px;
  color:rgba(255,255,255,0.80);
  margin-bottom:6px;
}
.aboutText{
  font-size:13px;
  color:rgba(255,255,255,0.55);
  line-height:1.5;
  margin-bottom:10px;
}
.aboutLink{
  color:rgba(255,255,255,0.75);
  text-decoration:none;
  font-size:13px;
}
.aboutLink:hover{text-decoration:underline;}
.tabbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 6px 0;
}

.tabPlus{
  width:36px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  cursor:pointer;
}
.tabPlus:hover{ background: rgba(255,255,255,0.08); }

.tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  padding-bottom:8px;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar{ height:8px; }
.tabs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.10); border-radius:20px; }

.tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.50);
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
.tab:hover{ background: rgba(255,255,255,0.07); }

.tab.active{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
}

.tabName{
  max-width: 180px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tabClose{
  width:24px;
  height:24px;
  border-radius:8px;
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor:pointer;
}
.tabClose:hover{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.70); }