added unecessarily good file system

CSS/README.css

@@ -574,4 +574,78 @@ body.flicker {
 
 #virusMsg {
 	text-align: center;
+}
+
+/* vi editor overlay styles */
+.vi-editor-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: rgba(20, 20, 30, 0.97);
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.vi-editor-box {
+	background: #181825;
+	border-radius: 10px;
+	box-shadow: 0 4px 32px #000a;
+	padding: 2rem;
+	width: min(90vw, 600px);
+	max-width: 100vw;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
+
+.vi-editor-title {
+	color: #7c3aed;
+	font-family: monospace;
+	font-size: 1.2rem;
+	margin-bottom: 1rem;
+	text-align: center;
+}
+
+.vi-editor-textarea {
+	width: 100%;
+	height: 250px;
+	resize: vertical;
+	background: #232136;
+	color: #fff;
+	border: none;
+	border-radius: 6px;
+	padding: 1rem;
+	font-family: monospace;
+	font-size: 1rem;
+	outline: none;
+	margin-bottom: 1rem;
+}
+
+.vi-editor-btnrow {
+	display: flex;
+	gap: 1rem;
+	justify-content: flex-end;
+}
+
+.vi-editor-savebtn {
+	background: #7c3aed;
+	color: #fff;
+	border: none;
+	padding: 0.5rem 1.2rem;
+	border-radius: 5px;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+.vi-editor-cancelbtn {
+	background: #232136;
+	color: #fff;
+	border: none;
+	padding: 0.5rem 1.2rem;
+	border-radius: 5px;
+	cursor: pointer;
 }