*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial,sans-serif}
button{cursor:pointer}
input,textarea{font-family:inherit}

.topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid #ddd
}
.brand{font-weight:700;white-space:nowrap}
.statusbar{display:flex;gap:8px;align-items:center;flex:1}
.pill{display:inline-block;padding:6px 10px;border:1px solid #ddd;border-radius:999px;font-size:13px;background:#fafafa}
.pill.ok{border-color:#2e7d32}
.pill.bad{border-color:#c62828}
.muted{color:#666}
.small{font-size:12px}
.actions button{margin-left:8px}

.subbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-bottom:1px solid #eee;background:#fafafa
}
.fav{display:flex;gap:8px;flex-wrap:wrap}
.favBtn{padding:8px 10px;border:1px solid #ddd;border-radius:10px;background:#fff}

.layout{display:flex;height:calc(100vh - 52px - 42px)}
.sidebar{width:360px;border-right:1px solid #ddd;display:flex;flex-direction:column}
.sidehead{display:flex;gap:8px;padding:10px;border-bottom:1px solid #eee}
.sidehead input{flex:1;padding:8px}
.sidehead button{padding:8px 10px}
.tree{padding:10px;overflow:auto}

.item{padding:6px 8px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.item:hover{background:#f4f4f4}
.badge{font-size:12px;color:#666}

.main{flex:1;display:flex;flex-direction:column;padding:10px}
.filehead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.filemeta{padding:6px 0}

.editorWrap{
  margin-top:10px;
  flex:1;
  display:flex;
  border:1px solid #ddd;
  border-radius:10px;
  overflow:hidden;
}
.gutter{
  margin:0;
  padding:10px 8px;
  background:#fafafa;
  border-right:1px solid #eee;
  color:#666;
  text-align:right;
  min-width:48px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.35;
  user-select:none;
}
#editor{
  flex:1;
  border:0;
  outline:0;
  padding:10px;
  resize:none;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:13px;
  line-height:1.35;
}

.msg{margin-top:10px;padding:10px;border:1px solid #ddd;border-radius:10px}
.msg.ok{border-color:#2e7d32}
.msg.bad{border-color:#c62828}

.box{border:1px solid #ddd;border-radius:12px;padding:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.snapList{margin-top:10px;max-height:180px;overflow:auto;border-top:1px solid #eee;padding-top:8px}
.snapItem{padding:8px 0;border-bottom:1px dashed #eee}
.snapItem:last-child{border-bottom:none}
.snapHead{display:flex;gap:10px;align-items:baseline}
.snapProject{font-weight:700}
.snapTs{color:#666;font-size:12px}

/* Login overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px}
.panel{width:min(520px,95vw);background:#fff;border-radius:14px;border:1px solid #ddd;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.panel h2{margin:0 0 6px 0}
.panel label{display:block;font-size:12px;color:#666;margin-top:8px}
.panel input{width:100%;padding:10px;margin-top:6px;border:1px solid #ddd;border-radius:10px}
.actionsRow{justify-content:flex-end;margin-top:10px}