journal settings and codemirror themes

16 files changed, 2066 insertions, 2 deletions

diff --git a/static/css/codemirror/miku.css b/static/css/codemirror/miku.css
new file mode 100644
index 00000000..95c5d647
--- /dev/null
+++ b/static/css/codemirror/miku.css
@@ -0,0 +1,569 @@
+.CodeMirror {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    height: 300px;
+    color: #e8e8e8;
+    direction: ltr;
+    background: #0a0a0a;
+    border: 2px solid #333;
+    border-radius: 6px;
+    font-size: 13px
+}
+
+.CodeMirror-lines {
+    padding: 4px 0
+}
+
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+    padding: 0 4px
+}
+
+.CodeMirror-gutter-filler,
+.CodeMirror-scrollbar-filler {
+    background-color: #1a1a1a
+}
+
+.CodeMirror-gutters {
+    border-right: 1px solid #333;
+    background-color: #1a1a1a;
+    white-space: nowrap
+}
+
+.CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #666;
+    white-space: nowrap
+}
+
+.CodeMirror-guttermarker {
+    color: #e8e8e8
+}
+
+.CodeMirror-guttermarker-subtle {
+    color: #666
+}
+
+.CodeMirror-cursor {
+    border-left: 1px solid #e8e8e8;
+    border-right: none;
+    width: 0
+}
+
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid #999
+}
+
+.cm-fat-cursor .CodeMirror-cursor {
+    width: auto;
+    border: 0 !important;
+    background: #7e7
+}
+
+.cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1
+}
+
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line>span::selection,
+.cm-fat-cursor .CodeMirror-line>span>span::selection {
+    background: 0 0
+}
+
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line>span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line>span>span::-moz-selection {
+    background: 0 0
+}
+
+.cm-fat-cursor {
+    caret-color: transparent
+}
+
+@-moz-keyframes blink {
+    50% {
+        background-color: transparent
+    }
+}
+
+@-webkit-keyframes blink {
+    50% {
+        background-color: transparent
+    }
+}
+
+@keyframes blink {
+    50% {
+        background-color: transparent
+    }
+}
+
+.cm-tab {
+    display: inline-block;
+    text-decoration: inherit
+}
+
+.CodeMirror-rulers {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -50px;
+    bottom: 0;
+    overflow: hidden
+}
+
+.CodeMirror-ruler {
+    border-left: 1px solid #555;
+    top: 0;
+    bottom: 0;
+    position: absolute
+}
+
+.cm-s-default .cm-header {
+    color: #708
+}
+
+.cm-s-default .cm-quote {
+    color: #a50
+}
+
+.cm-negative {
+    color: #d44
+}
+
+.cm-positive {
+    color: #292
+}
+
+.cm-header,
+.cm-strong {
+    font-weight: 700
+}
+
+.cm-em {
+    font-style: italic
+}
+
+.cm-link {
+    text-decoration: underline
+}
+
+.cm-strikethrough {
+    text-decoration: line-through
+}
+
+.cm-s-default .cm-keyword {
+    color: #708
+}
+
+.cm-s-default .cm-atom {
+    color: #219
+}
+
+.cm-s-default .cm-number {
+    color: #164
+}
+
+.cm-s-default .cm-def {
+    color: #00f
+}
+
+.cm-s-default .cm-variable-2 {
+    color: #05a
+}
+
+.cm-s-default .cm-type,
+.cm-s-default .cm-variable-3 {
+    color: #085
+}
+
+.cm-s-default .cm-comment {
+    color: #a50
+}
+
+.cm-s-default .cm-string {
+    color: #a11
+}
+
+.cm-s-default .cm-string-2 {
+    color: #f50
+}
+
+.cm-s-default .cm-meta {
+    color: #555
+}
+
+.cm-s-default .cm-qualifier {
+    color: #555
+}
+
+.cm-s-default .cm-builtin {
+    color: #30a
+}
+
+.cm-s-default .cm-bracket {
+    color: #997
+}
+
+.cm-s-default .cm-tag {
+    color: #170
+}
+
+.cm-s-default .cm-attribute {
+    color: #00c
+}
+
+.cm-s-default .cm-hr {
+    color: #999
+}
+
+.cm-s-default .cm-link {
+    color: #00c
+}
+
+.cm-s-default .cm-error {
+    color: red
+}
+
+.cm-invalidchar {
+    color: red
+}
+
+.CodeMirror-composing {
+    border-bottom: 2px solid
+}
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #0b0
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #a22
+}
+
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, .3)
+}
+
+.CodeMirror-activeline-background {
+    background: rgba(255, 255, 255, 0.05)
+}
+
+.CodeMirror {
+    position: relative;
+    overflow: hidden
+}
+
+.CodeMirror-scroll {
+    overflow: scroll !important;
+    margin-bottom: -50px;
+    margin-right: -50px;
+    padding-bottom: 50px;
+    height: 100%;
+    outline: 0;
+    position: relative;
+    z-index: 0
+}
+
+.CodeMirror-sizer {
+    position: relative;
+    border-right: 50px solid transparent
+}
+
+.CodeMirror-gutter-filler,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-vscrollbar {
+    position: absolute;
+    z-index: 6;
+    display: none;
+    outline: 0
+}
+
+.CodeMirror-vscrollbar {
+    right: 0;
+    top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll
+}
+
+.CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll
+}
+
+.CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0
+}
+
+.CodeMirror-gutter-filler {
+    left: 0;
+    bottom: 0
+}
+
+.CodeMirror-gutters {
+    position: absolute;
+    left: 0;
+    top: 0;
+    min-height: 100%;
+    z-index: 3
+}
+
+.CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    display: inline-block;
+    vertical-align: top;
+    margin-bottom: -50px
+}
+
+.CodeMirror-gutter-wrapper {
+    position: absolute;
+    z-index: 4;
+    background: 0 0 !important;
+    border: none !important
+}
+
+.CodeMirror-gutter-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 4
+}
+
+.CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4
+}
+
+.CodeMirror-gutter-wrapper ::selection {
+    background-color: transparent
+}
+
+.CodeMirror-gutter-wrapper ::-moz-selection {
+    background-color: transparent
+}
+
+.CodeMirror-lines {
+    cursor: text;
+    min-height: 1px
+}
+
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    border-width: 0;
+    background: 0 0;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual
+}
+
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal
+}
+
+.CodeMirror-linebackground {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 0
+}
+
+.CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    padding: .1px
+}
+
+.CodeMirror-rtl pre {
+    direction: rtl
+}
+
+.CodeMirror-code {
+    outline: 0
+}
+
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber,
+.CodeMirror-scroll,
+.CodeMirror-sizer {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box
+}
+
+.CodeMirror-measure {
+    position: absolute;
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden
+}
+
+.CodeMirror-cursor {
+    position: absolute;
+    pointer-events: none
+}
+
+.CodeMirror-measure pre {
+    position: static
+}
+
+div.CodeMirror-cursors {
+    visibility: hidden;
+    position: relative;
+    z-index: 3
+}
+
+div.CodeMirror-dragcursors {
+    visibility: visible
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible
+}
+
+.CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.1)
+}
+
+.CodeMirror-focused .CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.15)
+}
+
+.CodeMirror-crosshair {
+    cursor: crosshair
+}
+
+.CodeMirror-line::selection,
+.CodeMirror-line>span::selection,
+.CodeMirror-line>span>span::selection {
+    background: rgba(255, 255, 255, 0.15)
+}
+
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line>span::-moz-selection,
+.CodeMirror-line>span>span::-moz-selection {
+    background: rgba(255, 255, 255, 0.15)
+}
+
+.cm-searching {
+    background-color: #ffa;
+    background-color: rgba(255, 255, 0, .4)
+}
+
+.cm-force-border {
+    padding-right: .1px
+}
+
+@media print {
+    .CodeMirror div.CodeMirror-cursors {
+        visibility: hidden
+    }
+}
+
+.cm-tab-wrap-hack:after {
+    content: ''
+}
+
+span.CodeMirror-selectedtext {
+    background: 0 0
+}
+
+.CodeMirror-hints {
+    position: absolute;
+    z-index: 10;
+    overflow: hidden;
+    list-style: none;
+    margin: 0;
+    padding: 2px;
+    background: #1a1a1a;
+    border: 1px solid #333;
+    border-radius: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 13px;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar,
+.CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #4ecdc4;
+    border-radius: 3px;
+}
+
+.CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #45a5a5;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #4ecdc4;
+    border-radius: 3px;
+}
+
+.CodeMirror-hint {
+    margin: 0;
+    padding: 8px 12px;
+    border-radius: 0;
+    white-space: pre;
+    color: #e8e8e8;
+    cursor: pointer;
+    border-bottom: 1px solid #333;
+    transition: background 0.15s ease;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+}
+
+.CodeMirror-hint:last-child {
+    border-bottom: none;
+}
+
+li.CodeMirror-hint-active {
+    background: #2a2a2a;
+    color: #e8e8e8;
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/ghost.css b/static/css/codemirror/themes/ghost.css
new file mode 100644
index 00000000..fa119c59
--- /dev/null
+++ b/static/css/codemirror/themes/ghost.css
@@ -0,0 +1,191 @@
+.cm-s-ghost .CodeMirror-gutters,
+.cm-s-ghost.CodeMirror {
+    background: #000000 !important;
+    color: #00FFFF !important;
+    border: 1px solid #00FFFF;
+    border-radius: 0;
+}
+
+.cm-s-ghost .CodeMirror-gutters {
+    background: #000000;
+    color: #004444;
+    border-right: 1px solid #00FFFF;
+}
+
+.cm-s-ghost .CodeMirror-cursor {
+    border-left: solid thin #00FFFF;
+}
+
+.cm-s-ghost .CodeMirror-linenumber {
+    color: #004444;
+}
+
+.cm-s-ghost .CodeMirror-selected {
+    background: rgba(0, 255, 255, 0.2);
+}
+
+.cm-s-ghost .CodeMirror-line::selection,
+.cm-s-ghost .CodeMirror-line>span::selection,
+.cm-s-ghost .CodeMirror-line>span>span::selection {
+    background: rgba(0, 255, 255, 0.2);
+}
+
+.cm-s-ghost .CodeMirror-line::-moz-selection,
+.cm-s-ghost .CodeMirror-line>span::-moz-selection,
+.cm-s-ghost .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(0, 255, 255, 0.2);
+}
+
+.cm-s-ghost .CodeMirror-activeline-background {
+    background: rgba(0, 255, 255, 0.05);
+}
+
+.cm-s-ghost .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #00FFFF !important;
+}
+
+.cm-s-ghost span.cm-comment {
+    color: #006666;
+    font-style: italic;
+}
+
+.cm-s-ghost span.cm-keyword {
+    color: #00FFFF;
+    font-weight: bold;
+}
+
+.cm-s-ghost span.cm-string {
+    color: #00AAAA;
+}
+
+.cm-s-ghost span.cm-string-2 {
+    color: #00AAAA;
+}
+
+.cm-s-ghost span.cm-number {
+    color: #00CCCC;
+}
+
+.cm-s-ghost span.cm-variable {
+    color: #00DDDD;
+}
+
+.cm-s-ghost span.cm-variable-2 {
+    color: #00BBBB;
+}
+
+.cm-s-ghost span.cm-variable-3 {
+    color: #00AAAA;
+}
+
+.cm-s-ghost span.cm-def {
+    color: #00FFFF;
+    font-weight: bold;
+}
+
+.cm-s-ghost span.cm-operator {
+    color: #00FFFF;
+}
+
+.cm-s-ghost span.cm-atom {
+    color: #00CCCC;
+}
+
+.cm-s-ghost span.cm-meta {
+    color: #006666;
+}
+
+.cm-s-ghost span.cm-tag {
+    color: #00FFFF;
+}
+
+.cm-s-ghost span.cm-attribute {
+    color: #00DDDD;
+}
+
+.cm-s-ghost span.cm-qualifier {
+    color: #00FFFF;
+}
+
+.cm-s-ghost span.cm-property {
+    color: #00DDDD;
+}
+
+.cm-s-ghost span.cm-builtin {
+    color: #00FFFF;
+    font-weight: bold;
+}
+
+.cm-s-ghost span.cm-type {
+    color: #00FFFF;
+}
+
+.cm-s-ghost span.cm-bracket {
+    color: #00FFFF;
+}
+
+.cm-s-ghost span.cm-hr {
+    color: #006666;
+}
+
+.cm-s-ghost span.cm-link {
+    color: #00AAAA;
+}
+
+.cm-s-ghost span.cm-error {
+    color: #FF0000;
+    background: rgba(255, 0, 0, 0.1);
+}
+
+.CodeMirror-hints {
+    background: #000000 !important;
+    border: 1px solid #00FFFF !important;
+    border-radius: 0 !important;
+    box-shadow: 0 3px 8px rgba(0, 255, 255, 0.4) !important;
+}
+
+.CodeMirror-hint {
+    color: #00FFFF !important;
+    border-bottom: 1px solid #004444 !important;
+}
+
+li.CodeMirror-hint-active {
+    background: #001111 !important;
+    color: #00FFFF !important;
+}
+
+.cm-s-ghost .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-ghost .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-ghost .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-ghost .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #000000;
+}
+
+.cm-s-ghost .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-ghost .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #4ECDC4;
+    border-radius: 3px;
+}
+
+.cm-s-ghost .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-ghost .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #45b3a7;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #000000;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #4ECDC4;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/lain.css b/static/css/codemirror/themes/lain.css
new file mode 100644
index 00000000..af8553c7
--- /dev/null
+++ b/static/css/codemirror/themes/lain.css
@@ -0,0 +1,190 @@
+.cm-s-lain .CodeMirror-gutters,
+.cm-s-lain.CodeMirror {
+    background: #000000 !important;
+    color: #AD717B !important;
+    border: 1px solid #C4748D;
+    border-radius: 0;
+}
+
+.cm-s-lain .CodeMirror-gutters {
+    background: #000000;
+    color: #85474B;
+    border-right: 1px solid #C4748D;
+}
+
+.cm-s-lain .CodeMirror-cursor {
+    border-left: solid thin #D4758C;
+}
+
+.cm-s-lain .CodeMirror-linenumber {
+    color: #85474B;
+}
+
+.cm-s-lain .CodeMirror-selected {
+    background: rgba(196, 116, 141, 0.2);
+}
+
+.cm-s-lain .CodeMirror-line::selection,
+.cm-s-lain .CodeMirror-line>span::selection,
+.cm-s-lain .CodeMirror-line>span>span::selection {
+    background: rgba(196, 116, 141, 0.2);
+}
+
+.cm-s-lain .CodeMirror-line::-moz-selection,
+.cm-s-lain .CodeMirror-line>span::-moz-selection,
+.cm-s-lain .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(196, 116, 141, 0.2);
+}
+
+.cm-s-lain .CodeMirror-activeline-background {
+    background: rgba(196, 116, 141, 0.05);
+}
+
+.cm-s-lain .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #D4758C !important;
+}
+
+.cm-s-lain span.cm-comment {
+    color: #85474B;
+    font-style: italic;
+}
+
+.cm-s-lain span.cm-keyword {
+    color: #D4758C;
+    font-weight: bold;
+}
+
+.cm-s-lain span.cm-string {
+    color: #C4748D;
+}
+
+.cm-s-lain span.cm-string-2 {
+    color: #C4748D;
+}
+
+.cm-s-lain span.cm-number {
+    color: #C3B193;
+}
+
+.cm-s-lain span.cm-variable {
+    color: #AD717B;
+}
+
+.cm-s-lain span.cm-variable-2 {
+    color: #C3B193;
+}
+
+.cm-s-lain span.cm-variable-3 {
+    color: #85474B;
+}
+
+.cm-s-lain span.cm-def {
+    color: #AD717B;
+}
+
+.cm-s-lain span.cm-operator {
+    color: #C4748D;
+}
+
+.cm-s-lain span.cm-atom {
+    color: #C3B193;
+}
+
+.cm-s-lain span.cm-meta {
+    color: #85474B;
+}
+
+.cm-s-lain span.cm-tag {
+    color: #D4758C;
+}
+
+.cm-s-lain span.cm-attribute {
+    color: #C3B193;
+}
+
+.cm-s-lain span.cm-qualifier {
+    color: #D4758C;
+}
+
+.cm-s-lain span.cm-property {
+    color: #C3B193;
+}
+
+.cm-s-lain span.cm-builtin {
+    color: #D4758C;
+}
+
+.cm-s-lain span.cm-type {
+    color: #D4758C;
+}
+
+.cm-s-lain span.cm-bracket {
+    color: #C4748D;
+}
+
+.cm-s-lain span.cm-hr {
+    color: #85474B;
+}
+
+.cm-s-lain span.cm-link {
+    color: #C4748D;
+}
+
+.cm-s-lain span.cm-error {
+    color: #FF6B6B;
+    background: rgba(255, 107, 107, 0.1);
+}
+
+/* Hint styling for autocomplete */
+.CodeMirror-hints {
+    background: #0d0d0d !important;
+    border: 1px solid #4ECDC4 !important;
+    box-shadow: 0 0 5px rgba(78, 205, 196, 0.2) !important;
+}
+
+.CodeMirror-hint {
+    color: #FFE66D !important;
+    background: transparent !important;
+    border-bottom: 1px solid rgba(78, 205, 196, 0.15) !important;
+}
+
+li.CodeMirror-hint-active {
+    background: rgba(78, 205, 196, 0.15) !important;
+    color: #ffffff !important;
+}
+
+.cm-s-lain .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-lain .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-lain .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-lain .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #0d0d0d;
+}
+
+.cm-s-lain .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-lain .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #4ECDC4;
+    border-radius: 3px;
+}
+
+.cm-s-lain .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-lain .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #45b3a7;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #0d0d0d;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #4ECDC4;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/midnight.css b/static/css/codemirror/themes/midnight.css
new file mode 100644
index 00000000..c0039edd
--- /dev/null
+++ b/static/css/codemirror/themes/midnight.css
@@ -0,0 +1,190 @@
+.cm-s-midnight .CodeMirror-gutters,
+.cm-s-midnight.CodeMirror {
+    background: #000 !important;
+    color: #fff !important;
+    border: 1px solid #8d8dff;
+    border-radius: 0;
+}
+
+.cm-s-midnight .CodeMirror-gutters {
+    background: rgba(15, 10, 25, 0.9);
+    color: #AD8CFF;
+    border-right: 1px solid rgba(173, 140, 255, 0.4);
+}
+
+.cm-s-midnight .CodeMirror-cursor {
+    border-left: solid thin #df23c4;
+}
+
+.cm-s-midnight .CodeMirror-linenumber {
+    color: #AD8CFF;
+}
+
+.cm-s-midnight .CodeMirror-selected {
+    background: rgba(173, 140, 255, 0.18);
+}
+
+.cm-s-midnight .CodeMirror-line::selection,
+.cm-s-midnight .CodeMirror-line>span::selection,
+.cm-s-midnight .CodeMirror-line>span>span::selection {
+    background: rgba(173, 140, 255, 0.18);
+}
+
+.cm-s-midnight .CodeMirror-line::-moz-selection,
+.cm-s-midnight .CodeMirror-line>span::-moz-selection,
+.cm-s-midnight .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(173, 140, 255, 0.18);
+}
+
+.cm-s-midnight .CodeMirror-activeline-background {
+    background: rgba(173, 140, 255, 0.05);
+}
+
+.cm-s-midnight .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #df23c4 !important;
+}
+
+.cm-s-midnight span.cm-comment {
+    color: #9ae4f1;
+    font-style: italic;
+}
+
+.cm-s-midnight span.cm-keyword {
+    color: #df23c4;
+    font-weight: bold;
+}
+
+.cm-s-midnight span.cm-string {
+    color: #95f695;
+}
+
+.cm-s-midnight span.cm-string-2 {
+    color: #95f695;
+}
+
+.cm-s-midnight span.cm-number {
+    color: #AD8CFF;
+}
+
+.cm-s-midnight span.cm-variable {
+    color: #fff;
+}
+
+.cm-s-midnight span.cm-variable-2 {
+    color: #AD8CFF;
+}
+
+.cm-s-midnight span.cm-variable-3 {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-def {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-operator {
+    color: #df23c4;
+}
+
+.cm-s-midnight span.cm-atom {
+    color: #AD8CFF;
+}
+
+.cm-s-midnight span.cm-meta {
+    color: #9ae4f1;
+}
+
+.cm-s-midnight span.cm-tag {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-attribute {
+    color: #AD8CFF;
+}
+
+.cm-s-midnight span.cm-qualifier {
+    color: #df23c4;
+}
+
+.cm-s-midnight span.cm-property {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-builtin {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-type {
+    color: #8d8dff;
+}
+
+.cm-s-midnight span.cm-bracket {
+    color: #fff;
+}
+
+.cm-s-midnight span.cm-hr {
+    color: #9ae4f1;
+}
+
+.cm-s-midnight span.cm-link {
+    color: #95f695;
+}
+
+.cm-s-midnight span.cm-error {
+    color: #FF6B6B;
+    background: rgba(255, 107, 107, 0.1);
+}
+
+/* Hint styling for autocomplete */
+.CodeMirror-hints {
+    background: #0f0f23 !important;
+    border: 1px solid #646cff !important;
+    box-shadow: 0 0 8px rgba(100, 108, 255, 0.25) !important;
+}
+
+.CodeMirror-hint {
+    color: #c9d1d9 !important;
+    background: transparent !important;
+    border-bottom: 1px solid rgba(100, 108, 255, 0.2) !important;
+}
+
+li.CodeMirror-hint-active {
+    background: rgba(100, 108, 255, 0.2) !important;
+    color: #ffffff !important;
+}
+
+.cm-s-midnight .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-midnight .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-midnight .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-midnight .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #0f0f23;
+}
+
+.cm-s-midnight .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-midnight .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #646cff;
+    border-radius: 3px;
+}
+
+.cm-s-midnight .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-midnight .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #5a62e6;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #0f0f23;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #646cff;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/neoncity.css b/static/css/codemirror/themes/neoncity.css
new file mode 100644
index 00000000..d240a4c1
--- /dev/null
+++ b/static/css/codemirror/themes/neoncity.css
@@ -0,0 +1,196 @@
+.cm-s-neoncity .CodeMirror-gutters,
+.cm-s-neoncity.CodeMirror {
+    background: #000000 !important;
+    color: #00ff00 !important;
+    border: none;
+    border-radius: 0;
+}
+
+.cm-s-neoncity .CodeMirror-gutters {
+    background: #000000;
+    color: #666666;
+    border-right: none;
+}
+
+.cm-s-neoncity .CodeMirror-cursor {
+    border-left: solid thin #00ff00;
+}
+
+.cm-s-neoncity .CodeMirror-linenumber {
+    color: #666666;
+}
+
+.cm-s-neoncity .CodeMirror-selected {
+    background: rgba(0, 255, 0, 0.2);
+}
+
+.cm-s-neoncity .CodeMirror-line::selection,
+.cm-s-neoncity .CodeMirror-line>span::selection,
+.cm-s-neoncity .CodeMirror-line>span>span::selection {
+    background: rgba(0, 255, 0, 0.2);
+}
+
+.cm-s-neoncity .CodeMirror-line::-moz-selection,
+.cm-s-neoncity .CodeMirror-line>span::-moz-selection,
+.cm-s-neoncity .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(0, 255, 0, 0.2);
+}
+
+.cm-s-neoncity .CodeMirror-activeline-background {
+    background: rgba(0, 255, 0, 0.05);
+}
+
+.cm-s-neoncity .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #00ff00 !important;
+}
+
+.cm-s-neoncity span.cm-comment {
+    color: #888888;
+    font-style: italic;
+}
+
+.cm-s-neoncity span.cm-keyword {
+    color: #0080ff;
+    font-weight: bold;
+}
+
+.cm-s-neoncity span.cm-string {
+    color: #ffff00;
+}
+
+.cm-s-neoncity span.cm-string-2 {
+    color: #ffff00;
+}
+
+.cm-s-neoncity span.cm-number {
+    color: #ff8000;
+}
+
+.cm-s-neoncity span.cm-variable {
+    color: #00ff00;
+}
+
+.cm-s-neoncity span.cm-variable-2 {
+    color: #00ffff;
+}
+
+.cm-s-neoncity span.cm-variable-3 {
+    color: #ffff00;
+}
+
+.cm-s-neoncity span.cm-def {
+    color: #00ff00;
+    font-weight: bold;
+}
+
+.cm-s-neoncity span.cm-operator {
+    color: #00ff00;
+}
+
+.cm-s-neoncity span.cm-atom {
+    color: #ff8000;
+}
+
+.cm-s-neoncity span.cm-meta {
+    color: #888888;
+}
+
+.cm-s-neoncity span.cm-tag {
+    color: #ff0080;
+    font-weight: bold;
+}
+
+.cm-s-neoncity span.cm-attribute {
+    color: #00ffff;
+}
+
+.cm-s-neoncity span.cm-qualifier {
+    color: #ff8000;
+}
+
+.cm-s-neoncity span.cm-property {
+    color: #0080ff;
+}
+
+.cm-s-neoncity span.cm-builtin {
+    color: #00ff00;
+    font-weight: bold;
+}
+
+.cm-s-neoncity span.cm-type {
+    color: #ff0080;
+}
+
+.cm-s-neoncity span.cm-bracket {
+    color: #00ff00;
+}
+
+.cm-s-neoncity span.cm-hr {
+    color: #888888;
+}
+
+.cm-s-neoncity span.cm-link {
+    color: #ffff00;
+}
+
+.cm-s-neoncity span.cm-error {
+    color: #FF0000;
+    background: rgba(255, 0, 0, 0.1);
+}
+
+/* Hint styling for autocomplete */
+.CodeMirror-hints {
+    background: #000011 !important;
+    border: 1px solid #ff00ff !important;
+    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3) !important;
+}
+
+.CodeMirror-hint {
+    color: #00ffff !important;
+    background: transparent !important;
+    border-bottom: 1px solid rgba(255, 0, 255, 0.2) !important;
+}
+
+li.CodeMirror-hint-active {
+    background: rgba(255, 0, 255, 0.2) !important;
+    color: #ffffff !important;
+}
+
+.cm-s-neoncity .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-neoncity .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-neoncity .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-neoncity .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #000011;
+}
+
+.cm-s-neoncity .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-neoncity .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #ff00ff;
+    border-radius: 3px;
+    box-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
+}
+
+.cm-s-neoncity .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-neoncity .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #e600e6;
+    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #000011;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #ff00ff;
+    border-radius: 3px;
+    box-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/shifoo.css b/static/css/codemirror/themes/shifoo.css
new file mode 100644
index 00000000..092418ba
--- /dev/null
+++ b/static/css/codemirror/themes/shifoo.css
@@ -0,0 +1,190 @@
+.cm-s-shifoo .CodeMirror-gutters,
+.cm-s-shifoo.CodeMirror {
+    background: #0a0e14 !important;
+    color: #b3b1ad !important;
+    border: none;
+    border-radius: 0;
+}
+
+.cm-s-shifoo .CodeMirror-gutters {
+    background: #0a0e14;
+    color: #4d5566;
+    border-right: none;
+}
+
+.cm-s-shifoo .CodeMirror-cursor {
+    border-left: solid thin #ffb454;
+}
+
+.cm-s-shifoo .CodeMirror-linenumber {
+    color: #4d5566;
+}
+
+.cm-s-shifoo .CodeMirror-selected {
+    background: rgba(54, 163, 217, 0.2);
+}
+
+.cm-s-shifoo .CodeMirror-line::selection,
+.cm-s-shifoo .CodeMirror-line>span::selection,
+.cm-s-shifoo .CodeMirror-line>span>span::selection {
+    background: rgba(54, 163, 217, 0.2);
+}
+
+.cm-s-shifoo .CodeMirror-line::-moz-selection,
+.cm-s-shifoo .CodeMirror-line>span::-moz-selection,
+.cm-s-shifoo .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(54, 163, 217, 0.2);
+}
+
+.cm-s-shifoo .CodeMirror-activeline-background {
+    background: rgba(26, 31, 41, 0.3);
+}
+
+.cm-s-shifoo .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #ffb454 !important;
+}
+
+.cm-s-shifoo span.cm-comment {
+    color: #5c6773;
+    font-style: italic;
+}
+
+.cm-s-shifoo span.cm-keyword {
+    color: #d4bfff;
+    font-weight: bold;
+}
+
+.cm-s-shifoo span.cm-string {
+    color: #bae67e;
+}
+
+.cm-s-shifoo span.cm-string-2 {
+    color: #bae67e;
+}
+
+.cm-s-shifoo span.cm-number {
+    color: #f29e74;
+}
+
+.cm-s-shifoo span.cm-variable {
+    color: #b3b1ad;
+}
+
+.cm-s-shifoo span.cm-variable-2 {
+    color: #ffb454;
+}
+
+.cm-s-shifoo span.cm-variable-3 {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-def {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-operator {
+    color: #b3b1ad;
+}
+
+.cm-s-shifoo span.cm-atom {
+    color: #f29e74;
+}
+
+.cm-s-shifoo span.cm-meta {
+    color: #5c6773;
+}
+
+.cm-s-shifoo span.cm-tag {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-attribute {
+    color: #ffb454;
+}
+
+.cm-s-shifoo span.cm-qualifier {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-property {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-builtin {
+    color: #d4bfff;
+}
+
+.cm-s-shifoo span.cm-type {
+    color: #5ccfe6;
+}
+
+.cm-s-shifoo span.cm-bracket {
+    color: #b3b1ad;
+}
+
+.cm-s-shifoo span.cm-hr {
+    color: #5c6773;
+}
+
+.cm-s-shifoo span.cm-link {
+    color: #bae67e;
+}
+
+.cm-s-shifoo span.cm-error {
+    color: #f28779;
+    background: rgba(242, 135, 121, 0.1);
+}
+
+/* Hint styling for autocomplete */
+.CodeMirror-hints {
+    background: #1f2430 !important;
+    border: 1px solid #73d0ff !important;
+    box-shadow: 0 0 6px rgba(115, 208, 255, 0.2) !important;
+}
+
+.CodeMirror-hint {
+    color: #bae67e !important;
+    background: transparent !important;
+    border-bottom: 1px solid rgba(115, 208, 255, 0.15) !important;
+}
+
+li.CodeMirror-hint-active {
+    background: rgba(115, 208, 255, 0.15) !important;
+    color: #ffffff !important;
+}
+
+.cm-s-shifoo .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-shifoo .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-shifoo .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-shifoo .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #1f2430;
+}
+
+.cm-s-shifoo .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-shifoo .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #73d0ff;
+    border-radius: 3px;
+}
+
+.cm-s-shifoo .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-shifoo .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #66c4e6;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: #1f2430;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #73d0ff;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/css/codemirror/themes/vintage.css b/static/css/codemirror/themes/vintage.css
new file mode 100644
index 00000000..d5ae8189
--- /dev/null
+++ b/static/css/codemirror/themes/vintage.css
@@ -0,0 +1,194 @@
+.cm-s-vintage .CodeMirror-gutters,
+.cm-s-vintage.CodeMirror {
+    background: rgba(0, 0, 0, 0.3) !important;
+    color: #ffffff !important;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.cm-s-vintage .CodeMirror-gutters {
+    background: rgba(0, 0, 0, 0.2);
+    color: #888888;
+    border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.cm-s-vintage .CodeMirror-cursor {
+    border-left: solid thin #8d8dff;
+}
+
+.cm-s-vintage .CodeMirror-linenumber {
+    color: #888888;
+}
+
+.cm-s-vintage .CodeMirror-selected {
+    background: rgba(141, 141, 255, 0.2);
+}
+
+.cm-s-vintage .CodeMirror-line::selection,
+.cm-s-vintage .CodeMirror-line>span::selection,
+.cm-s-vintage .CodeMirror-line>span>span::selection {
+    background: rgba(141, 141, 255, 0.2);
+}
+
+.cm-s-vintage .CodeMirror-line::-moz-selection,
+.cm-s-vintage .CodeMirror-line>span::-moz-selection,
+.cm-s-vintage .CodeMirror-line>span>span::-moz-selection {
+    background: rgba(141, 141, 255, 0.2);
+}
+
+.cm-s-vintage .CodeMirror-activeline-background {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.cm-s-vintage .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: #8d8dff !important;
+}
+
+.cm-s-vintage span.cm-comment {
+    color: #888888;
+    font-style: italic;
+}
+
+.cm-s-vintage span.cm-keyword {
+    color: #8d8dff;
+    font-weight: bold;
+}
+
+.cm-s-vintage span.cm-string {
+    color: #cccccc;
+}
+
+.cm-s-vintage span.cm-string-2 {
+    color: #cccccc;
+}
+
+.cm-s-vintage span.cm-number {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-variable {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-variable-2 {
+    color: #cccccc;
+}
+
+.cm-s-vintage span.cm-variable-3 {
+    color: #aaaaaa;
+}
+
+.cm-s-vintage span.cm-def {
+    color: #8d8dff;
+}
+
+.cm-s-vintage span.cm-operator {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-atom {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-meta {
+    color: #888888;
+}
+
+.cm-s-vintage span.cm-tag {
+    color: #8d8dff;
+}
+
+.cm-s-vintage span.cm-attribute {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-qualifier {
+    color: #8d8dff;
+}
+
+.cm-s-vintage span.cm-property {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-builtin {
+    color: #8d8dff;
+}
+
+.cm-s-vintage span.cm-type {
+    color: #8d8dff;
+}
+
+.cm-s-vintage span.cm-bracket {
+    color: #ffffff;
+}
+
+.cm-s-vintage span.cm-hr {
+    color: #888888;
+}
+
+.cm-s-vintage span.cm-link {
+    color: #cccccc;
+}
+
+.cm-s-vintage span.cm-error {
+    color: #ff6666;
+    background: rgba(255, 102, 102, 0.1);
+}
+
+.cm-s-vintage .CodeMirror-hints {
+    background: rgba(0, 0, 0, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0;
+    box-shadow: 0 2px 8px rgba(141, 141, 255, 0.3);
+}
+
+.CodeMirror-hint {
+    color: #ffffff !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+li.CodeMirror-hint-active {
+    background: rgba(0, 0, 0, 0.8) !important;
+    color: #ffffff !important;
+}
+
+.CodeMirror-hints {
+    background: rgba(26, 26, 46, 0.95) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 2px 8px rgba(141, 141, 255, 0.3) !important;
+}
+
+.cm-s-vintage .CodeMirror-vscrollbar::-webkit-scrollbar,
+.cm-s-vintage .CodeMirror-hscrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.cm-s-vintage .CodeMirror-vscrollbar::-webkit-scrollbar-track,
+.cm-s-vintage .CodeMirror-hscrollbar::-webkit-scrollbar-track {
+    background: #1a1a2e;
+}
+
+.cm-s-vintage .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
+.cm-s-vintage .CodeMirror-hscrollbar::-webkit-scrollbar-thumb {
+    background: #8d8dff;
+    border-radius: 3px;
+}
+
+.cm-s-vintage .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
+.cm-s-vintage .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover {
+    background: #7a7aff;
+}
+
+.CodeMirror-hints::-webkit-scrollbar {
+    width: 6px;
+}
+
+.CodeMirror-hints::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.9);
+}
+
+.CodeMirror-hints::-webkit-scrollbar-thumb {
+    background: #8d8dff;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/static/css/journals/journals.css b/static/css/journals/journals.css
index c46123aa..485c9fd3 100644
--- a/static/css/journals/journals.css
+++ b/static/css/journals/journals.css
@@ -44,6 +44,7 @@
     gap: 6px;
     font-weight: 500;
     transition: all 0.2s ease;
+    font-family: inherit;
 }
 
 .create-btn:hover {
@@ -239,11 +240,15 @@
 .journal-title {
     font-size: 18px;
     font-weight: 600;
-    color: #ffffff;
+    color: #ffffff !important;
     margin: 0 0 8px 0;
     line-height: 1.3;
 }
 
+.journal-title:hover {
+    text-decoration: none;
+}
+
 .journal-description {
     color: #b0b0b0;
     margin: 0;
@@ -255,7 +260,9 @@
     color: #666;
 }
 
-
+.card-title {
+    margin-bottom: 8px;
+}
 
 .card-footer {
     display: flex;
@@ -534,6 +541,38 @@
     margin-bottom: 20px;
 }
 
+.form-message {
+    background: rgba(255, 107, 107, 0.1);
+    border: 1px solid rgba(255, 107, 107, 0.3);
+    border-radius: 8px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+}
+
+.form-message.success {
+    background: rgba(102, 187, 106, 0.1);
+    border: 1px solid rgba(102, 187, 106, 0.3);
+    color: #66bb6a;
+}
+
+.form-message.error {
+    background: rgba(255, 107, 107, 0.1);
+    border: 1px solid rgba(255, 107, 107, 0.3);
+    color: #ff6b6b;
+}
+
+.message-icon {
+    font-size: 16px;
+}
+
+.message-text {
+    color: inherit;
+    margin: 0;
+}
+
 .form-error {
     background: rgba(255, 107, 107, 0.1);
     border: 1px solid rgba(255, 107, 107, 0.3);
@@ -699,4 +738,163 @@
     background: rgba(150, 181, 255, 0.1);
     color: #ffffff !important;
     text-decoration: none !important;
+}
+
+.journal-sidebar {
+    background: rgba(141, 141, 255, 0.1);
+    border: 1px solid rgba(141, 141, 255, 0.3);
+    border-radius: 12px;
+    padding: 20px;
+    width: 280px;
+    flex-shrink: 0;
+    height: fit-content;
+}
+
+.sidebar-header {
+    border-bottom: 1px solid rgba(141, 141, 255, 0.3);
+    padding-bottom: 15px;
+    margin-bottom: 20px;
+}
+
+.sidebar-title {
+    color: #8d8dff;
+    margin: 0 0 5px 0;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sidebar-meta {
+    color: #b0b0b0;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.sidebar-nav {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 20px 0;
+}
+
+.sidebar-nav li {
+    margin-bottom: 5px;
+}
+
+.sidebar-nav a {
+    display: block;
+    padding: 8px 12px;
+    color: #b0b0b0;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+
+.sidebar-nav a:hover {
+    background: rgba(141, 141, 255, 0.1);
+    color: #96b5ff;
+}
+
+.sidebar-nav a.active {
+    background: rgba(141, 141, 255, 0.2);
+    color: #8d8dff;
+    font-weight: 500;
+}
+
+.sidebar-actions {
+    border-top: 1px solid rgba(141, 141, 255, 0.3);
+    padding-top: 15px;
+    margin-top: 20px;
+}
+
+.sidebar-btn {
+    display: block;
+    width: 100%;
+    margin-bottom: 8px;
+    padding: 10px;
+    background: rgba(150, 181, 255, 0.1);
+    border: 1px solid rgba(150, 181, 255, 0.3);
+    color: #96b5ff;
+    text-decoration: none;
+    border-radius: 8px;
+    text-align: center;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.sidebar-btn:hover {
+    background: rgba(150, 181, 255, 0.2);
+    border-color: rgba(150, 181, 255, 0.5);
+}
+
+.sidebar-btn.danger {
+    background: rgba(255, 150, 255, 0.1);
+    border-color: rgba(255, 150, 255, 0.3);
+    color: #ff96ff;
+}
+
+.sidebar-btn.danger:hover {
+    background: rgba(255, 150, 255, 0.2);
+}
+
+.sidebar-back {
+    color: #96b5ff;
+    text-decoration: none;
+}
+
+.journal-tabs {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid rgba(150, 181, 255, 0.2);
+}
+
+.tab-btn {
+    padding: 10px 16px;
+    color: #96b5ff !important;
+    text-decoration: none;
+    border-radius: 8px 8px 0 0;
+    transition: all 0.2s ease;
+    font-weight: 500;
+}
+
+.tab-btn:hover {
+    background: rgba(150, 181, 255, 0.1);
+    color: #ffffff;
+}
+
+.tab-btn.active {
+    background: rgba(150, 181, 255, 0.2);
+    color: #8d8dff;
+    border-bottom: 2px solid #8d8dff;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.create-btn:disabled {
+    background: rgba(141, 141, 255, 0.3) !important;
+    border-color: rgba(141, 141, 255, 0.2) !important;
+    color: rgba(255, 255, 255, 0.6) !important;
+    cursor: not-allowed !important;
+    opacity: 0.7;
+}
+
+.validation-spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #ffffff;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 8px;
 }
\ No newline at end of file
diff --git a/static/css/journals/settings.css b/static/css/journals/settings.css
new file mode 100644
index 00000000..68ab651d
--- /dev/null
+++ b/static/css/journals/settings.css
@@ -0,0 +1,146 @@
+.settings-main {
+    width: 100%;
+}
+
+.journal-card {
+    width: 100%;
+    max-width: none;
+    margin-bottom: 8px;
+}
+
+
+
+.form-container {
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+}
+
+#delete-journal-btn {
+    background: rgba(255, 107, 107, 0.1) !important;
+    border-color: rgba(255, 107, 107, 0.3) !important;
+    color: #ff6b6b !important;
+}
+
+#delete-journal-btn:hover {
+    background: rgba(255, 107, 107, 0.2) !important;
+    border-color: rgba(255, 107, 107, 0.4) !important;
+    color: #ffffff !important;
+}
+
+.translation-fields {
+    display: grid;
+    grid-template-columns: 150px 1fr 2fr 40px;
+    gap: 10px;
+    align-items: start;
+}
+
+.form-input select,
+select.form-input {
+    background: rgba(0, 0, 0, 0.5) !important;
+    color: #ffffff !important;
+}
+
+.form-input select option,
+select.form-input option {
+    background: rgba(0, 0, 0, 0.9) !important;
+    color: #ffffff !important;
+}
+
+
+
+.slug-input-group {
+    display: flex;
+    border: 1px solid rgba(141, 141, 255, 0.3);
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}
+
+.slug-input-group:focus-within {
+    border-color: #8d8dff;
+}
+
+.slug-prefix {
+    padding: 10px 12px;
+    background: rgba(141, 141, 255, 0.1);
+    color: #8d8dff;
+    border-right: 1px solid rgba(141, 141, 255, 0.3);
+}
+
+.slug-input {
+    border: none;
+    background: transparent;
+    flex: 1;
+}
+
+.checkbox-group {
+    display: flex;
+    gap: 10px;
+}
+
+.checkbox-label {
+    display: flex;
+    gap: 10px;
+    cursor: pointer;
+}
+
+.checkbox-custom {
+    width: 18px;
+    height: 18px;
+    border: 1px solid rgba(141, 141, 255, 0.3);
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.3);
+    flex-shrink: 0;
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.form-checkbox:checked+.checkbox-label .checkbox-custom {
+    background: #8d8dff;
+    border-color: #8d8dff;
+}
+
+.form-checkbox:checked+.checkbox-label .checkbox-custom::after {
+    content: '✓';
+    color: #ffffff;
+}
+
+.shared-users-container {
+    display: flex;
+    gap: 8px;
+}
+
+#shared_users {
+    flex: 1;
+}
+
+.shared-users-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.remove-user-btn {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    margin-left: 5px;
+}
+
+.user-badge {
+    background: rgba(150, 181, 255, 0.1);
+    border: 1px solid rgba(150, 181, 255, 0.3);
+    color: #96b5ff;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+}
\ No newline at end of file
diff --git a/static/css/miku_editor/miku.css b/static/css/miku/miku.css
index 2eb57fbe..2eb57fbe 100644
--- a/static/css/miku_editor/miku.css
+++ b/static/css/miku/miku.css
diff --git a/static/css/miku_editor/themes/ghost.css b/static/css/miku/themes/ghost.css
index a57ca488..a57ca488 100644
--- a/static/css/miku_editor/themes/ghost.css
+++ b/static/css/miku/themes/ghost.css
diff --git a/static/css/miku_editor/themes/lain.css b/static/css/miku/themes/lain.css
index 3ca95242..3ca95242 100644
--- a/static/css/miku_editor/themes/lain.css
+++ b/static/css/miku/themes/lain.css
diff --git a/static/css/miku_editor/themes/midnight.css b/static/css/miku/themes/midnight.css
index 352669b6..352669b6 100644
--- a/static/css/miku_editor/themes/midnight.css
+++ b/static/css/miku/themes/midnight.css
diff --git a/static/css/miku_editor/themes/neoncity.css b/static/css/miku/themes/neoncity.css
index 963207f3..963207f3 100644
--- a/static/css/miku_editor/themes/neoncity.css
+++ b/static/css/miku/themes/neoncity.css
diff --git a/static/css/miku_editor/themes/shifoo.css b/static/css/miku/themes/shifoo.css
index 4a3abe28..4a3abe28 100644
--- a/static/css/miku_editor/themes/shifoo.css
+++ b/static/css/miku/themes/shifoo.css
diff --git a/static/css/miku_editor/themes/vintage.css b/static/css/miku/themes/vintage.css
index 34afcee8..34afcee8 100644
--- a/static/css/miku_editor/themes/vintage.css
+++ b/static/css/miku/themes/vintage.css