*{box-sizing:border-box;font-family:Segoe UI,Arial}
body{margin:0;background:#f3f4f6;color:#111}

/* TOPBAR */
.topbar{
  height:48px;background:#000;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
}

/* LAYOUT */
.layout{display:flex;height:calc(100vh - 48px)}

/* SIDEBAR */
.sidebar{
  width:250px;background:#fff;border-right:1px solid #ddd;padding:10px
}
.new-btn{
  width:100%;padding:8px;background:#2563eb;color:#fff;
  border:none;border-radius:4px
}
#search{width:100%;padding:6px;margin:10px 0}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:8px;border-radius:4px;cursor:pointer}
.sidebar li.active,.sidebar li:hover{background:#e5e7eb}

/* EDITOR */
.editor{
  flex:1;background:#fff;padding:0;
  display:flex;flex-direction:column
}

/* ===== EDITOR TOP (MENU + TABS) ===== */
.editor-top{
  position:relative;
  z-index:10;
  border-bottom:1px solid #ddd;
}

/* MENU BAR */
.editor-menu{
  display:flex;
  gap:14px;
  padding:8px 12px;
  background:#fff;
  white-space:nowrap;
  position:relative;
  z-index:100;
}

.editor-menu .menu-item{
  position:relative;
}

.editor-menu .menu-item span{
  cursor:pointer;
  font-size:14px;
}

/* DROPDOWN */
.editor-menu .dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid #ddd;
  min-width:160px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  z-index:9999;
}

.editor-menu .dropdown div{
  padding:8px;
  cursor:pointer;
}
.editor-menu .dropdown div:hover{
  background:#e5e7eb;
}

.editor-menu .menu-item:hover .dropdown{
  display:block;
}

/* TABS */
.tabs{
  display:flex;
  gap:6px;
  padding:6px 12px;
  background:#f1f3f4;
  border-top:1px solid #eee;
  position:relative;
  z-index:1;
}

.tab{
  padding:6px 12px;
  background:#e0e0e0;
  border-radius:6px 6px 0 0;
  cursor:pointer;
  font-size:14px;
}
.tab.active{
  background:#fff;
  border-bottom:2px solid #4285f4;
  font-weight:600;
}
.tab.add{
  background:#d1e7ff;
  font-weight:bold;
}

/* TITLE ROW */
.title-row{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #ddd;
  padding:6px 12px;
}
.title-row input{
  flex:1;
  font-size:18px;
  padding:6px;
  border:none;
}
.title-actions button{
  border:none;background:transparent;
  cursor:pointer;font-size:18px;opacity:.6
}
.title-actions button.active{opacity:1}

/* CONTENT */
#content{
  flex:1;border:none;padding:12px;
  font-size:15px;resize:none
}

/* STATUS */
.statusbar{
  display:flex;justify-content:space-between;
  font-size:12px;color:#555;
  border-top:1px solid #eee;padding:6px 12px
}

/* ADS */
.ads{
  width:300px;background:#f9fafb;
  border-left:1px solid #ddd;padding:10px
}
.adbox{
  height:250px;background:#e5e7eb;
  display:flex;align-items:center;
  justify-content:center;color:#555
}

/* MODALS */
.modal{
  position:fixed;inset:0;
  background:rgba(0,0,0,.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000
}
.modal-box{
  background:#fff;padding:16px;
  width:300px;border-radius:6px
}
.modal-box input,.modal-box select{
  width:100%;padding:6px;margin-bottom:10px
}
.emoji-grid{font-size:22px;cursor:pointer}

/* STORAGE WARNING */
.storage-warning{
  display:none;
  background:#fff3cd;color:#856404;
  padding:10px;text-align:center;
  font-size:14px;
  border-bottom:1px solid #ffeeba;
}

/* MOBILE */
@media(max-width:900px){
  .ads{display:none}
}