Added Fancy version of Miku with styles and new entry page for journals

7 files changed, 1025 insertions, 0 deletions

diff --git a/static/css/miku/miku.css b/static/css/miku/miku.css
index 2eb57fbe..15f52718 100644
--- a/static/css/miku/miku.css
+++ b/static/css/miku/miku.css
@@ -228,4 +228,368 @@
 .miku-syntax-js-function {
     color: #9b59b6;
     font-weight: 600;
+}
+
+.miku-container {
+    position: relative;
+    width: 100%;
+    border-radius: 6px;
+    overflow: hidden;
+    font-family: 'Mali', sans-serif;
+    background: #0a0a0a;
+    border: 2px solid #333;
+}
+
+.miku-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 10px;
+    background: #1a1a1a;
+    border-bottom: 1px solid #333;
+}
+
+.miku-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 6px 10px;
+    background: #2a2a2a;
+    border: 1px solid #444;
+    border-radius: 4px;
+    color: #e8e8e8;
+    font-size: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'Mali', sans-serif;
+}
+
+.miku-btn:hover {
+    background: #3a3a3a;
+    border-color: #666;
+}
+
+.miku-btn-special {
+    background: #333;
+    border-color: #555;
+}
+
+.miku-toolbar-separator {
+    width: 1px;
+    height: 24px;
+    background: #444;
+    margin: 4px 2px;
+}
+
+.miku-content,
+.miku-source {
+    padding: 16px;
+    background: #0f0f0f;
+    color: #e8e8e8;
+    font-size: 13px;
+    line-height: 1.6;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 300px;
+    outline: none;
+}
+
+.miku-source {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    background: #0a0a0a;
+    border: none;
+    resize: none;
+    width: 100%;
+    padding: 16px;
+    color: #e8e8e8;
+}
+
+.miku-content::-webkit-scrollbar,
+.miku-source::-webkit-scrollbar {
+    width: 8px;
+}
+
+.miku-content::-webkit-scrollbar-track,
+.miku-source::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #4ecdc4;
+    border-radius: 4px;
+}
+
+.miku-content:empty:before,
+.miku-content:has(p:only-child:empty):before {
+    content: attr(data-placeholder);
+    color: #666;
+    pointer-events: none;
+    position: absolute;
+}
+
+.miku-content p {
+    margin: 4px 0;
+    text-align: justify;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3 {
+    margin: 16px 0 8px 0;
+    color: #4ecdc4;
+    font-weight: 600;
+}
+
+.miku-content h1 {
+    font-size: 24px;
+}
+
+.miku-content h2 {
+    font-size: 20px;
+}
+
+.miku-content h3 {
+    font-size: 16px;
+}
+
+.miku-content strong,
+.miku-content b {
+    font-weight: 700;
+    color: #ff6b6b;
+}
+
+.miku-content em,
+.miku-content i {
+    font-style: italic;
+    color: #f39c12;
+}
+
+.miku-content u {
+    text-decoration: underline;
+}
+
+.miku-content s {
+    text-decoration: line-through;
+    opacity: 0.7;
+}
+
+.miku-content a {
+    color: #45b7d1;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.miku-link-edit {
+    display: inline-block;
+    margin-left: 4px;
+    padding: 2px 6px;
+    background: #333;
+    color: #4ecdc4;
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 12px;
+}
+
+.miku-content img {
+    max-width: 350px;
+    max-height: 350px;
+    border-radius: 8px;
+    border: 1px solid #333;
+    margin: 6px 12px 8px 0;
+    cursor: pointer;
+}
+
+.miku-content img:nth-of-type(odd) {
+    float: left;
+    margin-right: 12px;
+}
+
+.miku-content img:nth-of-type(even) {
+    float: right;
+    margin-left: 12px;
+}
+
+.miku-content img.block {
+    float: none;
+    display: block;
+    margin: 16px auto;
+    max-width: 100%;
+    max-height: 500px;
+    width: auto;
+}
+
+.miku-content a img {
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.miku-content a img:hover {
+    transform: scale(1.02);
+    opacity: 0.9;
+}
+
+.miku-content blockquote {
+    margin: 12px 0;
+    padding: 12px 16px;
+    border-left: 4px solid #4ecdc4;
+    background: rgba(78, 205, 196, 0.1);
+    border-radius: 0 4px 4px 0;
+    font-style: italic;
+}
+
+.miku-content code {
+    background: #1a1a1a;
+    color: #4ecdc4;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    border: 1px solid #333;
+}
+
+.miku-code-wrapper {
+    position: relative;
+    margin: 16px 0;
+    border: 1px solid #333;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.miku-code-lang {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: #1a1a1a;
+    color: #4ecdc4;
+    padding: 4px 8px;
+    border: 1px solid #333;
+    border-radius: 3px;
+    font-size: 11px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    z-index: 10;
+    cursor: pointer;
+}
+
+.miku-content pre {
+    margin: 0;
+    padding: 40px 12px 12px 12px;
+    background: #0a0a0a;
+    overflow-x: auto;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: #e8e8e8;
+}
+
+.miku-content pre code {
+    background: transparent;
+    border: none;
+    padding: 0;
+    color: inherit;
+}
+
+.miku-popup {
+    position: fixed;
+    width: 400px;
+    background: #1a1a1a;
+    border: 2px solid #333;
+    border-radius: 8px;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    font-family: 'Mali', sans-serif;
+}
+
+.miku-popup-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: #2a2a2a;
+    border-bottom: 1px solid #333;
+    color: #e8e8e8;
+    font-weight: 600;
+}
+
+.miku-popup-close {
+    background: none;
+    border: none;
+    color: #e8e8e8;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    line-height: 1;
+}
+
+.miku-popup-body {
+    padding: 16px;
+}
+
+.miku-popup-field {
+    margin-bottom: 12px;
+}
+
+.miku-popup-field label {
+    display: block;
+    color: #4ecdc4;
+    margin-bottom: 6px;
+    font-size: 13px;
+}
+
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    width: 100%;
+    background: #0f0f0f;
+    border: 1px solid #333;
+    border-radius: 4px;
+    padding: 8px;
+    color: #e8e8e8;
+    font-family: 'Mali', sans-serif;
+    font-size: 13px;
+}
+
+.miku-popup-field input[type="checkbox"] {
+    margin-right: 6px;
+}
+
+.miku-popup-footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 12px 16px;
+    background: #2a2a2a;
+    border-top: 1px solid #333;
+}
+
+.miku-btn-primary,
+.miku-btn-secondary {
+    padding: 8px 16px;
+    border-radius: 4px;
+    font-weight: 600;
+    cursor: pointer;
+    font-family: 'Mali', sans-serif;
+    font-size: 13px;
+}
+
+.miku-btn-primary {
+    background: #4ecdc4;
+    border: 1px solid #4ecdc4;
+    color: #000;
+}
+
+.miku-btn-primary:hover {
+    background: #5fd3ca;
+}
+
+.miku-btn-secondary {
+    background: #2a2a2a;
+    border: 1px solid #444;
+    color: #e8e8e8;
+}
+
+.miku-btn-secondary:hover {
+    background: #3a3a3a;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/ghost.css b/static/css/miku/themes/ghost.css
index a57ca488..6a02819b 100644
--- a/static/css/miku/themes/ghost.css
+++ b/static/css/miku/themes/ghost.css
@@ -145,4 +145,106 @@
 
 .miku-syntax-js-function {
     color: #00FF00;
+}
+
+.miku-container {
+    background: #000000;
+    border: 1px solid #00FFFF;
+}
+
+.miku-toolbar {
+    background: #000000;
+    border-bottom: 1px solid #00FFFF;
+}
+
+.miku-btn {
+    color: #00FFFF;
+    background: transparent;
+    border: 1px solid #004444;
+}
+
+.miku-btn:hover {
+    background: #001111;
+    border-color: #00FFFF;
+}
+
+.miku-content,
+.miku-source {
+    background: #000000;
+    color: #00FFFF;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #00FFFF;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3,
+.miku-content a {
+    color: #00FFFF;
+}
+
+.miku-link-edit {
+    background: #001111;
+    color: #00FFFF;
+}
+
+.miku-content img {
+    border-color: #004444;
+}
+
+.miku-content blockquote {
+    border-left-color: #00FFFF;
+    background: #001111;
+}
+
+.miku-content code {
+    background: #001111;
+    color: #00FFFF;
+    border-color: #004444;
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: #004444;
+    background: #001111;
+}
+
+.miku-code-lang {
+    background: #000000;
+    color: #00FFFF;
+    border-color: #00FFFF;
+}
+
+.miku-popup {
+    background: #000000;
+    border: 1px solid #00FFFF;
+}
+
+.miku-popup-header,
+.miku-popup-footer {
+    background: #000000;
+    border-color: #00FFFF;
+    color: #00FFFF;
+}
+
+.miku-popup-field label,
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    color: #00FFFF;
+    background: #001111;
+    border-color: #00FFFF;
+}
+
+.miku-btn-primary {
+    background: #00FFFF;
+    color: #000000;
+}
+
+.miku-btn-secondary {
+    background: transparent;
+    color: #00FFFF;
+    border: 1px solid #00FFFF;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/lain.css b/static/css/miku/themes/lain.css
index 3ca95242..eaf816d7 100644
--- a/static/css/miku/themes/lain.css
+++ b/static/css/miku/themes/lain.css
@@ -145,4 +145,111 @@
 
 .miku-syntax-js-function {
     color: #AD717B;
+}
+
+.miku-container {
+    background: #000000;
+    border: 1px solid #C4748D;
+}
+
+.miku-toolbar {
+    background: #000000;
+    border-bottom: 1px solid #C4748D;
+}
+
+.miku-btn {
+    color: #AD717B;
+    background: transparent;
+    border: 1px solid #85474B;
+}
+
+.miku-btn:hover {
+    background: #340000;
+    border-color: #C4748D;
+    color: #D4758C;
+}
+
+.miku-content,
+.miku-source {
+    background: #000000;
+    color: #AD717B;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #C4748D;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3,
+.miku-content a {
+    color: #D4758C;
+}
+
+.miku-link-edit {
+    background: #340000;
+    color: #D4758C;
+}
+
+.miku-content img {
+    border-color: #85474B;
+}
+
+.miku-content blockquote {
+    border-left-color: #C4748D;
+    background: #340000;
+    color: #AD717B;
+}
+
+.miku-content code {
+    background: #340000;
+    color: #D4758C;
+    border-color: #85474B;
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: #85474B;
+    background: #340000;
+}
+
+.miku-code-lang {
+    background: #000000;
+    color: #AD717B;
+    border-color: #C4748D;
+}
+
+.miku-popup {
+    background: #000000;
+    border: 1px solid #C4748D;
+}
+
+.miku-popup-header,
+.miku-popup-footer {
+    background: #000000;
+    border-color: #C4748D;
+    color: #D4758C;
+}
+
+.miku-popup-field label {
+    color: #AD717B;
+}
+
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    background: #340000;
+    border-color: #C4748D;
+    color: #AD717B;
+}
+
+.miku-btn-primary {
+    background: #C4748D;
+    color: #000000;
+}
+
+.miku-btn-secondary {
+    background: transparent;
+    color: #AD717B;
+    border: 1px solid #C4748D;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/midnight.css b/static/css/miku/themes/midnight.css
index 352669b6..c63bdffc 100644
--- a/static/css/miku/themes/midnight.css
+++ b/static/css/miku/themes/midnight.css
@@ -136,4 +136,142 @@
 
 .miku-syntax-js-function {
     color: #8d8dff;
+}
+
+.miku-container {
+    background: #000;
+    border-color: #8d8dff;
+}
+
+.miku-toolbar {
+    background: rgba(15, 10, 25, 0.9);
+    border-bottom-color: rgba(173, 140, 255, 0.4);
+}
+
+.miku-btn {
+    background: rgba(68, 68, 177, 0.3);
+    border-color: rgba(141, 141, 255, 0.4);
+    color: #7ee8c7;
+}
+
+.miku-btn:hover {
+    background: rgba(223, 35, 196, 0.5);
+    border-color: #df23c4;
+    color: #ffffff;
+}
+
+.miku-content,
+.miku-source {
+    background: #000;
+    color: #fff;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #df23c4;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3 {
+    color: #7ee8c7;
+    text-shadow: 0 0 4px rgba(126, 232, 199, 0.3);
+}
+
+.miku-content strong,
+.miku-content b {
+    color: #96b5ff;
+}
+
+.miku-content em,
+.miku-content i {
+    color: #ff96c4;
+}
+
+.miku-content a {
+    color: #df23c4;
+    text-shadow: 0 0 4px rgba(223, 35, 196, 0.3);
+}
+
+.miku-link-edit {
+    background: rgba(68, 68, 177, 0.8);
+    color: #7ee8c7;
+}
+
+.miku-content img {
+    border-color: rgba(141, 141, 255, 0.3);
+    box-shadow: 0 0 8px rgba(141, 141, 255, 0.2);
+}
+
+.miku-content blockquote {
+    border-left-color: #8d8dff;
+    background: rgba(141, 141, 255, 0.1);
+    color: #96b5ff;
+}
+
+.miku-content code {
+    background: rgba(0, 0, 0, 0.4);
+    color: #54f2f2;
+    border-color: rgba(84, 242, 242, 0.3);
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: rgba(141, 141, 255, 0.3);
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.miku-code-lang {
+    background: rgba(141, 141, 255, 0.3);
+    color: #7ee8c7;
+    border-color: rgba(141, 141, 255, 0.5);
+}
+
+.miku-popup {
+    background: rgba(30, 20, 50, 0.95);
+    border-color: rgba(173, 140, 255, 0.7);
+    box-shadow: 0 8px 24px rgba(136, 87, 210, 0.6);
+}
+
+.miku-popup-header {
+    background: rgba(50, 30, 80, 0.95);
+    border-bottom-color: rgba(173, 140, 255, 0.5);
+}
+
+.miku-popup-field label {
+    color: #7ee8c7;
+}
+
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    background: rgba(0, 0, 0, 0.6);
+    border-color: rgba(141, 141, 255, 0.4);
+    color: #fff;
+}
+
+.miku-popup-footer {
+    background: rgba(50, 30, 80, 0.95);
+    border-top-color: rgba(173, 140, 255, 0.5);
+}
+
+.miku-btn-primary {
+    background: rgba(68, 68, 177, 0.85);
+    border-color: #8d8dff;
+    color: #fff;
+}
+
+.miku-btn-primary:hover {
+    background: #df23c4;
+    border-color: #df23c4;
+}
+
+.miku-btn-secondary {
+    background: rgba(68, 68, 177, 0.3);
+    border-color: rgba(141, 141, 255, 0.4);
+    color: #96b5ff;
+}
+
+.miku-btn-secondary:hover {
+    background: rgba(150, 181, 255, 0.2);
+    color: #ffffff;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/neoncity.css b/static/css/miku/themes/neoncity.css
index 963207f3..7ed96c89 100644
--- a/static/css/miku/themes/neoncity.css
+++ b/static/css/miku/themes/neoncity.css
@@ -146,4 +146,106 @@
 .miku-syntax-js-function {
     color: #00ff00;
     font-weight: bold;
+}
+
+.miku-container {
+    background: #000000;
+    border: none;
+}
+
+.miku-toolbar {
+    background: #000000;
+    border-bottom: 1px solid #00ff00;
+}
+
+.miku-btn {
+    color: #00ff00;
+    background: transparent;
+    border: 1px solid #003300;
+}
+
+.miku-btn:hover {
+    background: #111111;
+    border-color: #00ff00;
+}
+
+.miku-content,
+.miku-source {
+    background: #000000;
+    color: #00ff00;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #00ff00;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3,
+.miku-content a {
+    color: #00ff00;
+}
+
+.miku-link-edit {
+    background: #111111;
+    color: #00ff00;
+}
+
+.miku-content img {
+    border-color: #003300;
+}
+
+.miku-content blockquote {
+    border-left-color: #00ff00;
+    background: #111111;
+}
+
+.miku-content code {
+    background: #111111;
+    color: #00ff00;
+    border-color: #003300;
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: #003300;
+    background: #111111;
+}
+
+.miku-code-lang {
+    background: #000000;
+    color: #00ff00;
+    border-color: #00ff00;
+}
+
+.miku-popup {
+    background: #000000;
+    border: 1px solid #00ff00;
+}
+
+.miku-popup-header,
+.miku-popup-footer {
+    background: #000000;
+    border-color: #00ff00;
+    color: #00ff00;
+}
+
+.miku-popup-field label,
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    color: #00ff00;
+    background: #111111;
+    border-color: #00ff00;
+}
+
+.miku-btn-primary {
+    background: #00ff00;
+    color: #000000;
+}
+
+.miku-btn-secondary {
+    background: transparent;
+    color: #00ff00;
+    border: 1px solid #00ff00;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/shifoo.css b/static/css/miku/themes/shifoo.css
index 4a3abe28..8da6c0eb 100644
--- a/static/css/miku/themes/shifoo.css
+++ b/static/css/miku/themes/shifoo.css
@@ -142,4 +142,110 @@
 
 .miku-syntax-js-function {
     color: #5ccfe6;
+}
+
+.miku-container {
+    background: #0a0e14;
+    border: none;
+}
+
+.miku-toolbar {
+    background: #0a0e14;
+    border-bottom: 1px solid #4d5566;
+}
+
+.miku-btn {
+    color: #b3b1ad;
+    background: transparent;
+    border: 1px solid #1a1f29;
+}
+
+.miku-btn:hover {
+    background: #1a1f29;
+    border-color: #36a3d9;
+    color: #ffb454;
+}
+
+.miku-content,
+.miku-source {
+    background: #0a0e14;
+    color: #b3b1ad;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #36a3d9;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3,
+.miku-content a {
+    color: #36a3d9;
+}
+
+.miku-link-edit {
+    background: #1a1f29;
+    color: #ffb454;
+}
+
+.miku-content img {
+    border-color: #4d5566;
+}
+
+.miku-content blockquote {
+    border-left-color: #36a3d9;
+    background: #1a1f29;
+}
+
+.miku-content code {
+    background: #1a1f29;
+    color: #ffb454;
+    border-color: #4d5566;
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: #4d5566;
+    background: #1a1f29;
+}
+
+.miku-code-lang {
+    background: #0a0e14;
+    color: #b3b1ad;
+    border-color: #36a3d9;
+}
+
+.miku-popup {
+    background: #0a0e14;
+    border: 1px solid #4d5566;
+}
+
+.miku-popup-header,
+.miku-popup-footer {
+    background: #0a0e14;
+    border-color: #4d5566;
+    color: #ffb454;
+}
+
+.miku-popup-field label {
+    color: #b3b1ad;
+}
+
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    background: #1a1f29;
+    border-color: #4d5566;
+    color: #b3b1ad;
+}
+
+.miku-btn-primary {
+    background: #36a3d9;
+    color: #0a0e14;
+}
+
+.miku-btn-secondary {
+    background: transparent;
+    color: #b3b1ad;
+    border: 1px solid #4d5566;
 }
\ No newline at end of file
diff --git a/static/css/miku/themes/vintage.css b/static/css/miku/themes/vintage.css
index 34afcee8..65b4ec19 100644
--- a/static/css/miku/themes/vintage.css
+++ b/static/css/miku/themes/vintage.css
@@ -139,4 +139,110 @@
 
 .miku-syntax-js-function {
     color: #8d8dff;
+}
+
+.miku-container {
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.miku-toolbar {
+    background: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.miku-btn {
+    color: #ffffff;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.miku-btn:hover {
+    background: rgba(141, 141, 255, 0.2);
+    border-color: #8d8dff;
+    color: #8d8dff;
+}
+
+.miku-content,
+.miku-source {
+    background: transparent;
+    color: #ffffff;
+}
+
+.miku-content::-webkit-scrollbar-thumb,
+.miku-source::-webkit-scrollbar-thumb {
+    background: #8d8dff;
+}
+
+.miku-content h1,
+.miku-content h2,
+.miku-content h3,
+.miku-content a {
+    color: #8d8dff;
+}
+
+.miku-link-edit {
+    background: rgba(0, 0, 0, 0.4);
+    color: #8d8dff;
+}
+
+.miku-content img {
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.miku-content blockquote {
+    border-left-color: #8d8dff;
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.miku-content code {
+    background: rgba(0, 0, 0, 0.4);
+    color: #8d8dff;
+    border-color: rgba(255, 255, 255, 0.1);
+}
+
+.miku-code-wrapper,
+.miku-content pre {
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.4);
+}
+
+.miku-code-lang {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ffffff;
+    border-color: rgba(141, 141, 255, 0.3);
+}
+
+.miku-popup {
+    background: rgba(0, 0, 0, 0.95);
+    border: 1px solid rgba(141, 141, 255, 0.3);
+}
+
+.miku-popup-header,
+.miku-popup-footer {
+    background: rgba(0, 0, 0, 0.95);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #8d8dff;
+}
+
+.miku-popup-field label {
+    color: #ffffff;
+}
+
+.miku-popup-field input[type="text"],
+.miku-popup-field select {
+    background: rgba(0, 0, 0, 0.5);
+    border-color: rgba(141, 141, 255, 0.3);
+    color: #ffffff;
+}
+
+.miku-btn-primary {
+    background: #8d8dff;
+    color: #000000;
+}
+
+.miku-btn-secondary {
+    background: transparent;
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.3);
 }
\ No newline at end of file