body { margin:0; font-family:Arial; overflow:hidden; }
#project-bar { position:relative; z-index:1001; background:#111; color:#fff; padding:8px 10px; display:flex; align-items:center; gap:12px; }
#projectTitleWrap { display:flex; align-items:center; gap:8px; }
#projectNameText { font-weight:600; }
#projectSettingsBtn { background:transparent; border:1px solid #777; color:#fff; border-radius:6px; cursor:pointer; padding:2px 6px; }
#saveStatus { font-size:13px; opacity:0.9; }
#toolbar { position:relative; z-index:1000; background:#222; color:#fff; padding:10px; }
#toolbar button,label { margin-right:10px; }
#plan-container { width:100%; height:calc(100vh - 92px); background:#eee; overflow:hidden; cursor:default; position:relative; }
#plan-wrapper { position:absolute; transform-origin:top left; }
#plan { display:block; max-width:none; user-select:none; -webkit-user-drag:none; }
.hotspot {
  position:absolute; width:10px; height:10px; border-radius:50%;
  border:2px solid #fff; cursor:pointer; transform:translate(-50%,-50%);
  transition:0.2s;
}
.hotspot-color { width:10px; height:10px; border-radius:50%; border:2px solid #fff; }
.hotspot-color:hover { width:18px; height:18px; }
.hotspot-emoji {
  width:28px;
  height:28px;
  border:none;
  border-radius:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.hotspot-emoji:hover { transform:translate(-50%,-50%) scale(1.18); }
#emojiSelectorRow { display:flex; align-items:center; gap:10px; margin:8px 0; }
#emojiPickerBtn { padding:6px 10px; cursor:pointer; }
#emojiPreview { font-size:24px; line-height:1; }
#emojiPicker { width:min(100%, 360px); max-height:320px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.8); display:none; justify-content:center; align-items:center; }
.modal-content { background:#fff; padding:20px; max-width:600px; width:90%; border-radius:10px; }
#viewGallery img { width:72px; height:72px; object-fit:cover; margin:5px; cursor:zoom-in; border-radius:6px; }
#projectListColumns { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:12px; }
.project-column { border:1px solid #ddd; border-radius:8px; padding:10px; min-height:160px; }
.project-column h4 { margin:0 0 8px; }
#myProjectList button,#communityProjectList button { margin:5px 0; text-align:left; padding:8px; }
#myProjectList .project-row,#communityProjectList .project-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
#myProjectList .project-load-btn,#communityProjectList .project-load-btn { flex:1; }
#myProjectList .project-action-btn,#communityProjectList .project-action-btn { min-width:36px; text-align:center; padding:6px 8px; }
#projectActions { display:flex; gap:10px; margin:14px 0; }
#projectActions button { padding:8px 10px; }
#renameError { color:#c00; min-height:18px; }
#newProjectError { color:#c00; min-height:18px; }
#settingsAccessError { color:#c00; min-height:18px; margin:8px 0 0; }
#usersCreateBox { display:grid; grid-template-columns: 1.2fr 1fr auto auto; gap:8px; margin-bottom:10px; }
#usersError { color:#c00; min-height:18px; margin:4px 0 10px; }
#usersList { max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.user-row { display:grid; grid-template-columns: 1fr auto 1fr auto auto; gap:8px; align-items:center; }
.user-name { font-weight:600; }
.user-row input,.user-row select,#usersCreateBox input,#usersCreateBox select { padding:6px 8px; }
#imageModal { z-index:2000; }
#fullImage { max-width:92vw; max-height:92vh; object-fit:contain; }