instbyte 1.7.0 → 1.8.0

package/client/css/app.css

@@ -1,3 +1,6 @@
+/* ============================================================
+   CSS CUSTOM PROPERTIES
+   ============================================================ */
 :root {
     --color-primary: #111827;
     --color-primary-hover: #1f2937;
@@ -10,6 +13,10 @@
     --color-on-secondary: #ffffff;
 }
 
+
+/* ============================================================
+   BASE
+   ============================================================ */
 body {
     font-family: system-ui;
     background: #f3f4f6;
@@ -23,65 +30,13 @@ header {
     border-bottom: 1px solid #e5e7eb;
 }
 
-.container {
-    max-width: 900px;
-    margin: 20px auto;
-    padding: 0 12px;
-}
-
-.channel-bar {
-    background: #e5e7eb;
-    border-radius: 12px;
-    padding: 6px;
-    margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    position: relative;
-}
-
-.channels {
-    flex: 1;
-    display: flex;
-    gap: 6px;
-}
-
-.channels::-webkit-scrollbar {
-    display: none;
-}
-
-.channels button {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    background: transparent;
+button {
+    padding: 10px 14px;
     border: none;
-    padding: 7px 12px;
-    border-radius: 10px;
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    border-radius: 6px;
     cursor: pointer;
-    font-size: 14px;
-    color: #4b5563;
-    transition: all 0.15s ease;
-}
-
-.channels button:hover {
-    background: #d1d5db;
-    color: #111827;
-}
-
-.channels button.active {
-    background: #f9fafb;
-    color: #111827;
-}
-
-.composer {
-    background: #fff;
-    padding: 12px;
-    border-radius: 8px;
-    margin-top: 12px;
-    display: flex;
-    gap: 8px;
 }
 
 input[type=text] {
@@ -91,85 +46,26 @@ input[type=text] {
     border-radius: 6px;
 }
 
-button {
-    padding: 10px 14px;
-    border: none;
-    background: var(--color-primary);
-    color: var(--color-on-primary);
-    border-radius: 6px;
-    cursor: pointer;
-}
-
 input[type=text]:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 
-.drop {
-    border: 2px dashed #ccc;
-    padding: 18px;
-    margin-top: 12px;
-    text-align: center;
-    background: #fff;
-    border-radius: 8px;
-}
-
-.item {
-    background: #fff;
-    padding: 12px;
-    margin-top: 10px;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-}
 
-.item-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.meta {
-    font-size: 12px;
-    color: #6b7280;
-}
-
-.left {
-    max-width: 70%;
-    word-break: break-word;
-}
-
-.item-actions {
-    display: flex;
-    gap: 8px;
-}
-
-.icon-btn {
-    background: #f9fafb;
-    border: 1px solid #e5e7eb;
-    border-radius: 6px;
-    padding: 6px 8px;
-    cursor: pointer;
-    font-size: 14px;
-    line-height: 1;
-    color: #6b7280;
-}
-
-.icon-btn:hover {
-    background: #e5e7eb;
-}
-
-.icon-btn.delete {
-    color: #b91c1c;
-    border-color: #fecaca;
-    background: #fff;
+/* ============================================================
+   LAYOUT
+   ============================================================ */
+.container {
+    max-width: 900px;
+    margin: 20px auto;
+    padding: 0 12px;
 }
 
-.icon-btn.delete:hover {
-    background: #fee2e2;
-}
 
+/* ============================================================
+   HEADER
+   ============================================================ */
 .app-header {
     background: #ffffff;
     border-bottom: 1px solid #e5e7eb;
@@ -203,6 +99,77 @@ input[type=text]:focus {
     justify-content: center;
 }
 
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+}
+
+.username-display {
+    font-size: 13px;
+    color: #374151;
+    cursor: pointer;
+    border-bottom: 1px dashed transparent;
+    transition: border-color 0.15s ease, color 0.15s ease;
+    padding-bottom: 1px;
+}
+
+.username-display:hover {
+    color: #111827;
+    border-bottom-color: #9ca3af;
+}
+
+.online-count {
+    font-size: 12px;
+    color: #9ca3af;
+}
+
+.link-btn {
+    background: none;
+    border: none;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 0;
+}
+
+.link-btn:hover {
+    color: #111827;
+}
+
+.theme-toggle {
+    font-size: 15px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    transition: background 0.15s ease;
+}
+
+.theme-toggle:hover {
+    background: #f3f4f6;
+}
+
+.logout-btn {
+    background: none;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    cursor: pointer;
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 6px;
+    transition: all 0.15s ease;
+}
+
+.logout-btn:hover {
+    background: #fee2e2;
+    border-color: #fecaca;
+    color: #b91c1c;
+}
+
+
+/* ============================================================
+   SEARCH
+   ============================================================ */
 .search-wrapper {
     position: relative;
     width: 100%;
@@ -233,22 +200,53 @@ input[type=text]:focus {
     color: #9ca3af;
 }
 
-.header-right {
+
+/* ============================================================
+   CHANNEL BAR
+   ============================================================ */
+.channel-bar {
+    background: #e5e7eb;
+    border-radius: 12px;
+    padding: 6px;
+    margin-bottom: 16px;
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-size: 13px;
+    gap: 6px;
+    position: relative;
 }
 
-.link-btn {
-    background: none;
+.channels {
+    flex: 1;
+    display: flex;
+    gap: 6px;
+}
+
+.channels::-webkit-scrollbar {
+    display: none;
+}
+
+.channels button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
     border: none;
-    color: #6b7280;
+    padding: 7px 12px;
+    border-radius: 10px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 14px;
+    color: #4b5563;
+    transition: all 0.15s ease;
 }
 
-.link-btn:hover {
+.channels button:hover {
+    background: #d1d5db;
+    color: #111827;
+}
+
+.channels button.active {
+    background: #f9fafb;
     color: #111827;
 }
 
@@ -262,42 +260,117 @@ input[type=text]:focus {
     cursor: pointer;
 }
 
+.add-channel:hover {
+    background: #d1d5db;
+}
+
 .add-channel-mobile {
     display: none;
 }
 
-.add-channel:hover {
-    background: #d1d5db;
+.ch-pin-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background: #f59e0b;
+    border-radius: 50%;
+    flex-shrink: 0;
 }
 
-.size-tag {
+.ch-unread-dot {
     display: inline-block;
-    font-size: 11px;
-    font-weight: 500;
-    padding: 2px 7px;
+    width: 7px;
+    height: 7px;
+    background: #3b82f6;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-left: 2px;
+}
+
+.ch-more {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
     border-radius: 4px;
-    margin-left: 6px;
-    vertical-align: middle;
+    font-size: 13px;
+    color: #6b7280;
+    opacity: 0;
+    transition: opacity 0.12s ease, background 0.12s ease;
+    margin-left: 2px;
+    line-height: 1;
 }
 
-.size-tag.warn {
-    background: #fef9c3;
-    color: #854d0e;
+.channels button:hover .ch-more,
+.channels button.active .ch-more {
+    opacity: 1;
 }
 
-.size-tag.danger-light {
-    background: #fee2e2;
-    color: #b91c1c;
+.ch-more:hover {
+    background: rgba(0, 0, 0, 0.1);
+    color: #111827;
 }
 
-.size-tag.danger-dark {
-    background: #7f1d1d;
-    color: #fff;
+
+/* ============================================================
+   COMPOSER
+   ============================================================ */
+.composer {
+    background: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    margin-top: 12px;
+    display: flex;
+    gap: 8px;
+}
+
+.drop {
+    border: 2px dashed #ccc;
+    padding: 18px;
+    margin-top: 12px;
+    text-align: center;
+    background: #fff;
+    border-radius: 8px;
+}
+
+
+/* ============================================================
+   ITEMS
+   ============================================================ */
+.item {
+    background: #fff;
+    color: #111827;
+    padding: 12px;
+    margin-top: 10px;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    transition: box-shadow 0.15s ease;
+}
+
+.item:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.item-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.meta {
+    font-size: 12px;
+    color: #6b7280;
 }
 
 .left {
+    max-width: 70%;
+    word-break: break-word;
     cursor: pointer;
     position: relative;
+    color: #111827;
 }
 
 .left:hover::after {
@@ -321,68 +394,86 @@ input[type=text]:focus {
     transition: background 0.3s ease;
 }
 
-.qr-widget {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 999;
+.item-actions {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
     gap: 8px;
 }
 
-.qr-card {
-    background: #fff;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    padding: 16px;
+.empty-state {
     text-align: center;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    display: none;
-    width: 200px;
+    color: #9ca3af;
+    font-size: 14px;
+    padding: 60px 20px;
 }
 
-.qr-card.open {
-    display: block;
-}
 
-.qr-card img {
-    width: 160px;
-    height: 160px;
-    border-radius: 6px;
+/* ============================================================
+   SIZE TAGS
+   ============================================================ */
+.size-tag {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 7px;
+    border-radius: 4px;
+    margin-left: 6px;
+    vertical-align: middle;
 }
 
-.qr-card .qr-url {
-    font-size: 11px;
-    color: #6b7280;
-    margin-top: 8px;
-    word-break: break-all;
-    line-height: 1.4;
+.size-tag.warn {
+    background: #fef9c3;
+    color: #854d0e;
 }
 
-.qr-card .qr-label {
-    font-size: 12px;
-    font-weight: 600;
-    color: #111827;
-    margin-bottom: 10px;
+.size-tag.danger-light {
+    background: #fee2e2;
+    color: #b91c1c;
 }
 
-.qr-toggle {
-    background: #111827;
+.size-tag.danger-dark {
+    background: #7f1d1d;
     color: #fff;
-    border: none;
-    border-radius: 20px;
-    padding: 8px 14px;
-    font-size: 13px;
+}
+
+
+/* ============================================================
+   ICON BUTTONS
+   ============================================================ */
+.icon-btn {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 6px 8px;
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    font-size: 14px;
+    line-height: 1;
+    color: #6b7280;
 }
 
-.qr-toggle:hover {
-    background: #1f2937;
+.icon-btn:hover {
+    background: #e5e7eb;
+}
+
+.icon-btn.delete {
+    color: #b91c1c;
+    border-color: #fecaca;
+    background: #fff;
+}
+
+.icon-btn.delete:hover {
+    background: #fee2e2;
+}
+
+.icon-btn.preview-active {
+    background: #eff6ff;
+    border-color: #bfdbfe;
+    color: #1d4ed8;
 }
 
+
+/* ============================================================
+   MOVE DROPDOWN
+   ============================================================ */
 .move-wrapper {
     position: relative;
 }
@@ -412,61 +503,31 @@ input[type=text]:focus {
     background: none;
     border: none;
     padding: 9px 14px;
-    font-size: 13px;
-    color: #374151;
-    cursor: pointer;
-    border-radius: 0;
-}
-
-.move-dropdown button:hover {
-    background: #f3f4f6;
-    color: #111827;
-}
-
-.move-dropdown .dropdown-label {
-    font-size: 11px;
-    color: #9ca3af;
-    padding: 8px 14px 4px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    cursor: default;
-}
-
-.ch-pin-dot {
-    display: inline-block;
-    width: 6px;
-    height: 6px;
-    background: #f59e0b;
-    border-radius: 50%;
-    flex-shrink: 0;
-}
-
-.ch-more {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 18px;
-    height: 18px;
-    border-radius: 4px;
-    font-size: 13px;
-    color: #6b7280;
-    opacity: 0;
-    transition: opacity 0.12s ease, background 0.12s ease;
-    margin-left: 2px;
-    line-height: 1;
+    font-size: 13px;
+    color: #374151;
+    cursor: pointer;
+    border-radius: 0;
 }
 
-.channels button:hover .ch-more,
-.channels button.active .ch-more {
-    opacity: 1;
+.move-dropdown button:hover {
+    background: #f3f4f6;
+    color: #111827;
 }
 
-.ch-more:hover {
-    background: rgba(0, 0, 0, 0.1);
-    color: #111827;
+.move-dropdown .dropdown-label {
+    font-size: 11px;
+    color: #9ca3af;
+    padding: 8px 14px 4px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: default;
 }
 
+
+/* ============================================================
+   CONTEXT MENU
+   ============================================================ */
 .context-menu {
     position: fixed;
     background: #fff;
@@ -526,6 +587,10 @@ input[type=text]:focus {
     margin: 4px 0;
 }
 
+
+/* ============================================================
+   MARKDOWN
+   ============================================================ */
 .markdown-body {
     line-height: 1.5;
     font-size: 14px;
@@ -580,6 +645,10 @@ input[type=text]:focus {
     padding-left: 20px;
 }
 
+
+/* ============================================================
+   PREVIEW PANEL
+   ============================================================ */
 .preview-panel {
     display: none;
     margin-top: 10px;
@@ -657,57 +726,165 @@ input[type=text]:focus {
     padding: 12px 0;
 }
 
-.icon-btn.preview-active {
-    background: #eff6ff;
-    border-color: #bfdbfe;
-    color: #1d4ed8;
-}
 
-/* Make item flex-direction column to allow panel below content */
-.item {
+/* ============================================================
+   QR WIDGET
+   ============================================================ */
+.qr-widget {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 999;
+    display: flex;
     flex-direction: column;
-    align-items: stretch;
-    transition: box-shadow 0.15s ease;
+    align-items: flex-end;
+    gap: 8px;
 }
 
-.item-top {
+.qr-card {
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 16px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    display: none;
+    width: 200px;
+}
+
+.qr-card.open {
+    display: block;
+}
+
+.qr-card img {
+    width: 160px;
+    height: 160px;
+    border-radius: 6px;
+}
+
+.qr-card .qr-url {
+    font-size: 11px;
+    color: #6b7280;
+    margin-top: 8px;
+    word-break: break-all;
+    line-height: 1.4;
+}
+
+.qr-card .qr-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #111827;
+    margin-bottom: 10px;
+}
+
+.qr-toggle {
+    background: #111827;
+    color: #fff;
+    border: none;
+    border-radius: 20px;
+    padding: 8px 14px;
+    font-size: 13px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.qr-toggle:hover {
+    background: #1f2937;
+}
+
+
+/* ============================================================
+   UNDO TOAST
+   ============================================================ */
+.undo-toast {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%) translateY(80px);
+    background: #1f2937;
+    color: #f3f4f6;
+    padding: 12px 16px;
+    border-radius: 10px;
+    font-size: 13px;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    gap: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+    z-index: 9999;
+    opacity: 0;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    min-width: 220px;
+    overflow: hidden;
 }
 
-.item:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+.undo-toast.show {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
 }
 
-.empty-state {
-    text-align: center;
-    color: #9ca3af;
-    font-size: 14px;
-    padding: 60px 20px;
+.undo-toast #undoBtn {
+    background: none;
+    border: 1px solid #4b5563;
+    color: #f3f4f6;
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-size: 12px;
+    cursor: pointer;
+    flex-shrink: 0;
 }
 
-.theme-toggle {
-    font-size: 15px;
-    padding: 2px 6px;
-    border-radius: 6px;
-    transition: background 0.15s ease;
+.undo-toast #undoBtn:hover {
+    background: #374151;
 }
 
-.theme-toggle:hover {
-    background: #f3f4f6;
+.undo-progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    width: 100%;
+    background: #4b5563;
+    transform-origin: left;
+    animation: none;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) .theme-toggle:hover {
-        background: #2d3148;
+.undo-progress.running {
+    animation: drain 5s linear forwards;
+}
+
+@keyframes drain {
+    from {
+        transform: scaleX(1);
+    }
+
+    to {
+        transform: scaleX(0);
     }
 }
 
-:root[data-theme="dark"] .theme-toggle:hover {
-    background: #2d3148;
+
+/* ============================================================
+   LOAD MORE
+   ============================================================ */
+.load-more-btn {
+    background: #f3f4f6;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 10px 24px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+}
+
+.load-more-btn:hover {
+    background: #e5e7eb;
 }
 
+
+/* ============================================================
+   MOBILE
+   ============================================================ */
 @media (max-width: 640px) {
     .app-header {
         flex-wrap: wrap;
@@ -834,9 +1011,16 @@ input[type=text]:focus {
     }
 }
 
+
+/* ============================================================
+   DARK MODE
+   Two selectors, identical rules — no duplication within each.
+   Media query handles OS preference.
+   [data-theme="dark"] handles manual override.
+   ============================================================ */
+
 @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
-
         body {
             background: #0f1117;
         }
@@ -850,6 +1034,46 @@ input[type=text]:focus {
             color: #f3f4f6;
         }
 
+        .logo {
+            filter: invert(1) brightness(1.2);
+        }
+
+        .username-display {
+            color: #d1d5db;
+        }
+
+        .username-display:hover {
+            color: #f3f4f6;
+            border-bottom-color: #6b7280;
+        }
+
+        .online-count {
+            color: #6b7280;
+        }
+
+        .link-btn {
+            color: #9ca3af;
+        }
+
+        .link-btn:hover {
+            color: #f3f4f6;
+        }
+
+        .theme-toggle:hover {
+            background: #2d3148;
+        }
+
+        .logout-btn {
+            border-color: #2d3148;
+            color: #9ca3af;
+        }
+
+        .logout-btn:hover {
+            background: #2d1515;
+            border-color: #7f1d1d;
+            color: #f87171;
+        }
+
         .search-wrapper input {
             background: #252836;
             border-color: #2d3148;
@@ -869,18 +1093,6 @@ input[type=text]:focus {
             color: #6b7280;
         }
 
-        .logo {
-            filter: invert(1) brightness(1.2);
-        }
-
-        .link-btn {
-            color: #9ca3af;
-        }
-
-        .link-btn:hover {
-            color: #f3f4f6;
-        }
-
         .channel-bar {
             background: #1a1d27;
         }
@@ -943,6 +1155,7 @@ input[type=text]:focus {
 
         .item {
             background: #1a1d27;
+            color: #e5e7eb;
         }
 
         .item:hover {
@@ -953,29 +1166,35 @@ input[type=text]:focus {
             color: #60a5fa;
         }
 
-        .meta {
-            color: #6b7280;
+        .left {
+            color: #e5e7eb;
         }
 
-        .preview-panel {
-            border-top-color: #2d3148;
+        .left.flash {
+            background: #064e3b;
         }
 
-        .preview-panel embed,
-        .preview-panel iframe {
-            background: #252836;
+        .left:hover::after {
+            background: #374151;
+            color: #f3f4f6;
         }
 
-        .preview-panel pre {
-            background: #0f1117;
-            border-color: #2d3148;
-            color: #e5e7eb;
+        .meta {
+            color: #6b7280;
         }
 
-        .preview-truncated,
-        .preview-error,
-        .preview-loading {
-            color: #6b7280;
+        .empty-state {
+            color: #4b5563;
+        }
+
+        .size-tag.warn {
+            background: #422006;
+            color: #fbbf24;
+        }
+
+        .size-tag.danger-light {
+            background: #2d1515;
+            color: #f87171;
         }
 
         .icon-btn {
@@ -1053,18 +1272,25 @@ input[type=text]:focus {
             background: #2d3148;
         }
 
-        .qr-card {
-            background: #1a1d27;
-            border-color: #2d3148;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+        .preview-panel {
+            border-top-color: #2d3148;
         }
 
-        .qr-card .qr-label {
-            color: #f3f4f6;
+        .preview-panel embed,
+        .preview-panel iframe {
+            background: #252836;
         }
 
-        .qr-card .qr-url {
-            color: #9ca3af;
+        .preview-panel pre {
+            background: #0f1117;
+            border-color: #2d3148;
+            color: #e5e7eb;
+        }
+
+        .preview-truncated,
+        .preview-error,
+        .preview-loading {
+            color: #6b7280;
         }
 
         .markdown-body {
@@ -1085,37 +1311,42 @@ input[type=text]:focus {
             color: #60a5fa;
         }
 
-        .size-tag.warn {
-            background: #422006;
-            color: #fbbf24;
+        .qr-card {
+            background: #1a1d27;
+            border-color: #2d3148;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
         }
 
-        .size-tag.danger-light {
-            background: #2d1515;
-            color: #f87171;
+        .qr-card .qr-label {
+            color: #f3f4f6;
         }
 
-        .left.flash {
-            background: #064e3b;
+        .qr-card .qr-url {
+            color: #9ca3af;
         }
 
-        .left:hover::after {
+        .undo-toast {
             background: #374151;
-            color: #f3f4f6;
         }
 
-        .empty-state {
-            color: #4b5563;
+        .load-more-btn {
+            background: #1a1d27;
+            color: #d1d5db;
+            border-color: #2d3148;
+        }
+
+        .load-more-btn:hover {
+            background: #2d3148;
         }
 
-        .upload-status {
+        #uploadStatus {
             background: #1a1d27 !important;
+            color: #e5e7eb !important;
         }
     }
 }
 
 :root[data-theme="dark"] {
-
     body {
         background: #0f1117;
     }
@@ -1129,6 +1360,46 @@ input[type=text]:focus {
         color: #f3f4f6;
     }
 
+    .logo {
+        filter: invert(1) brightness(1.2);
+    }
+
+    .username-display {
+        color: #d1d5db;
+    }
+
+    .username-display:hover {
+        color: #f3f4f6;
+        border-bottom-color: #6b7280;
+    }
+
+    .online-count {
+        color: #6b7280;
+    }
+
+    .link-btn {
+        color: #9ca3af;
+    }
+
+    .link-btn:hover {
+        color: #f3f4f6;
+    }
+
+    .theme-toggle:hover {
+        background: #2d3148;
+    }
+
+    .logout-btn {
+        border-color: #2d3148;
+        color: #9ca3af;
+    }
+
+    .logout-btn:hover {
+        background: #2d1515;
+        border-color: #7f1d1d;
+        color: #f87171;
+    }
+
     .search-wrapper input {
         background: #252836;
         border-color: #2d3148;
@@ -1148,18 +1419,6 @@ input[type=text]:focus {
         color: #6b7280;
     }
 
-    .logo {
-        filter: invert(1) brightness(1.2);
-    }
-
-    .link-btn {
-        color: #9ca3af;
-    }
-
-    .link-btn:hover {
-        color: #f3f4f6;
-    }
-
     .channel-bar {
         background: #1a1d27;
     }
@@ -1186,10 +1445,6 @@ input[type=text]:focus {
         color: #9ca3af;
     }
 
-    .header-right span {
-        color: #f3f4f6;
-    }
-
     .add-channel:hover {
         background: #2d3148;
     }
@@ -1226,6 +1481,7 @@ input[type=text]:focus {
 
     .item {
         background: #1a1d27;
+        color: #e5e7eb;
     }
 
     .item:hover {
@@ -1236,29 +1492,35 @@ input[type=text]:focus {
         color: #60a5fa;
     }
 
-    .meta {
-        color: #6b7280;
+    .left {
+        color: #e5e7eb;
     }
 
-    .preview-panel {
-        border-top-color: #2d3148;
+    .left.flash {
+        background: #064e3b;
     }
 
-    .preview-panel embed,
-    .preview-panel iframe {
-        background: #252836;
+    .left:hover::after {
+        background: #374151;
+        color: #f3f4f6;
     }
 
-    .preview-panel pre {
-        background: #0f1117;
-        border-color: #2d3148;
-        color: #e5e7eb;
+    .meta {
+        color: #6b7280;
     }
 
-    .preview-truncated,
-    .preview-error,
-    .preview-loading {
-        color: #6b7280;
+    .empty-state {
+        color: #4b5563;
+    }
+
+    .size-tag.warn {
+        background: #422006;
+        color: #fbbf24;
+    }
+
+    .size-tag.danger-light {
+        background: #2d1515;
+        color: #f87171;
     }
 
     .icon-btn {
@@ -1336,18 +1598,25 @@ input[type=text]:focus {
         background: #2d3148;
     }
 
-    .qr-card {
-        background: #1a1d27;
-        border-color: #2d3148;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+    .preview-panel {
+        border-top-color: #2d3148;
     }
 
-    .qr-card .qr-label {
-        color: #f3f4f6;
+    .preview-panel embed,
+    .preview-panel iframe {
+        background: #252836;
     }
 
-    .qr-card .qr-url {
-        color: #9ca3af;
+    .preview-panel pre {
+        background: #0f1117;
+        border-color: #2d3148;
+        color: #e5e7eb;
+    }
+
+    .preview-truncated,
+    .preview-error,
+    .preview-loading {
+        color: #6b7280;
     }
 
     .markdown-body {
@@ -1368,106 +1637,36 @@ input[type=text]:focus {
         color: #60a5fa;
     }
 
-    .size-tag.warn {
-        background: #422006;
-        color: #fbbf24;
-    }
-
-    .size-tag.danger-light {
-        background: #2d1515;
-        color: #f87171;
-    }
-
-    .left.flash {
-        background: #064e3b;
+    .qr-card {
+        background: #1a1d27;
+        border-color: #2d3148;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
     }
 
-    .left:hover::after {
-        background: #374151;
+    .qr-card .qr-label {
         color: #f3f4f6;
     }
 
-    .empty-state {
-        color: #4b5563;
+    .qr-card .qr-url {
+        color: #9ca3af;
     }
 
-    .upload-status {
-        background: #1a1d27 !important;
+    .undo-toast {
+        background: #374151;
     }
-}
-
-.undo-toast {
-    position: fixed;
-    bottom: 30px;
-    left: 50%;
-    transform: translateX(-50%) translateY(80px);
-    background: #1f2937;
-    color: #f3f4f6;
-    padding: 12px 16px;
-    border-radius: 10px;
-    font-size: 13px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
-    z-index: 9999;
-    opacity: 0;
-    transition: transform 0.2s ease, opacity 0.2s ease;
-    min-width: 220px;
-    overflow: hidden;
-}
-
-.undo-toast.show {
-    transform: translateX(-50%) translateY(0);
-    opacity: 1;
-}
-
-.undo-toast #undoBtn {
-    background: none;
-    border: 1px solid #4b5563;
-    color: #f3f4f6;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 12px;
-    cursor: pointer;
-    flex-shrink: 0;
-}
-
-.undo-toast #undoBtn:hover {
-    background: #374151;
-}
-
-.undo-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 3px;
-    width: 100%;
-    background: #4b5563;
-    transform-origin: left;
-    animation: none;
-}
-
-.undo-progress.running {
-    animation: drain 5s linear forwards;
-}
 
-@keyframes drain {
-    from {
-        transform: scaleX(1);
+    .load-more-btn {
+        background: #1a1d27;
+        color: #d1d5db;
+        border-color: #2d3148;
     }
 
-    to {
-        transform: scaleX(0);
+    .load-more-btn:hover {
+        background: #2d3148;
     }
-}
 
-@media (prefers-color-scheme: dark) {
-    :root:not([data-theme="light"]) .undo-toast {
-        background: #374151;
+    #uploadStatus {
+        background: #1a1d27 !important;
+        color: #e5e7eb !important;
     }
-}
-
-:root[data-theme="dark"] .undo-toast {
-    background: #374151;
 }