diff --git a/src/domain/types.ts b/src/domain/types.ts
index cdf1c2f..8b7529d 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -105,3 +105,21 @@ export type ThreadContext = {
 export type TimelineItem = {
   status: Status;
 };
+
+export type InstanceInfo = {
+  // 공통 필드
+  uri: string;
+  title: string;
+  description?: string;
+  
+  // Mastodon 전용
+  max_toot_chars?: number;
+  
+  // Misskey 전용
+  maxNoteLength?: number;
+  
+  // 플랫폼 식별
+  platform: AccountPlatform;
+};
+
+export type CharacterCountStatus = "normal" | "warning" | "limit";
diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index 5b4626f..1e22ced 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, CustomEmoji, Status, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapNotificationToStatus, mapStatus } from "./mastodonMapper";
 
@@ -111,6 +111,67 @@ export class MastodonHttpClient implements MastodonApi {
     return mapCustomEmojis(data);
   }
 
+  async fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    // 먼저 v2 API를 시도
+    try {
+      const v2Response = await fetch(`${account.instanceUrl}/api/v2/instance`, {
+        headers: buildHeaders(account)
+      });
+      if (v2Response.ok) {
+        const v2Data = (await v2Response.json()) as Record<string, unknown>;
+        const configuration = v2Data.configuration as Record<string, unknown> || {};
+        const statuses = configuration.statuses as Record<string, unknown> || {};
+        
+        // v2 API에서 max_characters 가져오기, 없으면 v1 호환 필드 사용
+        const maxChars = typeof statuses.max_characters === "number" 
+          ? statuses.max_characters 
+          : typeof v2Data.max_toot_chars === "number" 
+            ? v2Data.max_toot_chars 
+            : 500;
+        
+        return {
+          uri: String(v2Data.uri || v2Data.domain || ""),
+          title: String(v2Data.title || ""),
+          description: v2Data.description ? String(v2Data.description) : undefined,
+          max_toot_chars: maxChars,
+          platform: "mastodon"
+        };
+      }
+    } catch {
+      // v2 API 실패 시 v1 API로 fallback
+    }
+
+    const v1Response = await fetch(`${account.instanceUrl}/api/v1/instance`, {
+      headers: buildHeaders(account)
+    });
+    if (!v1Response.ok) {
+      throw new Error("인스턴스 정보를 불러오지 못했습니다.");
+    }
+    const data = (await v1Response.json()) as Record<string, unknown>;
+    
+    // v1 API에서 configuration 확인 (이전 버전과의 호환성)
+    let maxChars = 500;
+    if (typeof data.max_toot_chars === "number") {
+      maxChars = data.max_toot_chars;
+    } else if (data.configuration && typeof data.configuration === "object") {
+      const config = data.configuration as Record<string, unknown>;
+      if (config.statuses && typeof config.statuses === "object") {
+        const statuses = config.statuses as Record<string, unknown>;
+        if (typeof statuses.max_characters === "number") {
+          maxChars = statuses.max_characters;
+        }
+      }
+    }
+    
+    return {
+      uri: String(data.uri || data.domain || ""),
+      title: String(data.title || ""),
+      description: data.description ? String(data.description) : undefined,
+      max_toot_chars: maxChars,
+      platform: "mastodon"
+    };
+  }
+
   async uploadMedia(account: Account, file: File): Promise<string> {
     const formData = new FormData();
     formData.append("file", file);
diff --git a/src/infra/MisskeyHttpClient.ts b/src/infra/MisskeyHttpClient.ts
index ff9f964..6316536 100644
--- a/src/infra/MisskeyHttpClient.ts
+++ b/src/infra/MisskeyHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, CustomEmoji, Status, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapMisskeyNotification, mapMisskeyStatusWithInstance } from "./misskeyMapper";
 
@@ -136,6 +136,27 @@ export class MisskeyHttpClient implements MastodonApi {
     return mapMisskeyEmojis(data);
   }
 
+  async fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    const response = await fetch(`${normalizeInstanceUrl(account.instanceUrl)}/api/meta`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(buildBody(account, {}))
+    });
+    if (!response.ok) {
+      throw new Error("인스턴스 정보를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as Record<string, unknown>;
+    return {
+      uri: String(data.uri || ""),
+      title: String(data.name || ""),
+      description: data.description ? String(data.description) : undefined,
+      maxNoteLength: typeof data.maxNoteLength === "number" ? data.maxNoteLength : 3000,
+      platform: "misskey"
+    };
+  }
+
   async uploadMedia(account: Account, file: File): Promise<string> {
     const formData = new FormData();
     formData.append("i", account.accessToken);
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index c9da4f5..a7eb1c0 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -1,4 +1,4 @@
-import type { Account, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 
@@ -28,6 +28,11 @@ export class UnifiedApiClient implements MastodonApi {
     return this.getClient(account).fetchCustomEmojis(account);
   }
 
+  fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    const client = this.getClient(account) as any;
+    return client.fetchInstanceInfo(account);
+  }
+
   uploadMedia(account: Account, file: File) {
     return this.getClient(account).uploadMedia(account, file);
   }
diff --git a/src/services/MastodonApi.ts b/src/services/MastodonApi.ts
index b2cc7e3..702a00c 100644
--- a/src/services/MastodonApi.ts
+++ b/src/services/MastodonApi.ts
@@ -1,4 +1,4 @@
-import type { Account, Status, TimelineType, Visibility } from "../domain/types";
+import type { Account, Status, TimelineType, Visibility, InstanceInfo } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 
 export type CreateStatusInput = {
@@ -21,4 +21,5 @@ export interface MastodonApi {
   unfavourite(account: Account, statusId: string): Promise<Status>;
   reblog(account: Account, statusId: string): Promise<Status>;
   unreblog(account: Account, statusId: string): Promise<Status>;
+  fetchInstanceInfo(account: Account): Promise<InstanceInfo>;
 }
diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index 49d77a3..5976ce5 100644
--- a/src/ui/components/ComposeBox.tsx
+++ b/src/ui/components/ComposeBox.tsx
@@ -1,6 +1,13 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Account, CustomEmoji, Visibility } from "../../domain/types";
 import type { MastodonApi } from "../../services/MastodonApi";
+import { 
+  calculateCharacterCount, 
+  getCharacterLimit, 
+  getCharacterCountStatus, 
+  getCharacterCountClassName,
+  getDefaultCharacterLimit 
+} from "../utils/characterCount";
 
 const VISIBILITY_KEY = "textodon.compose.visibility";
 
@@ -100,6 +107,10 @@ export const ComposeBox = ({
   const [recentByInstance, setRecentByInstance] = useState<Record<string, string[]>>({});
   const [expandedByInstance, setExpandedByInstance] = useState<Record<string, Set<string>>>({});
   const [recentOpen, setRecentOpen] = useState(true);
+  
+  // 문자 수 관련 상태
+  const [characterLimit, setCharacterLimit] = useState<number | null>(null);
+  const [instanceLoading, setInstanceLoading] = useState(false);
   const activeImage = useMemo(
     () => attachments.find((item) => item.id === activeImageId) ?? null,
     [attachments, activeImageId]
@@ -200,10 +211,56 @@ export const ComposeBox = ({
     localStorage.setItem(VISIBILITY_KEY, visibility);
   }, [visibility]);
 
+  // 계정 변경 시 인스턴스 정보 로드
+  useEffect(() => {
+    if (!account) {
+      setCharacterLimit(null);
+      return;
+    }
+    
+    const loadInstanceInfo = async () => {
+      try {
+        setInstanceLoading(true);
+        const instanceInfo = await api.fetchInstanceInfo(account);
+        const limit = getCharacterLimit(instanceInfo);
+        setCharacterLimit(limit);
+      } catch (error) {
+        console.error("인스턴스 정보 로드 실패:", error);
+        // fallback: 기본값 사용
+        const fallbackLimit = getDefaultCharacterLimit(account.platform);
+        setCharacterLimit(fallbackLimit);
+      } finally {
+        setInstanceLoading(false);
+      }
+    };
+    
+    loadInstanceInfo();
+  }, [account, api]);
+
+  // 현재 문자 수 계산
+  const currentCharCount = useMemo(() => {
+    if (!account) return 0;
+    const fullText = (cwEnabled ? cwText + "\n" : "") + text;
+    return calculateCharacterCount(fullText, account.platform);
+  }, [text, cwText, cwEnabled, account]);
+
+  // 문자 수 상태 계산
+  const charCountStatus = useMemo(() => {
+    if (!characterLimit) return "normal";
+    return getCharacterCountStatus(currentCharCount, characterLimit);
+  }, [currentCharCount, characterLimit]);
+
   const submitPost = async () => {
     if (!text.trim() || isSubmitting) {
       return;
     }
+
+    // 문자 수 제한 검사
+    if (characterLimit && currentCharCount > characterLimit) {
+      alert(`글자 수 제한(${characterLimit.toLocaleString()}자)을 초과했습니다.`);
+      return;
+    }
+
     setIsSubmitting(true);
     try {
       const ok = await onSubmit({
@@ -438,40 +495,68 @@ export const ComposeBox = ({
             />
           </div>
         ) : null}
-        <textarea
-          ref={textareaRef}
-          value={text}
-          onChange={(event) => setText(event.target.value)}
-          placeholder="지금 무슨 생각을 하고 있나요?"
-          rows={4}
-          onPaste={handlePaste}
-          disabled={isSubmitting}
-          onKeyDown={(event) => {
-            if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
-              event.preventDefault();
-              void submitPost();
-            }
-          }}
-        />
-        {attachments.length > 0 ? (
+        <div className="compose-input-container">
+          <textarea
+            ref={textareaRef}
+            value={text}
+            onChange={(event) => setText(event.target.value)}
+            placeholder="지금 무슨 생각을 하고 있나요?"
+            rows={4}
+            onPaste={handlePaste}
+            disabled={isSubmitting}
+            onKeyDown={(event) => {
+              if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                event.preventDefault();
+                void submitPost();
+              }
+            }}
+          />
           <div className="compose-attachments">
-            {attachments.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                className="attachment-thumb"
-                onClick={() => {
-                  setImageZoom(1);
-                  setImageOffset({ x: 0, y: 0 });
-                  setActiveImageId(item.id);
-                }}
-                aria-label="이미지 미리보기"
-              >
-                <img src={item.previewUrl} alt="선택한 이미지" loading="lazy" />
-              </button>
-            ))}
+            {/* 첨부된 이미지들과 이미지 추가 버튼 */}
+            <div className="compose-attachments-scroll">
+              {attachments.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className="attachment-thumb"
+                  onClick={() => {
+                    setImageZoom(1);
+                    setImageOffset({ x: 0, y: 0 });
+                    setActiveImageId(item.id);
+                  }}
+                  aria-label="이미지 미리보기"
+                >
+                  <img src={item.previewUrl} alt="선택한 이미지" loading="lazy" />
+                </button>
+              ))}
+              
+              {/* 이미지 추가 버튼 */}
+              <label className="file-button attachment-thumb" aria-label="이미지 추가">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
+                  <circle cx="9" cy="10" r="2" />
+                  <path d="M21 16l-5-5-4 4-2-2-5 5" />
+                </svg>
+                <input
+                  type="file"
+                  accept="image/*"
+                  multiple
+                  onChange={handleFilesSelected}
+                  disabled={isSubmitting}
+                />
+              </label>
+            </div>
+            
+            {/* 문자 수 표시 - 고정 위치 */}
+            {characterLimit && (
+              <div className="compose-attachments-character-count">
+                <span className={getCharacterCountClassName(charCountStatus)}>
+                  {currentCharCount.toLocaleString()} / {characterLimit.toLocaleString()}
+                </span>
+              </div>
+            )}
           </div>
-        ) : null}
+        </div>
         <div className="compose-actions">
           <select
             value={visibility}
@@ -484,6 +569,7 @@ export const ComposeBox = ({
               </option>
             ))}
           </select>
+          
           <div className="compose-actions-right">
             <button
               type="button"
@@ -509,20 +595,6 @@ export const ComposeBox = ({
             >
               CW
             </button>
-            <label className="file-button icon-button compose-icon-button" aria-label="이미지 추가">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
-                <circle cx="9" cy="10" r="2" />
-                <path d="M21 16l-5-5-4 4-2-2-5 5" />
-              </svg>
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={handleFilesSelected}
-                disabled={isSubmitting}
-              />
-            </label>
             <button
               type="submit"
               className="icon-button compose-icon-button"
diff --git a/src/ui/styles/base.css b/src/ui/styles/base.css
index c5b659a..21a4e30 100644
--- a/src/ui/styles/base.css
+++ b/src/ui/styles/base.css
@@ -1,8 +1,162 @@
 :root {
   color-scheme: light dark;
   font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
-  background: radial-gradient(circle at top left, #f0efe9, #f9f7f2 60%, #ffffff);
-  color: #1f1b16;
+  background: var(--page-background);
+  color: var(--color-text-primary);
+  --page-background: radial-gradient(circle at top left, #f0efe9, #f9f7f2 60%, #ffffff);
+  --color-text-primary: #1f1b16;
+  --color-text-strong: #1f1b16;
+  --color-text-muted: #6b5c4f;
+  --color-text-subtle: #8a6b58;
+  --color-text-faint: #7c6152;
+  --color-link: #3b5fa8;
+  --color-link-muted: #7c6152;
+  --color-link-accent: #6b5c4f;
+  --color-sidebar-description: #6b5c4f;
+  --color-sidebar-description-link: #3b5fa8;
+  --color-sidebar-link: #7c6152;
+  --color-sidebar-divider: #e2ddd5;
+  --color-brand-text: #6b5c4f;
+  --color-brand-text-mobile: #c4b6a6;
+  --color-readme-text: #6b5c4f;
+  --color-readme-link: #7c6152;
+  --color-readme-code-bg: #f5efe7;
+  --color-readme-code-border: #e2ddd5;
+  --color-oss-list: #6b5c4f;
+  --color-app-header-text: #5b4e43;
+  --color-back-link: #7c6152;
+  --color-panel-bg: #ffffffcc;
+  --color-panel-border: #e2ddd5;
+  --shadow-panel: 0 18px 40px rgba(67, 57, 45, 0.08);
+  --color-account-add-button-bg: #3b5fa8;
+  --color-account-add-button-text: #f2f6ff;
+  --color-account-add-panel-bg: #fffdfa;
+  --color-account-add-panel-border: #e2ddd5;
+  --color-account-add-panel-text: #1f1b16;
+  --shadow-account-add-panel: 0 18px 40px rgba(67, 57, 45, 0.12);
+  --color-account-selector-bg: #fffdfa;
+  --color-account-selector-border: #e2ddd5;
+  --shadow-account-selector: 0 18px 40px rgba(67, 57, 45, 0.12);
+  --color-account-selector-placeholder: #8a6b58;
+  --color-account-handle: #8a6b58;
+  --color-settings-item-border: #e2ddd5;
+  --color-settings-item-text: #6b5c4f;
+  --color-settings-select-bg: #ffffff;
+  --color-settings-select-border: #d8d1c7;
+  --color-settings-select-text: #1f1b16;
+  --color-settings-select-placeholder: #6b5c4f;
+  --color-action-bg: #3b5fa8;
+  --color-action-text: #f2f6ff;
+  --color-action-active-bg: #9db6e3;
+  --color-action-active-text: #1e2b45;
+  --color-action-ghost-text: #3b5fa8;
+  --color-action-danger-bg: #9a2e1f;
+  --color-action-danger-text: #fff6f0;
+  --color-action-danger-strong-text: #fffaf2;
+  --color-secondary-button-bg: #e1e7f4;
+  --color-secondary-button-text: #1e2b45;
+  --color-secondary-button-border: #d8d1c7;
+  --color-timeline-column-bg: #fffdfa;
+  --color-timeline-column-border: #e2ddd5;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 24px rgba(67, 57, 45, 0.06);
+  --color-overlay-backdrop: rgba(15, 13, 11, 0.12);
+  --color-settings-backdrop: rgba(15, 13, 11, 0.6);
+  --color-status-backdrop: rgba(15, 13, 11, 0.7);
+  --color-compose-busy-backdrop: rgba(15, 13, 11, 0.2);
+  --color-image-modal-backdrop: rgba(15, 13, 11, 0.7);
+  --color-status-modal-bg: #fffdfa;
+  --color-status-modal-border: #e2ddd5;
+  --shadow-status-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
+  --color-status-modal-title: #1f1b16;
+  --color-status-modal-divider: #e2ddd5;
+  --color-section-menu-bg: #fffdfa;
+  --color-section-menu-border: #e2ddd5;
+  --color-section-menu-text: #1f1b16;
+  --shadow-section-menu: 0 18px 40px rgba(67, 57, 45, 0.12);
+  --color-section-menu-danger: #9a2e1f;
+  --color-status-bg: #fffdfa;
+  --color-status-border: #eee6db;
+  --color-status-header: #6b5c4f;
+  --color-status-header-strong: var(--color-status-header);
+  --color-status-meta: #6b5c4f;
+  --color-status-time: #8a6b58;
+  --color-status-link: #7c6152;
+  --color-status-warning-bg: #f5efe7;
+  --color-status-warning-text: #6b5c4f;
+  --color-link-preview-bg: #fffdfa;
+  --color-link-preview-border: #e2ddd5;
+  --color-link-preview-text: #6b5c4f;
+  --color-link-preview-strong: #1f1b16;
+  --color-link-preview-url: #7c6152;
+  --color-reaction-text: #231b16;
+  --color-reaction-border: #8a7b6a;
+  --color-reaction-active-bg: #3f3731;
+  --color-reaction-active-border: #2c2621;
+  --color-reaction-active-text: #f5efe7;
+  --color-file-button-bg: #e1e7f4;
+  --color-file-button-text: #1e2b45;
+  --color-emoji-panel-bg: #fffdfa;
+  --color-emoji-panel-border: #e2ddd5;
+  --color-emoji-toggle-bg: #f3efe7;
+  --color-emoji-toggle-text: #1e2b45;
+  --color-emoji-toggle-border: #e2ddd5;
+  --color-emoji-count-bg: #d7e0f2;
+  --color-emoji-count-text: #1e2b45;
+  --color-emoji-button-bg: #f3f0e9;
+  --color-emoji-button-border: #e2ddd5;
+  --color-emoji-empty-text: #6c5c4b;
+  --color-compose-busy-bg: #fffdfa;
+  --color-compose-busy-border: #e2ddd5;
+  --color-compose-busy-text: #6b5c4f;
+  --shadow-compose-busy: 0 12px 24px rgba(67, 57, 45, 0.16);
+  --color-compose-busy-spinner-border: #d8d1c7;
+  --color-compose-busy-spinner-active: #3b5fa8;
+  --color-boosted-by: #7c6152;
+  --color-notification-actor: #7c6152;
+  --color-reply-info: #7c6152;
+  --color-input-bg: #ffffff;
+  --color-input-border: #d8d1c7;
+  --color-input-text: #1f1b16;
+  --color-input-placeholder: #6b5c4f;
+  --color-compose-input-bg: #fffdfa;
+  --color-attachments-bg: #f9f6f2;
+  --color-attachments-border: #e8dfd4;
+  --color-attachment-thumb-bg: #fffdfa;
+  --color-attachment-thumb-border: #e2ddd5;
+  --color-attachment-add-border: #a89b8a;
+  --color-attachment-add-text: #6b5c4f;
+  --color-avatar-bg: #f5efe7;
+  --color-avatar-border: #e2ddd5;
+  --color-avatar-fallback: #c9b9a6;
+  --color-error-text: #9a2e1f;
+  --color-empty-text: #8a6b58;
+  --color-hint-text: #7c6152;
+  --color-replying-bg: #f5efe7;
+  --color-thread-bg: #faf9f6;
+  --color-thread-border: #f0ebe3;
+  --color-thread-error-bg: #fdf2f0;
+  --color-thread-error-border: #f5d6d0;
+  --color-thread-error-text: #9a2e1f;
+  --color-switch-track: #d8d1c7;
+  --color-switch-thumb: #ffffff;
+  --color-switch-on: #2e6b4f;
+  --color-character-count: #6b7280;
+  --color-character-count-normal: #6b7280;
+  --color-character-count-warning: #f59e0b;
+  --color-character-count-limit: #ef4444;
+  --color-image-modal-border: #1f1b16;
+  --color-image-modal-bg: #0f0d0b;
+  --color-confirm-modal-bg: #fffdfa;
+  --color-confirm-modal-border: #e2ddd5;
+  --color-confirm-status-bg: var(--color-status-bg);
+  --color-confirm-status-border: var(--color-status-border);
+  --color-delete-button-bg: #9a2e1f;
+  --color-delete-button-text: #fffaf2;
+  --color-image-modal-delete-bg: #9a2e1f;
+  --color-image-modal-delete-text: #fffaf2;
+  --color-license-bg: #f5efe7;
+  --color-license-border: #e2ddd5;
+  --color-license-text: #1f1b16;
   --scrollbar-thumb: #c8b9a5;
   --scrollbar-thumb-dark: #3b342d;
   --timeline-column-width: 440px;
@@ -20,22 +174,6 @@
   color-scheme: dark;
 }
 
-:root[data-theme="christmas"] {
-  background: radial-gradient(circle at top left, #f6efe6, #fff5f0 55%, #ffffff);
-  color: #2d1a16;
-}
-
-:root[data-theme="sky-pink"] {
-  background: radial-gradient(circle at top left, #e9f6ff, #fceaf3 55%, #ffffff);
-  color: #1d2a3a;
-  --scrollbar-thumb: #b7cfe6;
-}
-
-:root[data-theme="monochrome"] {
-  background: radial-gradient(circle at top left, #ffffff, #f7f7f7 55%, #f2f2f2);
-  color: #111111;
-  --scrollbar-thumb: #4a4a4a;
-}
 
 :root[data-section-size="small"] {
   --timeline-column-width: 440px;
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index d9e4427..87d13a3 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1,11 +1,11 @@
 .sidebar-description {
   margin: 0 0 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-sidebar-description);
 }
 
 .sidebar-description a {
-  color: #3b5fa8;
+  color: var(--color-sidebar-description-link);
   text-decoration: underline;
 }
 
@@ -45,12 +45,12 @@
 
 .sidebar-divider {
   height: 1px;
-  background: #e2ddd5;
+  background: var(--color-sidebar-divider);
   margin: 12px 0;
 }
 
 .sidebar-links a {
-  color: #7c6152;
+  color: var(--color-sidebar-link);
   font-size: 13px;
   text-decoration: none;
 }
@@ -66,7 +66,7 @@
 .readme-text {
   font-size: 12px;
   line-height: 1.5;
-  color: #6b5c4f;
+  color: var(--color-readme-text);
 }
 
 .readme-text h1,
@@ -86,19 +86,19 @@
 }
 
 .readme-text a {
-  color: #7c6152;
+  color: var(--color-readme-link);
   text-decoration: underline;
 }
 
 .readme-text code {
-  background: #f5efe7;
+  background: var(--color-readme-code-bg);
   padding: 2px 4px;
   border-radius: 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 .readme-text pre {
-  background: #f5efe7;
+  background: var(--color-readme-code-bg);
   padding: 12px;
   border-radius: 12px;
   overflow: auto;
@@ -116,37 +116,38 @@
   max-width: calc(50% - 4px);
   height: auto;
   border-radius: 12px;
-  border: 1px solid #e2ddd5;
-  background: #f5efe7;
+  border: 1px solid var(--color-readme-code-border);
+  background: var(--color-readme-code-bg);
 }
 
 .license {
   white-space: pre-wrap;
   font-size: 12px;
-  background: #f5efe7;
+  background: var(--color-license-bg);
   border-radius: 12px;
   padding: 12px;
-  border: 1px solid #e2ddd5;
+  border: 1px solid var(--color-license-border);
+  color: var(--color-license-text);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 .oss-list {
   margin: 0;
   padding-left: 18px;
-  color: #6b5c4f;
+  color: var(--color-oss-list);
 }
 
 .app-header p {
   margin: 4px 0 0;
-  color: #5b4e43;
+  color: var(--color-app-header-text);
 }
 
 .account-add-button {
   width: 100%;
   height: 32px;
   border-radius: 10px;
-  background: #3b5fa8;
-  color: #f2f6ff;
+  background: var(--color-account-add-button-bg);
+  color: var(--color-account-add-button-text);
   font-size: 14px;
   line-height: 1;
   padding: 0 12px;
@@ -168,11 +169,12 @@
 .account-add-panel {
   width: 100%;
   max-width: 100%;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-account-add-panel-bg);
+  border: 1px solid var(--color-account-add-panel-border);
   border-radius: 12px;
   padding: 12px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.12);
+  box-shadow: var(--shadow-account-add-panel);
+  color: var(--color-account-add-panel-text);
   margin-top: 8px;
 }
 
@@ -185,7 +187,7 @@
 .settings-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.6);
+  background: var(--color-settings-backdrop);
 }
 
 .settings-modal-content {
@@ -220,7 +222,7 @@
   align-items: center;
   gap: 12px;
   padding: 10px 0;
-  border-top: 1px solid #e2ddd5;
+  border-top: 1px solid var(--color-settings-item-border);
 }
 
 .settings-item:first-of-type {
@@ -231,21 +233,23 @@
 .settings-item p {
   margin: 4px 0 0;
   font-size: 12px;
-  color: #6b5c4f;
+  color: var(--color-settings-item-text);
 }
 
 .settings-item select {
   min-width: 120px;
   height: 32px;
   border-radius: 8px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-settings-select-border);
+  background: var(--color-settings-select-bg);
+  color: var(--color-settings-select-text);
   padding: 0 10px;
   font-family: inherit;
 }
 
 .settings-danger-button {
-  background: #9a2e1f;
-  color: #fff6f0;
+  background: var(--color-action-danger-bg);
+  color: var(--color-action-danger-text);
 }
 
 .settings-item .account-add-wrapper {
@@ -310,8 +314,8 @@
   height: 32px;
   border-radius: 10px;
   overflow: hidden;
-  background: #f5efe7;
-  border: 1px solid #e2ddd5;
+  background: var(--color-avatar-bg);
+  border: 1px solid var(--color-avatar-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -327,17 +331,17 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #c9b9a6;
+  background: var(--color-avatar-fallback);
 }
 
 .account-handle {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-handle);
 }
 
 .account-list .ghost {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-handle);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -383,8 +387,8 @@
   padding: 10px 14px;
   height: 48px;
   border-radius: 12px;
-  border: 1px solid #e2ddd5;
-  background: #fffdfa;
+  border: 1px solid var(--color-account-selector-border);
+  background: var(--color-account-selector-bg);
   width: 100%;
 }
 
@@ -417,13 +421,13 @@
 }
 
 .account-selector-placeholder {
-  color: #8a6b58;
+  color: var(--color-account-selector-placeholder);
   font-size: 13px;
 }
 
 .account-selector-caret {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-selector-placeholder);
 }
 
 .account-selector-dropdown {
@@ -432,11 +436,11 @@
   left: 0;
   right: 0;
   z-index: 20;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-account-selector-bg);
+  border: 1px solid var(--color-account-selector-border);
   border-radius: 12px;
   padding: 6px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.12);
+  box-shadow: var(--shadow-account-selector);
 }
 
 .account-selector .account-list {
@@ -459,7 +463,7 @@
 }
 
 .account-form-divider {
-  border-top: 1px dashed #e2ddd5;
+  border-top: 1px dashed var(--color-settings-item-border);
   padding-top: 14px;
 }
 
@@ -468,17 +472,46 @@
   padding: 8px 10px;
   margin-top: 6px;
   border-radius: 8px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-input-bg);
+  color: var(--color-input-text);
   font-family: inherit;
 }
 
-.compose-form textarea {
+.compose-input-container {
+  position: relative;
   width: 100%;
-  padding: 12px;
   border-radius: 12px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-compose-input-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+.compose-input-container textarea {
+  flex: 1;
+  width: 100%;
+  padding: 12px;
+  border: none !important;
+  border-radius: 0 !important;
   font-family: inherit;
-  resize: vertical;
+  resize: vertical !important;
+  background: transparent !important;
+  min-height: 80px;
+  color: var(--color-input-text) !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.compose-input-container textarea::placeholder {
+  color: var(--color-input-placeholder);
+  opacity: 0.6;
+}
+
+.account-form input::placeholder,
+.compose-form textarea::placeholder,
+.compose-cw input::placeholder {
+  color: var(--color-input-placeholder);
 }
 
 .compose-box {
@@ -493,7 +526,9 @@
   width: 100%;
   padding: 8px 10px;
   border-radius: 10px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-input-bg);
+  color: var(--color-input-text);
   font-family: inherit;
 }
 
@@ -514,15 +549,17 @@
 
 .compose-actions select {
   border-radius: 8px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-input-bg);
+  color: var(--color-input-text);
   padding: 6px 10px;
   font-family: inherit;
 }
 
 .compose-icon-button {
-  background: #e1e7f4;
-  color: #1e2b45;
-  border: 1px solid #d8d1c7;
+  background: var(--color-secondary-button-bg);
+  color: var(--color-secondary-button-text);
+  border: 1px solid var(--color-secondary-button-border);
   width: 34px;
   height: 34px;
 }
@@ -533,9 +570,9 @@
 
 .compose-emoji-panel {
   margin-top: 12px;
-  border: 1px solid #e2ddd5;
+  border: 1px solid var(--color-emoji-panel-border);
   border-radius: 12px;
-  background: #fffdfa;
+  background: var(--color-emoji-panel-bg);
   padding: 10px;
   display: flex;
   flex-direction: column;
@@ -556,7 +593,7 @@
 .compose-busy-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.2);
+  background: var(--color-compose-busy-backdrop);
   border-radius: 12px;
 }
 
@@ -568,19 +605,19 @@
   gap: 8px;
   padding: 6px 12px;
   border-radius: 999px;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
-  color: #6b5c4f;
+  background: var(--color-compose-busy-bg);
+  border: 1px solid var(--color-compose-busy-border);
+  color: var(--color-compose-busy-text);
   font-size: 12px;
-  box-shadow: 0 12px 24px rgba(67, 57, 45, 0.16);
+  box-shadow: var(--shadow-compose-busy);
 }
 
 .compose-busy-spinner {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  border: 2px solid #d8d1c7;
-  border-top-color: #3b5fa8;
+  border: 2px solid var(--color-compose-busy-spinner-border);
+  border-top-color: var(--color-compose-busy-spinner-active);
   animation: compose-spin 0.8s linear infinite;
 }
 
@@ -595,10 +632,30 @@
 
 .compose-emoji-empty {
   font-size: 12px;
-  color: #6c5c4b;
+  color: var(--color-emoji-empty-text);
   margin: 0;
 }
 
+.compose-character-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-character-count);
+  margin: 0 8px;
+}
+
+.compose-character-count-normal {
+  color: var(--color-character-count-normal);
+}
+
+.compose-character-count-warning {
+  color: var(--color-character-count-warning);
+}
+
+.compose-character-count-limit {
+  color: var(--color-character-count-limit);
+  font-weight: 600;
+}
+
 .compose-emoji-category {
   display: flex;
   flex-direction: column;
@@ -606,9 +663,9 @@
 }
 
 .compose-emoji-category-toggle {
-  background: #f3efe7;
-  color: #1e2b45;
-  border: 1px solid #e2ddd5;
+  background: var(--color-emoji-toggle-bg);
+  color: var(--color-emoji-toggle-text);
+  border: 1px solid var(--color-emoji-toggle-border);
   border-radius: 10px;
   padding: 6px 10px;
   display: flex;
@@ -621,8 +678,8 @@
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 999px;
-  background: #d7e0f2;
-  color: #1e2b45;
+  background: var(--color-emoji-count-bg);
+  color: var(--color-emoji-count-text);
 }
 
 .compose-emoji-grid {
@@ -636,8 +693,8 @@
   height: 36px;
   padding: 4px;
   border-radius: 8px;
-  background: #f3f0e9;
-  border: 1px solid #e2ddd5;
+  background: var(--color-emoji-button-bg);
+  border: 1px solid var(--color-emoji-button-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -651,8 +708,8 @@
 
 button {
   font-family: inherit;
-  background: #3b5fa8;
-  color: #f2f6ff;
+  background: var(--color-action-bg);
+  color: var(--color-action-text);
   border: none;
   border-radius: 10px;
   padding: 8px 12px;
@@ -701,8 +758,8 @@ button {
 }
 
 button.is-active {
-  background: #9db6e3;
-  color: #1e2b45;
+  background: var(--color-action-active-bg);
+  color: var(--color-action-active-text);
 }
 
 button:disabled {
@@ -712,12 +769,12 @@ button:disabled {
 
 button.ghost {
   background: none;
-  color: #3b5fa8;
+  color: var(--color-action-ghost-text);
 }
 
 .text-link {
   background: none;
-  color: #3b5fa8;
+  color: var(--color-link);
   border: none;
   padding: 0;
   font: inherit;
@@ -773,12 +830,12 @@ button.ghost {
   flex-direction: column;
   gap: 12px;
   position: relative;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-timeline-column-bg);
+  border: 1px solid var(--color-timeline-column-border);
   border-radius: 14px;
   padding: 12px;
   min-height: 90vh;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 24px rgba(67, 57, 45, 0.06);
+  box-shadow: var(--shadow-timeline-column);
   scroll-snap-align: start;
 }
 
@@ -845,7 +902,7 @@ button.ghost {
 .overlay-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(15, 13, 11, 0.12);
+  background: var(--color-overlay-backdrop);
   z-index: 15;
 }
 
@@ -858,11 +915,11 @@ button.ghost {
   top: calc(100% + 6px);
   right: 0;
   min-width: 160px;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-section-menu-bg);
+  border: 1px solid var(--color-section-menu-border);
   border-radius: 12px;
   padding: 6px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.12);
+  box-shadow: var(--shadow-section-menu);
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -871,7 +928,7 @@ button.ghost {
 
 .section-menu-panel button {
   background: none;
-  color: #1f1b16;
+  color: var(--color-section-menu-text);
   padding: 6px 8px;
   text-align: left;
   font-size: 12px;
@@ -879,7 +936,7 @@ button.ghost {
 }
 
 .section-menu-panel .danger {
-  color: #9a2e1f;
+  color: var(--color-section-menu-danger);
   font-weight: 600;
 }
 
@@ -959,8 +1016,8 @@ button.ghost {
 .status {
   padding: 14px;
   border-radius: 12px;
-  border: 1px solid #eee6db;
-  background: #fffdfa;
+  border: 1px solid var(--color-status-border);
+  background: var(--color-status-bg);
 }
 
 .status header {
@@ -969,7 +1026,15 @@ button.ghost {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
+}
+
+.status header strong {
+  color: var(--color-status-header-strong);
+}
+
+.status header span {
+  color: var(--color-status-meta);
 }
 
 .status-header-main {
@@ -1025,8 +1090,8 @@ button.ghost {
   height: 36px;
   border-radius: 10px;
   overflow: hidden;
-  background: #f5efe7;
-  border: 1px solid #e2ddd5;
+  background: var(--color-avatar-bg);
+  border: 1px solid var(--color-avatar-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1043,7 +1108,7 @@ button.ghost {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #c9b9a6;
+  background: var(--color-avatar-fallback);
 }
 
 .status-header {
@@ -1052,7 +1117,7 @@ button.ghost {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
 }
 
 .status-header div {
@@ -1087,7 +1152,7 @@ button.ghost {
 }
 
 .time-link {
-  color: inherit;
+  color: var(--color-status-meta);
   text-decoration: none;
 }
 
@@ -1117,7 +1182,7 @@ button.ghost {
 .status-time {
   margin-top: 10px;
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-status-time);
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1128,7 +1193,7 @@ button.ghost {
 }
 
 .status-time[role="button"]:hover {
-  color: #3b5fa8;
+  color: var(--color-link);
 }
 
 .status-time a {
@@ -1151,16 +1216,16 @@ button.ghost {
   padding: 6px 8px;
   border-radius: 12px;
   background: transparent;
-  color: #231b16;
-  border: 1px solid #8a7b6a;
+  color: var(--color-reaction-text);
+  border: 1px solid var(--color-reaction-border);
   font-size: 13px;
   line-height: 1.2;
 }
 
 .status-reaction.is-active {
-  background: #3f3731;
-  border-color: #2c2621;
-  color: #f5efe7;
+  background: var(--color-reaction-active-bg);
+  border-color: var(--color-reaction-active-border);
+  color: var(--color-reaction-active-text);
 }
 
 .status-reaction-emoji {
@@ -1199,7 +1264,7 @@ button.ghost {
 }
 
 .status-text a {
-  color: #7c6152;
+  color: var(--color-status-link);
   text-decoration: underline;
   word-break: break-word;
 }
@@ -1211,14 +1276,14 @@ button.ghost {
   gap: 12px;
   padding: 10px 12px;
   border-radius: 10px;
-  background: #f5efe7;
+  background: var(--color-status-warning-bg);
   margin-top: 10px;
 }
 
 .status-warning-text {
   margin: 0;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-warning-text);
 }
 
 .status-warning button {
@@ -1235,10 +1300,10 @@ button.ghost {
   align-items: center;
   text-decoration: none;
   color: inherit;
-  border: 1px solid #e2ddd5;
+  border: 1px solid var(--color-link-preview-border);
   border-radius: 14px;
   overflow: hidden;
-  background: #fffdfa;
+  background: var(--color-link-preview-bg);
 }
 
 .link-preview.no-image {
@@ -1262,17 +1327,17 @@ button.ghost {
   flex-direction: column;
   gap: 6px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-link-preview-text);
 }
 
 .link-preview-body strong {
   font-size: 14px;
-  color: #1f1b16;
+  color: var(--color-link-preview-strong);
 }
 
 .link-preview-url {
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-link-preview-url);
   word-break: break-all;
 }
 
@@ -1304,7 +1369,7 @@ button.ghost {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #9a2e1f;
+  background: var(--color-delete-button-bg);
 }
 
 .delete-button img {
@@ -1313,25 +1378,78 @@ button.ghost {
 }
 
 .attachment-thumb {
-  border: 1px solid #e2ddd5;
+  border: 1px solid var(--color-attachment-thumb-border);
   border-radius: 10px;
   padding: 0;
-  background: #fffdfa;
+  background: var(--color-attachment-thumb-bg);
   width: 32px;
   height: 32px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .compose-attachments {
   display: flex;
   gap: 8px;
-  margin-top: 10px;
-  flex-wrap: wrap;
+  padding: 8px 12px 12px;
+  background: var(--color-attachments-bg);
+  border-top: 1px solid var(--color-attachments-border);
+  border-radius: 0 0 12px 12px;
+  align-items: center;
+  min-height: 56px; /* 32px 이미지 썸네일 + 패딩과 동일 */
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.compose-attachments-scroll {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+  min-width: 0; /* 플렉스 아이템이 넘치도록 */
+  /* 스크롤바 숨기기 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.compose-attachments-scroll::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
 }
 
+.compose-attachments-character-count {
+  font-size: 12px;
+  font-weight: 500;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* 첨부 영역 내의 이미지 추가 버튼 */
+.compose-attachments .file-button.attachment-thumb {
+  background: transparent;
+  border: 2px dashed var(--color-attachment-add-border);
+  color: var(--color-attachment-add-text);
+  flex-shrink: 0;
+}
+
+.compose-attachments .file-button.attachment-thumb svg {
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* 스크롤바 스타일 없음 - 사용자 요청 */
+
 .file-button {
-  background: #e1e7f4;
-  color: #1e2b45;
+  background: var(--color-file-button-bg);
+  color: var(--color-file-button-text);
   border-radius: 10px;
   padding: 0;
   cursor: pointer;
@@ -1364,7 +1482,7 @@ button.ghost {
 .image-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.7);
+  background: var(--color-image-modal-backdrop);
 }
 
 .image-modal-content {
@@ -1384,8 +1502,8 @@ button.ghost {
 }
 
 .image-modal-delete {
-  background: #9a2e1f;
-  color: #fffaf2;
+  background: var(--color-image-modal-delete-bg);
+  color: var(--color-image-modal-delete-text);
 }
 
 .image-modal-content img {
@@ -1394,8 +1512,8 @@ button.ghost {
   max-height: 80vh;
   object-fit: contain;
   border-radius: 16px;
-  border: 1px solid #1f1b16;
-  background: #0f0d0b;
+  border: 1px solid var(--color-image-modal-border);
+  background: var(--color-image-modal-bg);
   transform-origin: center;
   cursor: grab;
 }
@@ -1426,8 +1544,8 @@ button.ghost {
   width: min(92vw, 600px);
   max-height: 80vh;
   overflow: auto;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-confirm-modal-bg);
+  border: 1px solid var(--color-confirm-modal-border);
   border-radius: 16px;
   padding: 16px;
   display: flex;
@@ -1445,6 +1563,9 @@ button.ghost {
 
 .confirm-status {
   padding: 14px;
+  background: var(--color-confirm-status-bg);
+  border: 1px solid var(--color-confirm-status-border);
+  border-radius: 12px;
 }
 
 .confirm-actions {
@@ -1460,7 +1581,7 @@ button.ghost {
 
 .confirm-actions .delete-button {
   width: auto;
-  color: #fffaf2;
+  color: var(--color-delete-button-text);
 }
 
 .status-modal {
@@ -1475,7 +1596,7 @@ button.ghost {
 .status-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.7);
+  background: var(--color-status-backdrop);
 }
 
 .status-modal-content {
@@ -1484,13 +1605,13 @@ button.ghost {
   width: min(92vw, 600px);
   max-height: 80vh;
   overflow: hidden;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-status-modal-bg);
+  border: 1px solid var(--color-status-modal-border);
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   margin: 20px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-status-modal);
 }
 
 .status-modal-header {
@@ -1498,13 +1619,14 @@ button.ghost {
   justify-content: space-between;
   align-items: center;
   padding: 16px 16px 12px;
-  border-bottom: 1px solid #e2ddd5;
+  border-bottom: 1px solid var(--color-status-modal-divider);
 }
 
 .status-modal-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  color: var(--color-status-modal-title);
 }
 
 .status-modal-header-actions {
@@ -1518,14 +1640,14 @@ button.ghost {
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
 }
 
 .thread-loading-spinner {
   width: 12px;
   height: 12px;
-  border: 1.5px solid #d8d1c7;
-  border-top-color: #3b5fa8;
+  border: 1.5px solid var(--color-input-border);
+  border-top-color: var(--color-action-bg);
   border-radius: 50%;
   animation: thread-loading-spin 0.8s linear infinite;
 }
@@ -1548,7 +1670,7 @@ button.ghost {
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-boosted-by);
   margin-bottom: 8px;
 }
 
@@ -1562,7 +1684,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-notification-actor);
   margin-bottom: 8px;
 }
 
@@ -1578,7 +1700,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-reply-info);
   margin-bottom: 8px;
 }
 
@@ -1599,7 +1721,7 @@ button.ghost {
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  background: #d8d1c7;
+  background: var(--color-switch-track);
   transition: background 0.2s ease;
 }
 
@@ -1609,14 +1731,14 @@ button.ghost {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--color-switch-thumb);
   top: 3px;
   left: 3px;
   transition: transform 0.2s ease;
 }
 
 .switch input:checked + .slider {
-  background: #2e6b4f;
+  background: var(--color-switch-on);
 }
 
 .switch input:checked + .slider::before {
@@ -1629,17 +1751,17 @@ button.ghost {
 }
 
 .error {
-  color: #9a2e1f;
+  color: var(--color-error-text);
   font-size: 13px;
 }
 
 .empty {
-  color: #8a6b58;
+  color: var(--color-empty-text);
   font-size: 13px;
 }
 
 .hint {
-  color: #7c6152;
+  color: var(--color-hint-text);
   font-size: 12px;
   margin-top: 12px;
 }
@@ -1648,7 +1770,7 @@ button.ghost {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #f5efe7;
+  background: var(--color-replying-bg);
   border-radius: 10px;
   padding: 8px 12px;
   margin-bottom: 12px;
@@ -1668,7 +1790,7 @@ button.ghost {
 .mobile-menu-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.6);
+  background: var(--color-settings-backdrop);
 }
 
 .mobile-menu-panel {
@@ -1746,8 +1868,8 @@ button.ghost {
 .thread-item.thread-descendant .status {
   padding: 10px;
   border-radius: 10px;
-  border: 1px solid #f0ebe3;
-  background: #faf9f6;
+  border: 1px solid var(--color-thread-border);
+  background: var(--color-thread-bg);
 }
 
 /* 스레드 커넥터 불필요하여 제거 */
@@ -1772,9 +1894,9 @@ button.ghost {
 }
 
 .thread-error {
-  color: #9a2e1f;
-  background: #fdf2f0;
-  border: 1px solid #f5d6d0;
+  color: var(--color-thread-error-text);
+  background: var(--color-thread-error-bg);
+  border: 1px solid var(--color-thread-error-border);
 }
 
 /* 스레드 아이템 내부의 액션 버튼들은 작게 표시 */
diff --git a/src/ui/styles/layout.css b/src/ui/styles/layout.css
index 126f850..c44aa66 100644
--- a/src/ui/styles/layout.css
+++ b/src/ui/styles/layout.css
@@ -51,7 +51,7 @@
 .brand-text p {
   margin: 0;
   font-size: 11px;
-  color: #6b5c4f;
+  color: var(--color-brand-text);
 }
 
 .brand + .sidebar-description {
@@ -67,7 +67,7 @@
 
 .back-link {
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-back-link);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
@@ -99,11 +99,11 @@ aside {
 }
 
 .panel {
-  background: #ffffffcc;
-  border: 1px solid #e2ddd5;
+  background: var(--color-panel-bg);
+  border: 1px solid var(--color-panel-border);
   border-radius: 16px;
   padding: 16px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.08);
+  box-shadow: var(--shadow-panel);
 }
 
 .panel h2 {
@@ -156,7 +156,7 @@ aside {
   }
 
   .brand-text p {
-    color: #c4b6a6;
+    color: var(--color-brand-text-mobile);
   }
 
   .timeline-column {
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index e56fea0..7a4ba4b 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -1,3927 +1,2 @@
-:root[data-theme="christmas"] .sidebar-description {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .brand-text p {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .sidebar-description a {
-  color: #b43b3b;
-}
-
-:root[data-theme="christmas"] .sidebar-links a {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .sidebar-divider {
-  background: #ead7cc;
-}
-
-:root[data-theme="christmas"] .settings-modal-backdrop {
-  background: rgba(32, 16, 15, 0.65);
-}
-
-:root[data-theme="christmas"] .status-modal-backdrop {
-  background: rgba(32, 16, 15, 0.7);
-}
-
-:root[data-theme="christmas"] .status-modal-content {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 20px 60px rgba(134, 40, 40, 0.15);
-}
-
-:root[data-theme="christmas"] .status-modal-header {
-  border-bottom: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-modal-title {
-  color: #5b1f1f;
-}
-
-
-
-:root[data-theme="christmas"] .overlay-backdrop,
-body[data-theme="christmas"] .overlay-backdrop {
-  background: rgba(91, 31, 31, 0.12);
-}
-
-:root[data-theme="christmas"] .settings-item {
-  border-top: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .settings-item p {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .panel {
-  border: 1px solid #e2cfc4;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.08);
-}
-
-:root[data-theme="christmas"] .account-add-button {
-  background: #2e6b4f;
-  color: #f4fff7;
-}
-
-:root[data-theme="christmas"] .account-add-panel {
-  background: rgba(255, 247, 242, 0.92);
-  color: #5b1f1f;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .status-avatar {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-avatar-fallback {
-  background: #d4b2a2;
-}
-
-:root[data-theme="christmas"] .account-selector-summary {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .account-selector-dropdown {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .account-selector-placeholder,
-:root[data-theme="christmas"] .account-selector-caret {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .account-handle {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] button {
-  background: #b43b3b;
-  color: #fff4f4;
-}
-
-:root[data-theme="christmas"] .settings-danger-button {
-  background: #8f2f2f;
-  color: #fff1f1;
-}
-
-:root[data-theme="christmas"] button.is-active {
-  background: #e4b46b;
-  color: #3d2a12;
-}
-
-:root[data-theme="christmas"] button.ghost {
-  color: #8f2f2f;
-}
-
-:root[data-theme="christmas"] .text-link,
-body[data-theme="christmas"] .text-link {
-  background: none;
-}
-
-:root[data-theme="christmas"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="christmas"] .section-menu-panel {
-  background: rgba(255, 247, 242, 0.92);
-  color: #5b1f1f;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .section-menu-panel button,
-body[data-theme="christmas"] .section-menu-panel button {
-  background: none;
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .timeline-column {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(134, 40, 40, 0.06);
-}
-
-:root[data-theme="christmas"] .status {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .status header {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .status header strong {
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .status header span,
-:root[data-theme="christmas"] .time-link {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-time {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-warning,
-body[data-theme="christmas"] .status-warning {
-  background: #f3e4dc;
-}
-
-:root[data-theme="christmas"] .status-warning-text,
-body[data-theme="christmas"] .status-warning-text {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .link-preview {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .link-preview-body {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .link-preview-body strong {
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .link-preview-url {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-text a {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-reaction {
-  color: #5b1f1f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-reaction.is-active {
-  background: #7b3f3f;
-  border-color: #5b1f1f;
-  color: #fff1f1;
-}
-
-:root[data-theme="christmas"] .file-button {
-  background: #f3e4dc;
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .compose-icon-button,
-body[data-theme="christmas"] .compose-icon-button {
-  background: #f3e4dc;
-  color: #7b3f3f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-panel {
-  background: #fff7f2;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-category-toggle {
-  background: #f3e4dc;
-  color: #7b3f3f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-count {
-  background: #ead7cc;
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .compose-emoji-button {
-  background: #f3e4dc;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-empty {
-  color: #a36a6a;
-}
-
-:root[data-theme="christmas"] .compose-busy-backdrop {
-  background: rgba(32, 16, 15, 0.25);
-}
-
-:root[data-theme="christmas"] .compose-busy-content {
-  background: #fff7f2;
-  border-color: #ead7cc;
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .compose-busy-spinner {
-  border-color: #ead7cc;
-  border-top-color: #b43b3b;
-}
-
-:root[data-theme="christmas"] .boosted-by,
-:root[data-theme="christmas"] .notification-actor {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .reply-info {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .account-form input,
-:root[data-theme="christmas"] .compose-form textarea,
-:root[data-theme="christmas"] .compose-cw input,
-:root[data-theme="christmas"] .compose-actions select,
-:root[data-theme="christmas"] .settings-item select {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .account-form input::placeholder,
-:root[data-theme="christmas"] .compose-form textarea::placeholder,
-:root[data-theme="christmas"] .compose-cw input::placeholder {
-  color: #a36a6a;
-}
-
-:root[data-theme="sky-pink"] .sidebar-description {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .brand-text p {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .sidebar-description a {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .sidebar-links a {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .sidebar-divider {
-  background: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .settings-modal-backdrop {
-  background: rgba(29, 51, 74, 0.6);
-}
-
-:root[data-theme="sky-pink"] .status-modal-backdrop {
-  background: rgba(29, 51, 74, 0.7);
-}
-
-:root[data-theme="sky-pink"] .status-modal-content {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 20px 60px rgba(58, 118, 185, 0.15);
-}
-
-:root[data-theme="sky-pink"] .status-modal-header {
-  border-bottom: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-modal-title {
-  color: #2b4f7d;
-}
-
-
-
-:root[data-theme="sky-pink"] .overlay-backdrop,
-body[data-theme="sky-pink"] .overlay-backdrop {
-  background: rgba(74, 139, 216, 0.14);
-}
-
-:root[data-theme="sky-pink"] .settings-item {
-  border-top: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .settings-item p {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .panel {
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.12);
-}
-
-:root[data-theme="sky-pink"] .account-add-button {
-  background: #4a8bd8;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] .account-add-panel {
-  background: rgba(247, 251, 255, 0.92);
-  color: #2b4f7d;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .status-avatar {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-avatar-fallback {
-  background: #c7d9ef;
-}
-
-:root[data-theme="sky-pink"] .account-selector-summary,
-:root[data-theme="sky-pink"] .account-selector-dropdown {
-  border: 1px solid #d6e5f2;
-  background: #f7fbff;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .account-handle {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .account-selector-placeholder,
-:root[data-theme="sky-pink"] .account-selector-caret {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] button {
-  background: #f2a5c9;
-  color: #3d2130;
-}
-
-:root[data-theme="sky-pink"] .settings-danger-button {
-  background: #c24b5d;
-  color: #fff4f6;
-}
-
-:root[data-theme="sky-pink"] button.is-active {
-  background: #4a8bd8;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] button.ghost {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .text-link,
-body[data-theme="sky-pink"] .text-link {
-  background: none;
-}
-
-:root[data-theme="sky-pink"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="sky-pink"] .section-menu-panel {
-  background: rgba(247, 251, 255, 0.92);
-  color: #2b4f7d;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .section-menu-panel button,
-body[data-theme="sky-pink"] .section-menu-panel button {
-  background: none;
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .timeline-column {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(58, 118, 185, 0.08);
-}
-
-:root[data-theme="sky-pink"] .status {
-  border: 1px solid #d6e5f2;
-  background: #fff5fa;
-}
-
-:root[data-theme="sky-pink"] .status header {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .status header strong {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .status header span,
-:root[data-theme="sky-pink"] .time-link {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .status-time {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .status-warning,
-body[data-theme="sky-pink"] .status-warning {
-  background: #fbeaf2;
-}
-
-:root[data-theme="sky-pink"] .status-warning-text,
-body[data-theme="sky-pink"] .status-warning-text {
-  color: #9b5b7c;
-}
-
-:root[data-theme="sky-pink"] .link-preview {
-  border: 1px solid #d6e5f2;
-  background: #fff5fa;
-}
-
-:root[data-theme="sky-pink"] .link-preview-body {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .link-preview-body strong {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .link-preview-url {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .status-text a {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .status-reaction {
-  color: #2b4f7d;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-reaction.is-active {
-  background: #4a8bd8;
-  border-color: #2b4f7d;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] .file-button {
-  background: #e9f2fb;
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .compose-icon-button,
-body[data-theme="sky-pink"] .compose-icon-button {
-  background: #e9f2fb;
-  color: #4a6b86;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-panel {
-  background: #f7fbff;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-category-toggle {
-  background: #e9f2fb;
-  color: #4a6b86;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-count {
-  background: #d6e5f2;
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-button {
-  background: #e9f2fb;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-empty {
-  color: #9b7a8b;
-}
-
-:root[data-theme="sky-pink"] .compose-busy-backdrop {
-  background: rgba(29, 51, 74, 0.2);
-}
-
-:root[data-theme="sky-pink"] .compose-busy-content {
-  background: #f7fbff;
-  border-color: #d6e5f2;
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .compose-busy-spinner {
-  border-color: #d6e5f2;
-  border-top-color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .boosted-by,
-:root[data-theme="sky-pink"] .notification-actor {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .reply-info {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .account-form input,
-:root[data-theme="sky-pink"] .compose-form textarea,
-:root[data-theme="sky-pink"] .compose-cw input,
-:root[data-theme="sky-pink"] .compose-actions select,
-:root[data-theme="sky-pink"] .settings-item select {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .account-form input::placeholder,
-:root[data-theme="sky-pink"] .compose-form textarea::placeholder,
-:root[data-theme="sky-pink"] .compose-cw input::placeholder {
-  color: #9b7a8b;
-}
-
-:root[data-theme="monochrome"] .sidebar-description {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .brand-text p {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .sidebar-description a {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .sidebar-links a {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .sidebar-divider {
-  background: #111111;
-}
-
-:root[data-theme="monochrome"] .settings-modal-backdrop {
-  background: rgba(10, 10, 10, 0.65);
-}
-
-:root[data-theme="monochrome"] .status-modal-backdrop {
-  background: rgba(10, 10, 10, 0.7);
-}
-
-:root[data-theme="monochrome"] .status-modal-content {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-}
-
-:root[data-theme="monochrome"] .status-modal-header {
-  border-bottom: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-modal-title {
-  color: #111111;
-}
-
-
-
-:root[data-theme="monochrome"] .overlay-backdrop,
-body[data-theme="monochrome"] .overlay-backdrop {
-  background: rgba(17, 17, 17, 0.16);
-}
-
-:root[data-theme="monochrome"] .settings-item {
-  border-top: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .settings-item p {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .panel {
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
-}
-
-:root[data-theme="monochrome"] .account-add-button {
-  background: #111111;
-  color: #ffffff;
-}
-
-:root[data-theme="monochrome"] .account-add-panel {
-  background: rgba(255, 255, 255, 0.92);
-  color: #111111;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .status-avatar {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-avatar-fallback {
-  background: #b3b3b3;
-}
-
-:root[data-theme="monochrome"] .account-selector-summary,
-:root[data-theme="monochrome"] .account-selector-dropdown {
-  border: 1px solid #1d1d1d;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .account-selector-placeholder,
-:root[data-theme="monochrome"] .account-selector-caret {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .account-handle {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] button {
-  background: #111111;
-  color: #ffffff;
-}
-
-:root[data-theme="monochrome"] .settings-danger-button {
-  background: #c62828;
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] button.is-active {
-  background: #e6e6e6;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] button.ghost {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .text-link,
-body[data-theme="monochrome"] .text-link {
-  background: none;
-}
-
-:root[data-theme="monochrome"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="monochrome"] .section-menu-panel {
-  background: rgba(255, 255, 255, 0.92);
-  color: #111111;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .section-menu-panel button,
-body[data-theme="monochrome"] .section-menu-panel button {
-  background: none;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .timeline-column {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(0, 0, 0, 0.06);
-}
-
-:root[data-theme="monochrome"] .status {
-  border: 1px solid #1d1d1d;
-  background: #ffffff;
-}
-
-:root[data-theme="monochrome"] .status header {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status header strong {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .status header span,
-:root[data-theme="monochrome"] .time-link {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-time {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-warning,
-body[data-theme="monochrome"] .status-warning {
-  background: #f1f1f1;
-}
-
-:root[data-theme="monochrome"] .status-warning-text,
-body[data-theme="monochrome"] .status-warning-text {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .link-preview {
-  border: 1px solid #1d1d1d;
-  background: #ffffff;
-}
-
-:root[data-theme="monochrome"] .link-preview-body {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .link-preview-body strong {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .link-preview-url {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-text a {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-reaction {
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-reaction.is-active {
-  background: #2a2a2a;
-  border-color: #111111;
-  color: #f5f5f5;
-}
-
-:root[data-theme="monochrome"] .file-button {
-  background: #f1f1f1;
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .compose-icon-button,
-body[data-theme="monochrome"] .compose-icon-button {
-  background: #f1f1f1;
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .delete-button {
-  background: #c62828;
-}
-
-:root[data-theme="monochrome"] .confirm-actions .delete-button {
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] .image-modal-delete {
-  background: #c62828;
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-panel {
-  background: #ffffff;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-category-toggle {
-  background: #f1f1f1;
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-count {
-  background: #e5e5e5;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-button {
-  background: #f1f1f1;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-empty {
-  color: #6b6b6b;
-}
-
-:root[data-theme="monochrome"] .compose-busy-backdrop {
-  background: rgba(10, 10, 10, 0.2);
-}
-
-:root[data-theme="monochrome"] .compose-busy-content {
-  background: #ffffff;
-  border-color: #1d1d1d;
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .compose-busy-spinner {
-  border-color: #1d1d1d;
-  border-top-color: #111111;
-}
-
-:root[data-theme="monochrome"] .boosted-by,
-:root[data-theme="monochrome"] .notification-actor {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .reply-info {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .account-form input,
-:root[data-theme="monochrome"] .compose-form textarea,
-:root[data-theme="monochrome"] .compose-cw input,
-:root[data-theme="monochrome"] .compose-actions select,
-:root[data-theme="monochrome"] .settings-item select {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .account-form input::placeholder,
-:root[data-theme="monochrome"] .compose-form textarea::placeholder,
-:root[data-theme="monochrome"] .compose-cw input::placeholder {
-  color: #6b6b6b;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-color-scheme="light"]) {
-    background: radial-gradient(circle at top left, #1d1b18, #12110f 55%, #0d0c0b);
-    color: #f0e7dc;
-    --scrollbar-thumb: var(--scrollbar-thumb-dark);
-    --notification-badge-ring: #1b1916;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"],
-  body:not([data-color-scheme="light"])[data-theme="christmas"] {
-    background: radial-gradient(circle at top left, #2a1716, #1d1110 55%, #120b0a);
-    color: #f7e7df;
-    --notification-badge-ring: #201412;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"],
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] {
-    background: radial-gradient(circle at top left, #1b2330, #191a26 55%, #101218);
-    color: #eff1f7;
-    --scrollbar-thumb: #5f6875;
-    --notification-badge-ring: #1a202d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"],
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] {
-    background: radial-gradient(circle at top left, #0f0f0f, #080808 55%, #030303);
-    color: #f5f5f5;
-    --scrollbar-thumb: #616161;
-    --notification-badge-ring: #121212;
-  }
-
-  :root:not([data-color-scheme="light"]) .overlay-backdrop,
-  body:not([data-color-scheme="light"]) .overlay-backdrop {
-    background: rgba(15, 13, 11, 0.4);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .overlay-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .overlay-backdrop {
-    background: rgba(32, 16, 15, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .overlay-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .overlay-backdrop {
-    background: rgba(88, 102, 138, 0.35);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .overlay-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .overlay-backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"]) .panel,
-  body:not([data-color-scheme="light"]) .panel {
-    background: #1b1916cc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .panel {
-    background: #201412cc;
-    border: 1px solid #4a2f2c;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .panel {
-    background: #1a202dcc;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .panel {
-    background: #121212cc;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .timeline-column,
-  body:not([data-color-scheme="light"]) .timeline-column {
-    background: #171512;
-    border: 1px solid #302822;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .timeline-column,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .timeline-column {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(64, 20, 20, 0.35);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .timeline-column,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .timeline-column {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(12, 18, 28, 0.35);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .timeline-column,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .timeline-column {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root:not([data-color-scheme="light"]) .app-header p,
-  body:not([data-color-scheme="light"]) .app-header p,
-  :root:not([data-color-scheme="light"]) .status header,
-  body:not([data-color-scheme="light"]) .status header,
-  :root:not([data-color-scheme="light"]) .account-list .ghost,
-  body:not([data-color-scheme="light"]) .account-list .ghost,
-  :root:not([data-color-scheme="light"]) .attachments a,
-  body:not([data-color-scheme="light"]) .attachments a,
-  :root:not([data-color-scheme="light"]) .empty,
-  body:not([data-color-scheme="light"]) .empty,
-  :root:not([data-color-scheme="light"]) .hint,
-  body:not([data-color-scheme="light"]) .hint {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .app-header p,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .app-header p,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status header,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status header,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-list .ghost,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-list .ghost,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .attachments a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .attachments a,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .empty,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .empty,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .hint,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .hint {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .status,
-  body:not([data-color-scheme="light"]) .status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status header,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status header {
-    color: #e4b9b9;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status header strong,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status header strong {
-    color: #f4d7d7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status header span,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status header span,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .time-link,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .time-link {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header strong,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header strong {
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header span,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status header span,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .time-link,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .time-link {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status header,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status header {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status header strong,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status header strong {
-    color: #f5f5f5;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status header span,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status header span,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .time-link,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .time-link {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-time,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-time {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-time,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-time {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-time,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-time {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-warning,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-warning {
-    background: #2a1b19;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-warning,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-warning {
-    background: #1e1a24;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-warning-text,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-warning-text {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-warning-text,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-warning-text {
-    color: #d9a3bd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-warning,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-warning {
-    background: #181818;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-warning-text,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-warning-text {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .status p,
-  body:not([data-color-scheme="light"]) .status p {
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-time,
-  body:not([data-color-scheme="light"]) .status-time {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-warning,
-  body:not([data-color-scheme="light"]) .status-warning {
-    background: #2a241f;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-warning-text,
-  body:not([data-color-scheme="light"]) .status-warning-text {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .replying,
-  body:not([data-color-scheme="light"]) .replying {
-    background: #2a241f;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-form input,
-  body:not([data-color-scheme="light"]) .account-form input,
-  :root:not([data-color-scheme="light"]) .compose-form textarea,
-  body:not([data-color-scheme="light"]) .compose-form textarea,
-  :root:not([data-color-scheme="light"]) .compose-cw input,
-  body:not([data-color-scheme="light"]) .compose-cw input,
-  :root:not([data-color-scheme="light"]) .compose-actions select,
-  body:not([data-color-scheme="light"]) .compose-actions select,
-  :root:not([data-color-scheme="light"]) .settings-item select,
-  body:not([data-color-scheme="light"]) .settings-item select {
-    background: #151310;
-    border: 1px solid #3a312a;
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-form input,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-form input,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-form textarea,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-form textarea,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-cw input,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-cw input,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-actions select,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-actions select,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item select,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item select {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-form input,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-form input,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-form textarea,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-form textarea,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-cw input,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-cw input,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-actions select,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-actions select,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item select,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item select {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-    color: #eff1f7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-form input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-form input::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-cw input::placeholder {
-    color: #c59a9a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-form input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-form input::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-cw input::placeholder {
-    color: #aeb7c6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-actions select,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-actions select,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item select,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item select {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input::placeholder {
-    color: #8a8a8a;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-form-divider,
-  body:not([data-color-scheme="light"]) .account-form-divider {
-    border-top: 1px dashed #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-form input::placeholder,
-  body:not([data-color-scheme="light"]) .account-form input::placeholder,
-  :root:not([data-color-scheme="light"]) .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"]) .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"]) .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"]) .compose-cw input::placeholder {
-    color: #9b8e80;
-  }
-
-  :root:not([data-color-scheme="light"]) button,
-  body:not([data-color-scheme="light"]) button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-danger-button,
-  body:not([data-color-scheme="light"]) .settings-danger-button {
-    background: #b5463b;
-    color: #fff6f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button {
-    background: #8f2f2f;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .settings-danger-button {
-    background: #a54343;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-danger-button {
-    background: #d97183;
-    color: #fff4f6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-danger-button {
-    background: #d32f2f;
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) button.is-active,
-  body:not([data-color-scheme="light"]) button.is-active {
-    background: #8fa6cf;
-    color: #1d2638;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button.is-active {
-    background: #b07a3b;
-    color: #2b1a10;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button.is-active {
-    background: #f0a6c8;
-    color: #2a1620;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button.is-active {
-    background: #bdbdbd;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"]) button.ghost,
-  body:not([data-color-scheme="light"]) button.ghost {
-    color: #8fa6cf;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button.ghost {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button.ghost {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .text-link,
-  body:not([data-color-scheme="light"]) .text-link {
-    color: #8fa6cf;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .text-link {
-    color: #cf8c8c;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .text-link {
-    color: #f0a6c8;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .text-link {
-    color: #f0f0f0;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-add-button,
-  body:not([data-color-scheme="light"]) .account-add-button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-button {
-    background: #2e6b4f;
-    color: #f4fff7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-add-panel,
-  body:not([data-color-scheme="light"]) .account-add-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel,
-  body:not([data-color-scheme="light"]) .section-menu-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel button,
-  body:not([data-color-scheme="light"]) .section-menu-panel button {
-    background: none;
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel .danger,
-  body:not([data-color-scheme="light"]) .section-menu-panel .danger {
-    color: #e07a6d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel .danger,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel .danger {
-    color: #ff8a8a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel button {
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel button {
-    color: #eff1f7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel button {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-list button,
-  body:not([data-color-scheme="light"]) .account-list button {
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-list button:not(.ghost),
-  body:not([data-color-scheme="light"]) .account-list button:not(.ghost) {
-    color: inherit;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-summary,
-  body:not([data-color-scheme="light"]) .account-selector-summary {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-dropdown,
-  body:not([data-color-scheme="light"]) .account-selector-dropdown {
-    background: rgba(23, 21, 18, 0.88);
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-placeholder,
-  body:not([data-color-scheme="light"]) .account-selector-placeholder,
-  :root:not([data-color-scheme="light"]) .account-selector-caret,
-  body:not([data-color-scheme="light"]) .account-selector-caret {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-handle,
-  body:not([data-color-scheme="light"]) .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-summary {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-dropdown {
-    background: rgba(26, 16, 15, 0.88);
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-summary {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-dropdown {
-    background: rgba(24, 30, 42, 0.9);
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown {
-    background: rgba(16, 16, 16, 0.88);
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-caret {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-caret {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary .account-text,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary .account-text,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown .account-text,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown .account-text {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-caret {
-    color: #cfcfcf;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-handle {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-handle {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-description,
-  body:not([data-color-scheme="light"]) .sidebar-description,
-  :root:not([data-color-scheme="light"]) .oss-list,
-  body:not([data-color-scheme="light"]) .oss-list {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .brand-text p,
-  body:not([data-color-scheme="light"]) .brand-text p {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-description a,
-  body:not([data-color-scheme="light"]) .sidebar-description a {
-    color: #8fa6cf;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-links a,
-  body:not([data-color-scheme="light"]) .sidebar-links a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .oss-list,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .oss-list {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .brand-text p,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .brand-text p {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .brand-text p,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .brand-text p {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .oss-list,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .oss-list {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description a,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-links a {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-links a {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description a {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-links a {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-divider,
-  body:not([data-color-scheme="light"]) .sidebar-divider {
-    background: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-divider,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-divider {
-    background: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-divider,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-divider {
-    background: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-item,
-  body:not([data-color-scheme="light"]) .settings-item {
-    border-top: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-item p,
-  body:not([data-color-scheme="light"]) .settings-item p {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item {
-    border-top: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item {
-    border-top: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item p,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item p {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item p,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item p {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-modal-backdrop,
-  body:not([data-color-scheme="light"]) .settings-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-backdrop,
-  body:not([data-color-scheme="light"]) .status-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-content,
-  body:not([data-color-scheme="light"]) .status-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-header,
-  body:not([data-color-scheme="light"]) .status-modal-header {
-    border-bottom: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-title,
-  body:not([data-color-scheme="light"]) .status-modal-title {
-    color: #f0e7dc;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"]) .back-link,
-  body:not([data-color-scheme="light"]) .back-link {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .boosted-by,
-  body:not([data-color-scheme="light"]) .boosted-by,
-  :root:not([data-color-scheme="light"]) .notification-actor,
-  body:not([data-color-scheme="light"]) .notification-actor {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .notification-actor {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop {
-    background: rgba(32, 16, 15, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content {
-    background: #201412;
-    border: 1px solid #4a2f2c;
-    box-shadow: 0 20px 60px rgba(64, 20, 20, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header {
-    border-bottom: 1px solid #4a2f2c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title {
-    color: #f7e7df;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .notification-actor {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop {
-    background: rgba(29, 51, 74, 0.7);
-  }
-
-:root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content {
-    background: #1a202d;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 20px 60px rgba(12, 18, 28, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header {
-    border-bottom: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title {
-    color: #eff1f7;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .notification-actor {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop {
-    background: rgba(10, 10, 10, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content {
-    background: #121212;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header {
-    border-bottom: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title {
-    color: #f5f5f5;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"]) .reply-info,
-  body:not([data-color-scheme="light"]) .reply-info {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .reply-info {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .reply-info {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .reply-info {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-reaction,
-  body:not([data-color-scheme="light"]) .status-reaction {
-    color: #e9dfd2;
-    border-color: #5a4f45;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction {
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction {
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction {
-    color: #d6d6d6;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-reaction.is-active,
-  body:not([data-color-scheme="light"]) .status-reaction.is-active {
-    background: #2c2722;
-    border-color: #6f5c47;
-    color: #fff7ec;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction.is-active {
-    background: #2a1b19;
-    border-color: #3b2624;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction.is-active {
-    background: #212a3a;
-    border-color: #2e3b50;
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction.is-active {
-    background: #1a1a1a;
-    border-color: #4a4a4a;
-    color: #f5f5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-header,
-  body:not([data-color-scheme="light"]) .status-header {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-handle,
-  body:not([data-color-scheme="light"]) .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-avatar,
-  body:not([data-color-scheme="light"]) .account-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-avatar,
-  body:not([data-color-scheme="light"]) .status-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-avatar-fallback,
-  body:not([data-color-scheme="light"]) .account-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-avatar-fallback,
-  body:not([data-color-scheme="light"]) .status-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root:not([data-color-scheme="light"]) .attachment-thumb,
-  body:not([data-color-scheme="light"]) .attachment-thumb {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root:not([data-color-scheme="light"]) .file-button,
-  body:not([data-color-scheme="light"]) .file-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-icon-button,
-  body:not([data-color-scheme="light"]) .compose-icon-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .file-button {
-    background: #2a1b19;
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-icon-button {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .file-button {
-    background: #223047;
-    color: #d7e7fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-icon-button {
-    background: #223047;
-    color: #d7e7fb;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .file-button,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-icon-button {
-    background: #2a2a2a;
-    color: #f0f0f0;
-    border-color: #4a4a4a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-panel,
-  body:not([data-color-scheme="light"]) .compose-emoji-panel {
-    background: #1b1916;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-panel {
-    background: #201412;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-panel {
-    background: #181e2a;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-panel {
-    background: #101010;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"]) .compose-emoji-category-toggle {
-    background: #2a2622;
-    color: #f0e7dc;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-category-toggle {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-category-toggle {
-    background: #223047;
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-category-toggle {
-    background: #1a1a1a;
-    color: #f5f5f5;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-count,
-  body:not([data-color-scheme="light"]) .compose-emoji-count {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-count {
-    background: #3b2624;
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-count {
-    background: #344760;
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-count {
-    background: #2a2a2a;
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-button,
-  body:not([data-color-scheme="light"]) .compose-emoji-button {
-    background: #221f1b;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-button {
-    background: #1a100f;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-button {
-    background: #223047;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-button {
-    background: #1a1a1a;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-empty,
-  body:not([data-color-scheme="light"]) .compose-emoji-empty {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-empty {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-empty {
-    color: #b7c2d2;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-empty {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-backdrop,
-  body:not([data-color-scheme="light"]) .compose-busy-backdrop {
-    background: rgba(8, 7, 6, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-content,
-  body:not([data-color-scheme="light"]) .compose-busy-content {
-    background: #1b1916;
-    border-color: #3b342d;
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-spinner,
-  body:not([data-color-scheme="light"]) .compose-busy-spinner {
-    border-color: #3b342d;
-    border-top-color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-backdrop {
-    background: rgba(32, 16, 15, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-content {
-    background: #201412;
-    border-color: #3b2624;
-    color: #e4b9b9;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-spinner {
-    border-color: #3b2624;
-    border-top-color: #e4b46b;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-backdrop {
-    background: rgba(24, 30, 42, 0.55);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-content {
-    background: #181e2a;
-    border-color: #2e3b50;
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-spinner {
-    border-color: #2e3b50;
-    border-top-color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-backdrop {
-    background: rgba(0, 0, 0, 0.55);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-content {
-    background: #101010;
-    border-color: #3a3a3a;
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-spinner {
-    border-color: #3a3a3a;
-    border-top-color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview,
-  body:not([data-color-scheme="light"]) .link-preview {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview {
-    border: 1px solid #3b2624;
-    background: #1a100f;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview {
-    border: 1px solid #2e3b50;
-    background: #181e2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview {
-    border: 1px solid #3a3a3a;
-    background: #101010;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-body,
-  body:not([data-color-scheme="light"]) .link-preview-body {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body {
-    color: #e4b9b9;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-body strong,
-  body:not([data-color-scheme="light"]) .link-preview-body strong {
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body strong {
-    color: #f4d7d7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body strong {
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body strong {
-    color: #f5f5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-url,
-  body:not([data-color-scheme="light"]) .link-preview-url {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-url {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-url {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-url {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text,
-  body:not([data-color-scheme="light"]) .readme-text {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text a,
-  body:not([data-color-scheme="light"]) .readme-text a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text code,
-  body:not([data-color-scheme="light"]) .readme-text code,
-  :root:not([data-color-scheme="light"]) .readme-text pre,
-  body:not([data-color-scheme="light"]) .readme-text pre {
-    background: #221f1b;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-image-row img,
-  body:not([data-color-scheme="light"]) .readme-image-row img {
-    border-color: #2f2a25;
-    background: #221f1b;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-text a,
-  body:not([data-color-scheme="light"]) .status-text a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-text a {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-text a {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-text a {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-backdrop,
-  body:not([data-color-scheme="light"]) .image-modal-backdrop {
-    background: rgba(8, 7, 6, 0.8);
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-content img,
-  body:not([data-color-scheme="light"]) .image-modal-content img {
-    border: 1px solid #2f2923;
-    background: #0b0a09;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-modal-content,
-  body:not([data-color-scheme="light"]) .confirm-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-actions .delete-button,
-  body:not([data-color-scheme="light"]) .confirm-actions .delete-button {
-    color: #fffaf2;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .confirm-actions .delete-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .confirm-actions .delete-button {
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-status,
-  body:not([data-color-scheme="light"]) .confirm-status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-delete,
-  body:not([data-color-scheme="light"]) .image-modal-delete {
-    background: #7a3a2a;
-    color: #f5efe7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .image-modal-delete,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .image-modal-delete {
-    background: #c62828;
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .delete-button,
-  body:not([data-color-scheme="light"]) .delete-button {
-    background: #7a3a2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .delete-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .delete-button {
-    background: #c62828;
-  }
-
-  :root:not([data-color-scheme="light"]) .license,
-  body:not([data-color-scheme="light"]) .license {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-    color: #f0e7dc;
-  }
-}
-
-:root[data-color-scheme="dark"] {
-  background: radial-gradient(circle at top left, #1d1b18, #12110f 55%, #0d0c0b);
-  color: #f0e7dc;
-  --scrollbar-thumb: var(--scrollbar-thumb-dark);
-  --notification-badge-ring: #1b1916;
-}
-
-:root[data-color-scheme="dark"][data-theme="christmas"],
-body[data-color-scheme="dark"][data-theme="christmas"] {
-  background: radial-gradient(circle at top left, #2a1716, #1d1110 55%, #120b0a);
-  color: #f7e7df;
-  --notification-badge-ring: #201412;
-}
-
-:root[data-color-scheme="dark"][data-theme="sky-pink"],
-body[data-color-scheme="dark"][data-theme="sky-pink"] {
-  background: radial-gradient(circle at top left, #1b2330, #191a26 55%, #101218);
-  color: #eff1f7;
-  --scrollbar-thumb: #5f6875;
-  --notification-badge-ring: #1a202d;
-}
-
-:root[data-color-scheme="dark"][data-theme="monochrome"],
-body[data-color-scheme="dark"][data-theme="monochrome"] {
-  background: radial-gradient(circle at top left, #0f0f0f, #080808 55%, #030303);
-  color: #f5f5f5;
-  --scrollbar-thumb: #616161;
-  --notification-badge-ring: #121212;
-}
-
-  :root[data-color-scheme="dark"] .overlay-backdrop,
-  body[data-color-scheme="dark"] .overlay-backdrop {
-    background: rgba(15, 13, 11, 0.4);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .overlay-backdrop {
-    background: rgba(32, 16, 15, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .overlay-backdrop {
-    background: rgba(88, 102, 138, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .overlay-backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  :root[data-color-scheme="dark"] .panel,
-  body[data-color-scheme="dark"] .panel {
-    background: #1b1916cc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .panel {
-    background: #201412cc;
-    border: 1px solid #4a2f2c;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .panel {
-    background: #1a202dcc;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .panel {
-    background: #121212cc;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .timeline-column,
-  body[data-color-scheme="dark"] .timeline-column {
-    background: #171512;
-    border: 1px solid #302822;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="christmas"] .timeline-column {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(64, 20, 20, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .timeline-column {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(12, 18, 28, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .timeline-column {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root[data-color-scheme="dark"] .app-header p,
-  body[data-color-scheme="dark"] .app-header p,
-  :root[data-color-scheme="dark"] .status header,
-  body[data-color-scheme="dark"] .status header,
-  :root[data-color-scheme="dark"] .account-list .ghost,
-  body[data-color-scheme="dark"] .account-list .ghost,
-  :root[data-color-scheme="dark"] .attachments a,
-  body[data-color-scheme="dark"] .attachments a,
-  :root[data-color-scheme="dark"] .empty,
-  body[data-color-scheme="dark"] .empty,
-  :root[data-color-scheme="dark"] .hint,
-  body[data-color-scheme="dark"] .hint {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .app-header p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .app-header p,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-list .ghost,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-list .ghost,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .attachments a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .attachments a,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .empty,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .empty,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .hint,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .hint {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .status,
-  body[data-color-scheme="dark"] .status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header {
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header strong {
-    color: #f4d7d7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header span,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .time-link,
-  body[data-color-scheme="dark"][data-theme="christmas"] .time-link {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header strong {
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header span,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .time-link,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .time-link {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header strong {
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header span,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .time-link,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .time-link {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-time,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-time {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-time,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-time {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-time,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-time {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-warning {
-    background: #2a1b19;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning {
-    background: #1e1a24;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-warning-text {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning-text {
-    color: #d9a3bd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-warning {
-    background: #181818;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-warning-text {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .status p,
-  body[data-color-scheme="dark"] .status p {
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"] .status-time,
-  body[data-color-scheme="dark"] .status-time {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .status-warning,
-  body[data-color-scheme="dark"] .status-warning {
-    background: #2a241f;
-  }
-
-  :root[data-color-scheme="dark"] .status-warning-text,
-  body[data-color-scheme="dark"] .status-warning-text {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .replying,
-  body[data-color-scheme="dark"] .replying {
-    background: #2a241f;
-  }
-
-  :root[data-color-scheme="dark"] .account-form input,
-  body[data-color-scheme="dark"] .account-form input,
-  :root[data-color-scheme="dark"] .compose-form textarea,
-  body[data-color-scheme="dark"] .compose-form textarea,
-  :root[data-color-scheme="dark"] .compose-cw input,
-  body[data-color-scheme="dark"] .compose-cw input,
-  :root[data-color-scheme="dark"] .compose-actions select,
-  body[data-color-scheme="dark"] .compose-actions select,
-  :root[data-color-scheme="dark"] .settings-item select,
-  body[data-color-scheme="dark"] .settings-item select {
-    background: #151310;
-    border: 1px solid #3a312a;
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-form input,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-form input,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-form textarea,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-form textarea,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-cw input,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-cw input,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-actions select,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-actions select,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .settings-item select,
-  body[data-color-scheme="dark"][data-theme="christmas"] .settings-item select {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-form input,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-form input,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-form textarea,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-form textarea,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-cw input,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-cw input,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-actions select,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-actions select,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item select,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item select {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-    color: #eff1f7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-form input::placeholder,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-cw input::placeholder {
-    color: #c59a9a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-form input::placeholder,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-cw input::placeholder {
-    color: #aeb7c6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-form input,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-form input,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-actions select,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-actions select,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .settings-item select,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .settings-item select {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-form input::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input::placeholder {
-    color: #8a8a8a;
-  }
-
-  :root[data-color-scheme="dark"] .account-form-divider,
-  body[data-color-scheme="dark"] .account-form-divider {
-    border-top: 1px dashed #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-form input::placeholder,
-  body[data-color-scheme="dark"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"] .compose-cw input::placeholder {
-    color: #9b8e80;
-  }
-
-  :root[data-color-scheme="dark"] button,
-  body[data-color-scheme="dark"] button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root[data-color-scheme="dark"] .settings-danger-button,
-  body[data-color-scheme="dark"] .settings-danger-button {
-    background: #b5463b;
-    color: #fff6f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button,
-  body[data-color-scheme="dark"][data-theme="christmas"] button {
-    background: #8f2f2f;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .settings-danger-button {
-    background: #a54343;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-danger-button {
-    background: #d97183;
-    color: #fff4f6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .settings-danger-button {
-    background: #d32f2f;
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] button.is-active,
-  body[data-color-scheme="dark"] button.is-active {
-    background: #8fa6cf;
-    color: #1d2638;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="christmas"] button.is-active {
-    background: #b07a3b;
-    color: #2b1a10;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button.is-active {
-    background: #f0a6c8;
-    color: #2a1620;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button.is-active {
-    background: #bdbdbd;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"] button.ghost,
-  body[data-color-scheme="dark"] button.ghost {
-    color: #8fa6cf;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="christmas"] button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-list button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-list button {
-    background: none;
-    color: inherit;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-list button.ghost,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-list button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button.ghost {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button.ghost {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .text-link,
-  body[data-color-scheme="dark"] .text-link {
-    color: #8fa6cf;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .text-link,
-  body[data-color-scheme="dark"][data-theme="christmas"] .text-link {
-    color: #cf8c8c;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .text-link,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .text-link {
-    color: #f0a6c8;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .text-link,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .text-link {
-    color: #f0f0f0;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"] .account-add-button,
-  body[data-color-scheme="dark"] .account-add-button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-add-button {
-    background: #2e6b4f;
-    color: #f4fff7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-add-button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"] .account-add-panel,
-  body[data-color-scheme="dark"] .account-add-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-add-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-add-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel,
-  body[data-color-scheme="dark"] .section-menu-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel button,
-  body[data-color-scheme="dark"] .section-menu-panel button {
-    background: none;
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel .danger,
-  body[data-color-scheme="dark"] .section-menu-panel .danger {
-    color: #e07a6d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel .danger,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel .danger {
-    color: #ff8a8a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel button {
-    background: none;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel button {
-    color: #eff1f7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel button {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .account-list button,
-  body[data-color-scheme="dark"] .account-list button {
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"] .account-list button:not(.ghost),
-  body[data-color-scheme="dark"] .account-list button:not(.ghost) {
-    color: inherit;
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-summary,
-  body[data-color-scheme="dark"] .account-selector-summary {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-dropdown,
-  body[data-color-scheme="dark"] .account-selector-dropdown {
-    background: rgba(23, 21, 18, 0.88);
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-placeholder,
-  body[data-color-scheme="dark"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"] .account-selector-caret,
-  body[data-color-scheme="dark"] .account-selector-caret {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .account-handle,
-  body[data-color-scheme="dark"] .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-summary {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-dropdown {
-    background: rgba(26, 16, 15, 0.88);
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-summary {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-dropdown {
-    background: rgba(24, 30, 42, 0.9);
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown {
-    background: rgba(16, 16, 16, 0.88);
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-handle {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-handle {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-handle {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-caret {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-caret {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary .account-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary .account-text,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown .account-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown .account-text {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-caret {
-    color: #cfcfcf;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-description,
-  body[data-color-scheme="dark"] .sidebar-description,
-  :root[data-color-scheme="dark"] .oss-list,
-  body[data-color-scheme="dark"] .oss-list {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .brand-text p,
-  body[data-color-scheme="dark"] .brand-text p {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-description a,
-  body[data-color-scheme="dark"] .sidebar-description a {
-    color: #8fa6cf;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-links a,
-  body[data-color-scheme="dark"] .sidebar-links a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .oss-list,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .oss-list {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .brand-text p,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .brand-text p {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .brand-text p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .brand-text p {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .oss-list,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .oss-list {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description a,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-links a {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="christmas"] .sidebar-links a {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description a,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description a {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-links a {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-divider,
-  body[data-color-scheme="dark"] .sidebar-divider {
-    background: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .sidebar-divider,
-  body[data-color-scheme="dark"][data-theme="christmas"] .sidebar-divider {
-    background: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-divider,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-divider {
-    background: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"] .settings-item,
-  body[data-color-scheme="dark"] .settings-item {
-    border-top: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .settings-item p,
-  body[data-color-scheme="dark"] .settings-item p {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .settings-item,
-  body[data-color-scheme="dark"][data-theme="christmas"] .settings-item {
-    border-top: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item {
-    border-top: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item p,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item p {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .settings-item p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .settings-item p {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .settings-modal-backdrop,
-  body[data-color-scheme="dark"] .settings-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-backdrop,
-  body[data-color-scheme="dark"] .status-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-content,
-  body[data-color-scheme="dark"] .status-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-header,
-  body[data-color-scheme="dark"] .status-modal-header {
-    border-bottom: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-title,
-  body[data-color-scheme="dark"] .status-modal-title {
-    color: #f0e7dc;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"] .back-link,
-  body[data-color-scheme="dark"] .back-link {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .boosted-by,
-  body[data-color-scheme="dark"] .boosted-by,
-  :root[data-color-scheme="dark"] .notification-actor,
-  body[data-color-scheme="dark"] .notification-actor {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="christmas"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="christmas"] .notification-actor {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop {
-    background: rgba(32, 16, 15, 0.7);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content {
-    background: #201412;
-    border: 1px solid #4a2f2c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header {
-    border-bottom: 1px solid #4a2f2c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title {
-    color: #f7e7df;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .notification-actor {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop {
-    background: rgba(29, 51, 74, 0.7);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content {
-    background: #1a202d;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header {
-    border-bottom: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title {
-    color: #eff1f7;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .notification-actor {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop {
-    background: rgba(10, 10, 10, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content {
-    background: #121212;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header {
-    border-bottom: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title {
-    color: #f5f5f5;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"] .reply-info,
-  body[data-color-scheme="dark"] .reply-info {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="christmas"] .reply-info {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .reply-info {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .reply-info {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .status-reaction,
-  body[data-color-scheme="dark"] .status-reaction {
-    color: #e9dfd2;
-    border-color: #5a4f45;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-reaction {
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction {
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction {
-    color: #d6d6d6;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .status-reaction.is-active,
-  body[data-color-scheme="dark"] .status-reaction.is-active {
-    background: #2c2722;
-    border-color: #6f5c47;
-    color: #fff7ec;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-reaction.is-active {
-    background: #2a1b19;
-    border-color: #3b2624;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction.is-active {
-    background: #212a3a;
-    border-color: #2e3b50;
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction.is-active {
-    background: #1a1a1a;
-    border-color: #4a4a4a;
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"] .status-header,
-  body[data-color-scheme="dark"] .status-header {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .account-handle,
-  body[data-color-scheme="dark"] .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-handle {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .account-avatar,
-  body[data-color-scheme="dark"] .account-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-avatar,
-  body[data-color-scheme="dark"] .status-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-avatar-fallback,
-  body[data-color-scheme="dark"] .account-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root[data-color-scheme="dark"] .status-avatar-fallback,
-  body[data-color-scheme="dark"] .status-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root[data-color-scheme="dark"] .attachment-thumb,
-  body[data-color-scheme="dark"] .attachment-thumb {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root[data-color-scheme="dark"] .file-button,
-  body[data-color-scheme="dark"] .file-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"] .compose-icon-button,
-  body[data-color-scheme="dark"] .compose-icon-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .file-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .file-button {
-    background: #2a1b19;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-icon-button {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .file-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .file-button {
-    background: #223047;
-    color: #d7e7fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-icon-button {
-    background: #223047;
-    color: #d7e7fb;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .file-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .file-button,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-icon-button {
-    background: #2a2a2a;
-    color: #f0f0f0;
-    border-color: #4a4a4a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-panel,
-  body[data-color-scheme="dark"] .compose-emoji-panel {
-    background: #1b1916;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-panel {
-    background: #201412;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-panel {
-    background: #181e2a;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-panel {
-    background: #101010;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"] .compose-emoji-category-toggle {
-    background: #2a2622;
-    color: #f0e7dc;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-category-toggle {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-category-toggle {
-    background: #223047;
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-category-toggle {
-    background: #1a1a1a;
-    color: #f5f5f5;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-count,
-  body[data-color-scheme="dark"] .compose-emoji-count {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-count {
-    background: #3b2624;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-count {
-    background: #344760;
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-count {
-    background: #2a2a2a;
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-button,
-  body[data-color-scheme="dark"] .compose-emoji-button {
-    background: #221f1b;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-button {
-    background: #1a100f;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-button {
-    background: #223047;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-button {
-    background: #1a1a1a;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-empty,
-  body[data-color-scheme="dark"] .compose-emoji-empty {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-empty {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-empty {
-    color: #b7c2d2;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-empty {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"] .compose-busy-backdrop {
-    background: rgba(8, 7, 6, 0.6);
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-content,
-  body[data-color-scheme="dark"] .compose-busy-content {
-    background: #1b1916;
-    border-color: #3b342d;
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-spinner,
-  body[data-color-scheme="dark"] .compose-busy-spinner {
-    border-color: #3b342d;
-    border-top-color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-backdrop {
-    background: rgba(32, 16, 15, 0.6);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-content {
-    background: #201412;
-    border-color: #3b2624;
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-spinner {
-    border-color: #3b2624;
-    border-top-color: #e4b46b;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-backdrop {
-    background: rgba(24, 30, 42, 0.6);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-content {
-    background: #181e2a;
-    border-color: #2e3b50;
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-spinner {
-    border-color: #2e3b50;
-    border-top-color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-backdrop {
-    background: rgba(0, 0, 0, 0.65);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-content {
-    background: #101010;
-    border-color: #3a3a3a;
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-spinner {
-    border-color: #3a3a3a;
-    border-top-color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview,
-  body[data-color-scheme="dark"] .link-preview {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview {
-    border: 1px solid #3b2624;
-    background: #1a100f;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview {
-    border: 1px solid #2e3b50;
-    background: #181e2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview {
-    border: 1px solid #3a3a3a;
-    background: #101010;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-body,
-  body[data-color-scheme="dark"] .link-preview-body {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body {
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-body strong,
-  body[data-color-scheme="dark"] .link-preview-body strong {
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body strong {
-    color: #f4d7d7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body strong {
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body strong {
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-url,
-  body[data-color-scheme="dark"] .link-preview-url {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-url {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-url {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-url {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text,
-  body[data-color-scheme="dark"] .readme-text {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text a,
-  body[data-color-scheme="dark"] .readme-text a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text code,
-  body[data-color-scheme="dark"] .readme-text code,
-  :root[data-color-scheme="dark"] .readme-text pre,
-  body[data-color-scheme="dark"] .readme-text pre {
-    background: #221f1b;
-  }
-
-  :root[data-color-scheme="dark"] .status-text a,
-  body[data-color-scheme="dark"] .status-text a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-backdrop,
-  body[data-color-scheme="dark"] .image-modal-backdrop {
-    background: rgba(8, 7, 6, 0.8);
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-content img,
-  body[data-color-scheme="dark"] .image-modal-content img {
-    border: 1px solid #2f2923;
-    background: #0b0a09;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-modal-content,
-  body[data-color-scheme="dark"] .confirm-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-actions .delete-button,
-  body[data-color-scheme="dark"] .confirm-actions .delete-button {
-    color: #fffaf2;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .confirm-actions .delete-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .confirm-actions .delete-button {
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-status,
-  body[data-color-scheme="dark"] .confirm-status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-delete,
-  body[data-color-scheme="dark"] .image-modal-delete {
-    background: #7a3a2a;
-    color: #f5efe7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .image-modal-delete,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .image-modal-delete {
-    background: #c62828;
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] .delete-button,
-  body[data-color-scheme="dark"] .delete-button {
-    background: #7a3a2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .delete-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .delete-button {
-    background: #c62828;
-  }
-
-  :root[data-color-scheme="dark"] .license,
-  body[data-color-scheme="dark"] .license {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-    color: #f0e7dc;
-  }
+@import "./themes/light.css";
+@import "./themes/dark.css";
diff --git a/src/ui/styles/themes/dark.css b/src/ui/styles/themes/dark.css
new file mode 100644
index 0000000..b74b449
--- /dev/null
+++ b/src/ui/styles/themes/dark.css
@@ -0,0 +1,917 @@
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-scheme="light"]) {
+    --page-background: radial-gradient(circle at top left, #1d1b18, #12110f 55%, #0d0c0b);
+    --color-text-primary: #f0e7dc;
+    --scrollbar-thumb: var(--scrollbar-thumb-dark);
+    --notification-badge-ring: #1b1916;
+    --color-sidebar-description: #c4b6a6;
+    --color-brand-text: #c4b6a6;
+    --color-oss-list: #c4b6a6;
+    --color-sidebar-description-link: #8fa6cf;
+    --color-sidebar-link: #d7cbbd;
+    --color-sidebar-divider: #3b342d;
+    --color-panel-bg: #1b1916cc;
+    --color-panel-border: #3b342d;
+    --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-settings-item-border: #3b342d;
+    --color-settings-item-text: #c4b6a6;
+    --color-settings-backdrop: rgba(8, 7, 6, 0.7);
+    --color-status-backdrop: rgba(8, 7, 6, 0.7);
+    --color-status-modal-bg: #171512;
+    --color-status-modal-border: #3b342d;
+    --shadow-status-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
+    --color-status-modal-divider: #3b342d;
+    --color-status-modal-title: #f0e7dc;
+    --color-back-link: #d7cbbd;
+    --color-app-header-text: #c4b6a6;
+    --color-boosted-by: #c4b6a6;
+    --color-notification-actor: #c4b6a6;
+    --color-reply-info: #c4b6a6;
+    --color-overlay-backdrop: rgba(15, 13, 11, 0.4);
+    --color-timeline-column-bg: #171512;
+    --color-timeline-column-border: #302822;
+    --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.35);
+    --color-status-bg: #171512;
+    --color-status-border: #302822;
+    --color-status-header: #c4b6a6;
+    --color-status-meta: #c4b6a6;
+    --color-status-time: #c4b6a6;
+    --color-status-warning-bg: #2a241f;
+    --color-status-warning-text: #c4b6a6;
+    --color-status-link: #d7cbbd;
+    --color-link-preview-bg: #171512;
+    --color-link-preview-border: #3b342d;
+    --color-link-preview-text: #c4b6a6;
+    --color-link-preview-strong: #f0e7dc;
+    --color-link-preview-url: #d7cbbd;
+    --color-reaction-text: #e9dfd2;
+    --color-reaction-border: #5a4f45;
+    --color-reaction-active-bg: #2c2722;
+    --color-reaction-active-border: #6f5c47;
+    --color-reaction-active-text: #fff7ec;
+    --color-account-add-button-bg: #4a6cb6;
+    --color-account-add-button-text: #edf3ff;
+    --color-account-add-panel-bg: rgba(23, 21, 18, 0.88);
+    --color-account-add-panel-text: #f0e7dc;
+    --color-account-add-panel-border: #3b342d;
+    --shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-section-menu-bg: rgba(23, 21, 18, 0.88);
+    --color-section-menu-text: #f0e7dc;
+    --color-section-menu-border: #3b342d;
+    --shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-section-menu-danger: #e07a6d;
+    --color-account-selector-bg: #171512;
+    --color-account-selector-border: #3b342d;
+    --shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-account-selector-placeholder: #c4b6a6;
+    --color-account-handle: #c4b6a6;
+    --color-avatar-bg: #221f1b;
+    --color-avatar-border: #3b342d;
+    --color-avatar-fallback: #6c5c4b;
+    --color-attachment-thumb-bg: #171512;
+    --color-attachment-thumb-border: #3b342d;
+    --color-file-button-bg: #2c3b59;
+    --color-file-button-text: #e1e7f4;
+    --color-secondary-button-bg: #2c3b59;
+    --color-secondary-button-text: #e1e7f4;
+    --color-secondary-button-border: #3b342d;
+    --color-emoji-panel-bg: #1b1916;
+    --color-emoji-panel-border: #3b342d;
+    --color-emoji-toggle-bg: #2a2622;
+    --color-emoji-toggle-text: #f0e7dc;
+    --color-emoji-toggle-border: #3b342d;
+    --color-emoji-count-bg: #2c3b59;
+    --color-emoji-count-text: #e1e7f4;
+    --color-emoji-button-bg: #221f1b;
+    --color-emoji-button-border: #3b342d;
+    --color-emoji-empty-text: #c4b6a6;
+    --color-compose-busy-backdrop: rgba(8, 7, 6, 0.6);
+    --color-compose-busy-bg: #1b1916;
+    --color-compose-busy-border: #3b342d;
+    --color-compose-busy-text: #c4b6a6;
+    --color-compose-busy-spinner-border: #3b342d;
+    --color-compose-busy-spinner-active: #e1e7f4;
+    --color-input-bg: #151310;
+    --color-input-border: #3a312a;
+    --color-input-text: #f0e7dc;
+    --color-input-placeholder: #9b8e80;
+    --color-settings-select-bg: #151310;
+    --color-settings-select-border: #3a312a;
+    --color-settings-select-text: #f0e7dc;
+    --color-compose-input-bg: #151310;
+    --color-attachments-bg: #1a1814;
+    --color-attachments-border: #3a312a;
+    --color-attachment-add-border: #8fa6cf;
+    --color-attachment-add-text: #c4b6a6;
+    --color-action-bg: #4a6cb6;
+    --color-action-text: #edf3ff;
+    --color-action-danger-bg: #b5463b;
+    --color-action-danger-text: #fff6f0;
+    --color-action-active-bg: #8fa6cf;
+    --color-action-active-text: #1d2638;
+    --color-action-ghost-text: #8fa6cf;
+    --color-link: #8fa6cf;
+    --color-readme-text: #c4b6a6;
+    --color-readme-link: #d7cbbd;
+    --color-readme-code-bg: #221f1b;
+    --color-readme-code-border: #2f2a25;
+    --color-license-bg: #221f1b;
+    --color-license-border: #3b342d;
+    --color-license-text: #f0e7dc;
+    --color-image-modal-backdrop: rgba(8, 7, 6, 0.8);
+    --color-image-modal-border: #2f2923;
+    --color-image-modal-bg: #0b0a09;
+    --color-confirm-modal-bg: #171512;
+    --color-confirm-modal-border: #3b342d;
+    --color-confirm-status-bg: #171512;
+    --color-confirm-status-border: #302822;
+    --color-delete-button-bg: #7a3a2a;
+    --color-delete-button-text: #fffaf2;
+    --color-image-modal-delete-bg: #7a3a2a;
+    --color-image-modal-delete-text: #f5efe7;
+    --color-character-count: #9ca3af;
+    --color-character-count-normal: #9ca3af;
+    --color-character-count-warning: #fbbf24;
+    --color-character-count-limit: #f87171;
+    --color-empty-text: #c4b6a6;
+    --color-hint-text: #c4b6a6;
+    --color-replying-bg: #2a241f;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] {
+    --page-background: radial-gradient(circle at top left, #2a1716, #1d1110 55%, #120b0a);
+    --color-text-primary: #f7e7df;
+    --notification-badge-ring: #201412;
+    --color-overlay-backdrop: rgba(32, 16, 15, 0.45);
+    --color-panel-bg: #201412cc;
+    --color-panel-border: #4a2f2c;
+    --shadow-panel: 0 18px 40px rgba(64, 20, 20, 0.45);
+    --color-timeline-column-bg: #1a100f;
+    --color-timeline-column-border: #3b2624;
+    --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(64, 20, 20, 0.35);
+    --color-status-bg: #1a100f;
+    --color-status-border: #3b2624;
+    --color-status-header: #e4b9b9;
+    --color-app-header-text: #e4b9b9;
+    --color-status-header-strong: #f4d7d7;
+    --color-status-meta: #9cc7ab;
+    --color-status-time: #9cc7ab;
+    --color-status-warning-bg: #2a1b19;
+    --color-status-warning-text: #cf8c8c;
+    --color-status-link: #9cc7ab;
+    --color-link-preview-bg: #1a100f;
+    --color-link-preview-border: #3b2624;
+    --color-link-preview-text: #e4b9b9;
+    --color-link-preview-strong: #f4d7d7;
+    --color-link-preview-url: #9cc7ab;
+    --color-reaction-text: #f7e7df;
+    --color-reaction-border: #3b2624;
+    --color-reaction-active-bg: #2a1b19;
+    --color-reaction-active-border: #3b2624;
+    --color-reaction-active-text: #fff1f1;
+    --color-account-add-button-bg: #2e6b4f;
+    --color-account-add-button-text: #f4fff7;
+    --color-account-add-panel-bg: rgba(26, 16, 15, 0.88);
+    --color-account-add-panel-text: #f7e7df;
+    --color-account-add-panel-border: #3b2624;
+    --shadow-account-add-panel: 0 18px 40px rgba(64, 20, 20, 0.45);
+    --color-section-menu-bg: rgba(26, 16, 15, 0.88);
+    --color-section-menu-text: #f7e7df;
+    --color-section-menu-border: #3b2624;
+    --shadow-section-menu: 0 18px 40px rgba(64, 20, 20, 0.45);
+    --color-account-selector-bg: #1a100f;
+    --color-account-selector-border: #3b2624;
+    --shadow-account-selector: 0 18px 40px rgba(64, 20, 20, 0.45);
+    --color-account-selector-placeholder: #cf8c8c;
+    --color-account-handle: #cf8c8c;
+    --color-file-button-bg: #2a1b19;
+    --color-file-button-text: #f7e7df;
+    --color-secondary-button-bg: #2a1b19;
+    --color-secondary-button-text: #f7e7df;
+    --color-secondary-button-border: #3b2624;
+    --color-emoji-panel-bg: #201412;
+    --color-emoji-panel-border: #3b2624;
+    --color-emoji-toggle-bg: #2a1b19;
+    --color-emoji-toggle-text: #f7e7df;
+    --color-emoji-toggle-border: #3b2624;
+    --color-emoji-count-bg: #3b2624;
+    --color-emoji-count-text: #f7e7df;
+    --color-emoji-button-bg: #1a100f;
+    --color-emoji-button-border: #3b2624;
+    --color-emoji-empty-text: #cf8c8c;
+    --color-compose-busy-backdrop: rgba(32, 16, 15, 0.6);
+    --color-compose-busy-bg: #201412;
+    --color-compose-busy-border: #3b2624;
+    --color-compose-busy-text: #e4b9b9;
+    --color-compose-busy-spinner-border: #3b2624;
+    --color-compose-busy-spinner-active: #e4b46b;
+    --color-input-bg: #1a100f;
+    --color-input-border: #3b2624;
+    --color-input-text: #f7e7df;
+    --color-input-placeholder: #c59a9a;
+    --color-settings-select-bg: #1a100f;
+    --color-settings-select-border: #3b2624;
+    --color-settings-select-text: #f7e7df;
+    --color-compose-input-bg: #1a100f;
+    --color-attachments-bg: #2a1b19;
+    --color-attachments-border: #3b2624;
+    --color-attachment-add-border: #cf8c8c;
+    --color-attachment-add-text: #cf8c8c;
+    --color-action-bg: #8f2f2f;
+    --color-action-text: #fff1f1;
+    --color-action-danger-bg: #a54343;
+    --color-action-danger-text: #fff1f1;
+    --color-action-active-bg: #b07a3b;
+    --color-action-active-text: #2b1a10;
+    --color-action-ghost-text: #cf8c8c;
+    --color-link: #cf8c8c;
+    --color-sidebar-link: #9cc7ab;
+    --color-settings-item-border: #3b2624;
+    --color-status-backdrop: rgba(32, 16, 15, 0.7);
+    --color-status-modal-bg: #201412;
+    --color-status-modal-border: #4a2f2c;
+    --color-status-modal-divider: #4a2f2c;
+    --color-status-modal-title: #f7e7df;
+    --color-boosted-by: #9cc7ab;
+    --color-notification-actor: #9cc7ab;
+    --color-reply-info: #cf8c8c;
+    --color-status-link: #9cc7ab;
+    --color-link-preview-url: #9cc7ab;
+    --color-character-count-normal: #cf8c8c;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] {
+    --page-background: radial-gradient(circle at top left, #1b2330, #191a26 55%, #101218);
+    --color-text-primary: #eff1f7;
+    --scrollbar-thumb: #5f6875;
+    --notification-badge-ring: #1a202d;
+    --color-overlay-backdrop: rgba(88, 102, 138, 0.35);
+    --color-panel-bg: #1a202dcc;
+    --color-panel-border: #2e3b50;
+    --shadow-panel: 0 18px 40px rgba(12, 18, 28, 0.5);
+    --color-timeline-column-bg: #181e2a;
+    --color-timeline-column-border: #2e3b50;
+    --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(12, 18, 28, 0.35);
+    --color-status-bg: #181e2a;
+    --color-status-border: #2e3b50;
+    --color-status-header: #d7ddea;
+    --color-app-header-text: #d7ddea;
+    --color-status-header-strong: #f2f5fb;
+    --color-status-meta: #f0a6c8;
+    --color-status-time: #f0a6c8;
+    --color-status-warning-bg: #1e1a24;
+    --color-status-warning-text: #d9a3bd;
+    --color-status-link: #9dbef4;
+    --color-link-preview-bg: #181e2a;
+    --color-link-preview-border: #2e3b50;
+    --color-link-preview-text: #d7ddea;
+    --color-link-preview-strong: #f2f5fb;
+    --color-link-preview-url: #9dbef4;
+    --color-reaction-text: #eff1f7;
+    --color-reaction-border: #2e3b50;
+    --color-reaction-active-bg: #212a3a;
+    --color-reaction-active-border: #2e3b50;
+    --color-reaction-active-text: #f2f5fb;
+    --color-account-add-button-bg: #7db4f0;
+    --color-account-add-button-text: #0f1c2a;
+    --color-account-add-panel-bg: rgba(24, 30, 42, 0.9);
+    --color-account-add-panel-text: #eff1f7;
+    --color-account-add-panel-border: #2e3b50;
+    --shadow-account-add-panel: 0 18px 40px rgba(12, 18, 28, 0.5);
+    --color-section-menu-bg: rgba(24, 30, 42, 0.9);
+    --color-section-menu-text: #eff1f7;
+    --color-section-menu-border: #2e3b50;
+    --shadow-section-menu: 0 18px 40px rgba(12, 18, 28, 0.5);
+    --color-account-selector-bg: #181e2a;
+    --color-account-selector-border: #2e3b50;
+    --shadow-account-selector: 0 18px 40px rgba(12, 18, 28, 0.5);
+    --color-account-selector-placeholder: #f0a6c8;
+    --color-file-button-bg: #223047;
+    --color-file-button-text: #d7e7fb;
+    --color-secondary-button-bg: #223047;
+    --color-secondary-button-text: #d7e7fb;
+    --color-secondary-button-border: #2e3b50;
+    --color-emoji-panel-bg: #181e2a;
+    --color-emoji-panel-border: #2e3b50;
+    --color-emoji-toggle-bg: #223047;
+    --color-emoji-toggle-text: #eff1f7;
+    --color-emoji-toggle-border: #2e3b50;
+    --color-emoji-count-bg: #344760;
+    --color-emoji-count-text: #f2f5fb;
+    --color-emoji-button-bg: #223047;
+    --color-emoji-button-border: #2e3b50;
+    --color-emoji-empty-text: #b7c2d2;
+    --color-compose-busy-backdrop: rgba(24, 30, 42, 0.6);
+    --color-compose-busy-bg: #181e2a;
+    --color-compose-busy-border: #2e3b50;
+    --color-compose-busy-text: #d7ddea;
+    --color-compose-busy-spinner-border: #2e3b50;
+    --color-compose-busy-spinner-active: #9dbef4;
+    --color-input-bg: #181e2a;
+    --color-input-border: #2e3b50;
+    --color-input-text: #eff1f7;
+    --color-input-placeholder: #aeb7c6;
+    --color-settings-select-bg: #181e2a;
+    --color-settings-select-border: #2e3b50;
+    --color-settings-select-text: #eff1f7;
+    --color-compose-input-bg: #181e2a;
+    --color-attachments-bg: #212a3a;
+    --color-attachments-border: #2e3b50;
+    --color-attachment-add-border: #f0a6c8;
+    --color-attachment-add-text: #d7ddea;
+    --color-action-bg: #7db4f0;
+    --color-action-text: #0f1c2a;
+    --color-action-danger-bg: #d97183;
+    --color-action-danger-text: #fff4f6;
+    --color-action-active-bg: #f0a6c8;
+    --color-action-active-text: #2a1620;
+    --color-action-ghost-text: #f0a6c8;
+    --color-link: #f0a6c8;
+    --color-sidebar-description: #d7ddea;
+    --color-brand-text: #d7ddea;
+    --color-oss-list: #d7ddea;
+    --color-sidebar-description-link: #9dbef4;
+    --color-sidebar-link: #f0a6c8;
+    --color-sidebar-divider: #2e3b50;
+    --color-settings-item-border: #2e3b50;
+    --color-settings-item-text: #d7ddea;
+    --color-status-backdrop: rgba(29, 51, 74, 0.7);
+    --color-status-modal-bg: #1a202d;
+    --color-status-modal-border: #2e3b50;
+    --color-status-modal-divider: #2e3b50;
+    --color-status-modal-title: #eff1f7;
+    --color-boosted-by: #9dbef4;
+    --color-notification-actor: #9dbef4;
+    --color-reply-info: #f0a6c8;
+    --color-character-count-normal: #d7ddea;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] {
+    --page-background: radial-gradient(circle at top left, #0f0f0f, #080808 55%, #030303);
+    --color-text-primary: #f5f5f5;
+    --scrollbar-thumb: #616161;
+    --notification-badge-ring: #121212;
+    --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
+    --color-panel-bg: #121212cc;
+    --color-panel-border: #3a3a3a;
+    --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-timeline-column-bg: #101010;
+    --color-timeline-column-border: #3a3a3a;
+    --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.35);
+    --color-status-bg: #101010;
+    --color-status-border: #3a3a3a;
+    --color-status-header: #d6d6d6;
+    --color-app-header-text: #d6d6d6;
+    --color-status-header-strong: #f5f5f5;
+    --color-status-meta: #bdbdbd;
+    --color-status-time: #bdbdbd;
+    --color-status-warning-bg: #181818;
+    --color-status-warning-text: #d6d6d6;
+    --color-status-link: #bdbdbd;
+    --color-link-preview-bg: #101010;
+    --color-link-preview-border: #3a3a3a;
+    --color-link-preview-text: #d6d6d6;
+    --color-link-preview-strong: #f5f5f5;
+    --color-link-preview-url: #bdbdbd;
+    --color-reaction-text: #d6d6d6;
+    --color-reaction-border: #3a3a3a;
+    --color-reaction-active-bg: #1a1a1a;
+    --color-reaction-active-border: #4a4a4a;
+    --color-reaction-active-text: #f5f5f5;
+    --color-account-add-button-bg: #e6e6e6;
+    --color-account-add-button-text: #111111;
+    --color-account-add-panel-bg: rgba(16, 16, 16, 0.88);
+    --color-account-add-panel-text: #f0f0f0;
+    --color-account-add-panel-border: #3a3a3a;
+    --shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-section-menu-bg: rgba(16, 16, 16, 0.88);
+    --color-section-menu-text: #f0f0f0;
+    --color-section-menu-border: #3a3a3a;
+    --shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-section-menu-danger: #ff8a8a;
+    --color-account-selector-bg: #101010;
+    --color-account-selector-border: #3a3a3a;
+    --shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.45);
+    --color-account-selector-placeholder: #cfcfcf;
+    --color-account-handle: #d6d6d6;
+    --color-file-button-bg: #2a2a2a;
+    --color-file-button-text: #f0f0f0;
+    --color-secondary-button-bg: #2a2a2a;
+    --color-secondary-button-text: #f0f0f0;
+    --color-secondary-button-border: #4a4a4a;
+    --color-emoji-panel-bg: #101010;
+    --color-emoji-panel-border: #3a3a3a;
+    --color-emoji-toggle-bg: #1a1a1a;
+    --color-emoji-toggle-text: #f5f5f5;
+    --color-emoji-toggle-border: #3a3a3a;
+    --color-emoji-count-bg: #2a2a2a;
+    --color-emoji-count-text: #f0f0f0;
+    --color-emoji-button-bg: #1a1a1a;
+    --color-emoji-button-border: #3a3a3a;
+    --color-emoji-empty-text: #bdbdbd;
+    --color-compose-busy-backdrop: rgba(0, 0, 0, 0.65);
+    --color-compose-busy-bg: #101010;
+    --color-compose-busy-border: #3a3a3a;
+    --color-compose-busy-text: #d6d6d6;
+    --color-compose-busy-spinner-border: #3a3a3a;
+    --color-compose-busy-spinner-active: #f0f0f0;
+    --color-input-bg: #101010;
+    --color-input-border: #3a3a3a;
+    --color-input-text: #f0f0f0;
+    --color-input-placeholder: #8a8a8a;
+    --color-settings-select-bg: #101010;
+    --color-settings-select-border: #3a3a3a;
+    --color-settings-select-text: #f0f0f0;
+    --color-compose-input-bg: #101010;
+    --color-attachments-bg: #181818;
+    --color-attachments-border: #3a3a3a;
+    --color-attachment-add-border: #f0f0f0;
+    --color-attachment-add-text: #d6d6d6;
+    --color-action-bg: #e6e6e6;
+    --color-action-text: #111111;
+    --color-action-danger-bg: #d32f2f;
+    --color-action-danger-text: #fff5f5;
+    --color-action-active-bg: #bdbdbd;
+    --color-action-active-text: #111111;
+    --color-action-ghost-text: #f0f0f0;
+    --color-link: #f0f0f0;
+    --color-sidebar-description: #d6d6d6;
+    --color-brand-text: #d6d6d6;
+    --color-oss-list: #d6d6d6;
+    --color-sidebar-description-link: #f0f0f0;
+    --color-sidebar-link: #f0f0f0;
+    --color-sidebar-divider: #3a3a3a;
+    --color-settings-item-text: #d6d6d6;
+    --color-status-backdrop: rgba(10, 10, 10, 0.5);
+    --color-status-modal-bg: #121212;
+    --color-status-modal-border: #3a3a3a;
+    --color-status-modal-divider: #3a3a3a;
+    --color-status-modal-title: #f5f5f5;
+    --color-boosted-by: #bdbdbd;
+    --color-notification-actor: #bdbdbd;
+    --color-reply-info: #bdbdbd;
+    --color-character-count-normal: #d6d6d6;
+    --color-delete-button-bg: #c62828;
+    --color-delete-button-text: #fff5f5;
+    --color-image-modal-delete-bg: #c62828;
+    --color-image-modal-delete-text: #fff5f5;
+  }
+}
+
+:root[data-color-scheme="dark"] {
+  --page-background: radial-gradient(circle at top left, #1d1b18, #12110f 55%, #0d0c0b);
+  --color-text-primary: #f0e7dc;
+  --scrollbar-thumb: var(--scrollbar-thumb-dark);
+  --notification-badge-ring: #1b1916;
+  --color-sidebar-description: #c4b6a6;
+  --color-brand-text: #c4b6a6;
+  --color-oss-list: #c4b6a6;
+  --color-sidebar-description-link: #8fa6cf;
+  --color-sidebar-link: #d7cbbd;
+  --color-sidebar-divider: #3b342d;
+  --color-panel-bg: #1b1916cc;
+  --color-panel-border: #3b342d;
+  --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-settings-item-border: #3b342d;
+  --color-settings-item-text: #c4b6a6;
+  --color-settings-backdrop: rgba(8, 7, 6, 0.7);
+  --color-status-backdrop: rgba(8, 7, 6, 0.7);
+  --color-status-modal-bg: #171512;
+  --color-status-modal-border: #3b342d;
+  --shadow-status-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
+  --color-status-modal-divider: #3b342d;
+  --color-status-modal-title: #f0e7dc;
+  --color-back-link: #d7cbbd;
+  --color-app-header-text: #c4b6a6;
+  --color-boosted-by: #c4b6a6;
+  --color-notification-actor: #c4b6a6;
+  --color-reply-info: #c4b6a6;
+  --color-overlay-backdrop: rgba(15, 13, 11, 0.4);
+  --color-timeline-column-bg: #171512;
+  --color-timeline-column-border: #302822;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.35);
+  --color-status-bg: #171512;
+  --color-status-border: #302822;
+  --color-status-header: #c4b6a6;
+  --color-status-meta: #c4b6a6;
+  --color-status-time: #c4b6a6;
+  --color-status-warning-bg: #2a241f;
+  --color-status-warning-text: #c4b6a6;
+  --color-status-link: #d7cbbd;
+  --color-link-preview-bg: #171512;
+  --color-link-preview-border: #3b342d;
+  --color-link-preview-text: #c4b6a6;
+  --color-link-preview-strong: #f0e7dc;
+  --color-link-preview-url: #d7cbbd;
+  --color-reaction-text: #e9dfd2;
+  --color-reaction-border: #5a4f45;
+  --color-reaction-active-bg: #2c2722;
+  --color-reaction-active-border: #6f5c47;
+  --color-reaction-active-text: #fff7ec;
+  --color-account-add-button-bg: #4a6cb6;
+  --color-account-add-button-text: #edf3ff;
+  --color-account-add-panel-bg: rgba(23, 21, 18, 0.88);
+  --color-account-add-panel-text: #f0e7dc;
+  --color-account-add-panel-border: #3b342d;
+  --shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-section-menu-bg: rgba(23, 21, 18, 0.88);
+  --color-section-menu-text: #f0e7dc;
+  --color-section-menu-border: #3b342d;
+  --shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-section-menu-danger: #e07a6d;
+  --color-account-selector-bg: #171512;
+  --color-account-selector-border: #3b342d;
+  --shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-account-selector-placeholder: #c4b6a6;
+  --color-account-handle: #c4b6a6;
+  --color-avatar-bg: #221f1b;
+  --color-avatar-border: #3b342d;
+  --color-avatar-fallback: #6c5c4b;
+  --color-attachment-thumb-bg: #171512;
+  --color-attachment-thumb-border: #3b342d;
+  --color-file-button-bg: #2c3b59;
+  --color-file-button-text: #e1e7f4;
+  --color-secondary-button-bg: #2c3b59;
+  --color-secondary-button-text: #e1e7f4;
+  --color-secondary-button-border: #3b342d;
+  --color-emoji-panel-bg: #1b1916;
+  --color-emoji-panel-border: #3b342d;
+  --color-emoji-toggle-bg: #2a2622;
+  --color-emoji-toggle-text: #f0e7dc;
+  --color-emoji-toggle-border: #3b342d;
+  --color-emoji-count-bg: #2c3b59;
+  --color-emoji-count-text: #e1e7f4;
+  --color-emoji-button-bg: #221f1b;
+  --color-emoji-button-border: #3b342d;
+  --color-emoji-empty-text: #c4b6a6;
+  --color-compose-busy-backdrop: rgba(8, 7, 6, 0.6);
+  --color-compose-busy-bg: #1b1916;
+  --color-compose-busy-border: #3b342d;
+  --color-compose-busy-text: #c4b6a6;
+  --color-compose-busy-spinner-border: #3b342d;
+  --color-compose-busy-spinner-active: #e1e7f4;
+  --color-input-bg: #151310;
+  --color-input-border: #3a312a;
+  --color-input-text: #f0e7dc;
+  --color-input-placeholder: #9b8e80;
+  --color-settings-select-bg: #151310;
+  --color-settings-select-border: #3a312a;
+  --color-settings-select-text: #f0e7dc;
+  --color-compose-input-bg: #151310;
+  --color-attachments-bg: #1a1814;
+  --color-attachments-border: #3a312a;
+  --color-attachment-add-border: #8fa6cf;
+  --color-attachment-add-text: #c4b6a6;
+  --color-action-bg: #4a6cb6;
+  --color-action-text: #edf3ff;
+  --color-action-danger-bg: #b5463b;
+  --color-action-danger-text: #fff6f0;
+  --color-action-active-bg: #8fa6cf;
+  --color-action-active-text: #1d2638;
+  --color-action-ghost-text: #8fa6cf;
+  --color-link: #8fa6cf;
+  --color-readme-text: #c4b6a6;
+  --color-readme-link: #d7cbbd;
+  --color-readme-code-bg: #221f1b;
+  --color-readme-code-border: #2f2a25;
+  --color-license-bg: #221f1b;
+  --color-license-border: #3b342d;
+  --color-license-text: #f0e7dc;
+  --color-image-modal-backdrop: rgba(8, 7, 6, 0.8);
+  --color-image-modal-border: #2f2923;
+  --color-image-modal-bg: #0b0a09;
+  --color-confirm-modal-bg: #171512;
+  --color-confirm-modal-border: #3b342d;
+  --color-confirm-status-bg: #171512;
+  --color-confirm-status-border: #302822;
+  --color-delete-button-bg: #7a3a2a;
+  --color-delete-button-text: #fffaf2;
+  --color-image-modal-delete-bg: #7a3a2a;
+  --color-image-modal-delete-text: #f5efe7;
+  --color-character-count: #9ca3af;
+  --color-character-count-normal: #9ca3af;
+  --color-character-count-warning: #fbbf24;
+  --color-character-count-limit: #f87171;
+  --color-empty-text: #c4b6a6;
+  --color-hint-text: #c4b6a6;
+  --color-replying-bg: #2a241f;
+}
+
+:root[data-color-scheme="dark"][data-theme="christmas"] {
+  --page-background: radial-gradient(circle at top left, #2a1716, #1d1110 55%, #120b0a);
+  --color-text-primary: #f7e7df;
+  --notification-badge-ring: #201412;
+  --color-overlay-backdrop: rgba(32, 16, 15, 0.45);
+  --color-panel-bg: #201412cc;
+  --color-panel-border: #4a2f2c;
+  --shadow-panel: 0 18px 40px rgba(64, 20, 20, 0.45);
+  --color-timeline-column-bg: #1a100f;
+  --color-timeline-column-border: #3b2624;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(64, 20, 20, 0.35);
+  --color-status-bg: #1a100f;
+  --color-status-border: #3b2624;
+  --color-status-header: #e4b9b9;
+  --color-app-header-text: #e4b9b9;
+  --color-status-header-strong: #f4d7d7;
+  --color-status-meta: #9cc7ab;
+  --color-status-time: #9cc7ab;
+  --color-status-warning-bg: #2a1b19;
+  --color-status-warning-text: #cf8c8c;
+  --color-status-link: #9cc7ab;
+  --color-link-preview-bg: #1a100f;
+  --color-link-preview-border: #3b2624;
+  --color-link-preview-text: #e4b9b9;
+  --color-link-preview-strong: #f4d7d7;
+  --color-link-preview-url: #9cc7ab;
+  --color-reaction-text: #f7e7df;
+  --color-reaction-border: #3b2624;
+  --color-reaction-active-bg: #2a1b19;
+  --color-reaction-active-border: #3b2624;
+  --color-reaction-active-text: #fff1f1;
+  --color-account-add-button-bg: #2e6b4f;
+  --color-account-add-button-text: #f4fff7;
+  --color-account-add-panel-bg: rgba(26, 16, 15, 0.88);
+  --color-account-add-panel-text: #f7e7df;
+  --color-account-add-panel-border: #3b2624;
+  --shadow-account-add-panel: 0 18px 40px rgba(64, 20, 20, 0.45);
+  --color-section-menu-bg: rgba(26, 16, 15, 0.88);
+  --color-section-menu-text: #f7e7df;
+  --color-section-menu-border: #3b2624;
+  --shadow-section-menu: 0 18px 40px rgba(64, 20, 20, 0.45);
+  --color-account-selector-bg: #1a100f;
+  --color-account-selector-border: #3b2624;
+  --shadow-account-selector: 0 18px 40px rgba(64, 20, 20, 0.45);
+  --color-account-selector-placeholder: #cf8c8c;
+  --color-account-handle: #cf8c8c;
+  --color-file-button-bg: #2a1b19;
+  --color-file-button-text: #f7e7df;
+  --color-secondary-button-bg: #2a1b19;
+  --color-secondary-button-text: #f7e7df;
+  --color-secondary-button-border: #3b2624;
+  --color-emoji-panel-bg: #201412;
+  --color-emoji-panel-border: #3b2624;
+  --color-emoji-toggle-bg: #2a1b19;
+  --color-emoji-toggle-text: #f7e7df;
+  --color-emoji-toggle-border: #3b2624;
+  --color-emoji-count-bg: #3b2624;
+  --color-emoji-count-text: #f7e7df;
+  --color-emoji-button-bg: #1a100f;
+  --color-emoji-button-border: #3b2624;
+  --color-emoji-empty-text: #cf8c8c;
+  --color-compose-busy-backdrop: rgba(32, 16, 15, 0.6);
+  --color-compose-busy-bg: #201412;
+  --color-compose-busy-border: #3b2624;
+  --color-compose-busy-text: #e4b9b9;
+  --color-compose-busy-spinner-border: #3b2624;
+  --color-compose-busy-spinner-active: #e4b46b;
+  --color-input-bg: #1a100f;
+  --color-input-border: #3b2624;
+  --color-input-text: #f7e7df;
+  --color-input-placeholder: #c59a9a;
+  --color-settings-select-bg: #1a100f;
+  --color-settings-select-border: #3b2624;
+  --color-settings-select-text: #f7e7df;
+  --color-compose-input-bg: #1a100f;
+  --color-attachments-bg: #2a1b19;
+  --color-attachments-border: #3b2624;
+  --color-attachment-add-border: #cf8c8c;
+  --color-attachment-add-text: #cf8c8c;
+  --color-action-bg: #8f2f2f;
+  --color-action-text: #fff1f1;
+  --color-action-danger-bg: #a54343;
+  --color-action-danger-text: #fff1f1;
+  --color-action-active-bg: #b07a3b;
+  --color-action-active-text: #2b1a10;
+  --color-action-ghost-text: #cf8c8c;
+  --color-link: #cf8c8c;
+  --color-sidebar-link: #9cc7ab;
+  --color-settings-item-border: #3b2624;
+  --color-status-backdrop: rgba(32, 16, 15, 0.7);
+  --color-status-modal-bg: #201412;
+  --color-status-modal-border: #4a2f2c;
+  --color-status-modal-divider: #4a2f2c;
+  --color-status-modal-title: #f7e7df;
+  --color-boosted-by: #9cc7ab;
+  --color-notification-actor: #9cc7ab;
+  --color-reply-info: #cf8c8c;
+  --color-status-link: #9cc7ab;
+  --color-link-preview-url: #9cc7ab;
+  --color-character-count-normal: #cf8c8c;
+}
+
+:root[data-color-scheme="dark"][data-theme="sky-pink"] {
+  --page-background: radial-gradient(circle at top left, #1b2330, #191a26 55%, #101218);
+  --color-text-primary: #eff1f7;
+  --scrollbar-thumb: #5f6875;
+  --notification-badge-ring: #1a202d;
+  --color-overlay-backdrop: rgba(88, 102, 138, 0.35);
+  --color-panel-bg: #1a202dcc;
+  --color-panel-border: #2e3b50;
+  --shadow-panel: 0 18px 40px rgba(12, 18, 28, 0.5);
+  --color-timeline-column-bg: #181e2a;
+  --color-timeline-column-border: #2e3b50;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(12, 18, 28, 0.35);
+  --color-status-bg: #181e2a;
+  --color-status-border: #2e3b50;
+  --color-status-header: #d7ddea;
+  --color-app-header-text: #d7ddea;
+  --color-status-header-strong: #f2f5fb;
+  --color-status-meta: #f0a6c8;
+  --color-status-time: #f0a6c8;
+  --color-status-warning-bg: #1e1a24;
+  --color-status-warning-text: #d9a3bd;
+  --color-status-link: #9dbef4;
+  --color-link-preview-bg: #181e2a;
+  --color-link-preview-border: #2e3b50;
+  --color-link-preview-text: #d7ddea;
+  --color-link-preview-strong: #f2f5fb;
+  --color-link-preview-url: #9dbef4;
+  --color-reaction-text: #eff1f7;
+  --color-reaction-border: #2e3b50;
+  --color-reaction-active-bg: #212a3a;
+  --color-reaction-active-border: #2e3b50;
+  --color-reaction-active-text: #f2f5fb;
+  --color-account-add-button-bg: #7db4f0;
+  --color-account-add-button-text: #0f1c2a;
+  --color-account-add-panel-bg: rgba(24, 30, 42, 0.9);
+  --color-account-add-panel-text: #eff1f7;
+  --color-account-add-panel-border: #2e3b50;
+  --shadow-account-add-panel: 0 18px 40px rgba(12, 18, 28, 0.5);
+  --color-section-menu-bg: rgba(24, 30, 42, 0.9);
+  --color-section-menu-text: #eff1f7;
+  --color-section-menu-border: #2e3b50;
+  --shadow-section-menu: 0 18px 40px rgba(12, 18, 28, 0.5);
+  --color-account-selector-bg: #181e2a;
+  --color-account-selector-border: #2e3b50;
+  --shadow-account-selector: 0 18px 40px rgba(12, 18, 28, 0.5);
+  --color-account-selector-placeholder: #f0a6c8;
+  --color-file-button-bg: #223047;
+  --color-file-button-text: #d7e7fb;
+  --color-secondary-button-bg: #223047;
+  --color-secondary-button-text: #d7e7fb;
+  --color-secondary-button-border: #2e3b50;
+  --color-emoji-panel-bg: #181e2a;
+  --color-emoji-panel-border: #2e3b50;
+  --color-emoji-toggle-bg: #223047;
+  --color-emoji-toggle-text: #eff1f7;
+  --color-emoji-toggle-border: #2e3b50;
+  --color-emoji-count-bg: #344760;
+  --color-emoji-count-text: #f2f5fb;
+  --color-emoji-button-bg: #223047;
+  --color-emoji-button-border: #2e3b50;
+  --color-emoji-empty-text: #b7c2d2;
+  --color-compose-busy-backdrop: rgba(24, 30, 42, 0.6);
+  --color-compose-busy-bg: #181e2a;
+  --color-compose-busy-border: #2e3b50;
+  --color-compose-busy-text: #d7ddea;
+  --color-compose-busy-spinner-border: #2e3b50;
+  --color-compose-busy-spinner-active: #9dbef4;
+  --color-input-bg: #181e2a;
+  --color-input-border: #2e3b50;
+  --color-input-text: #eff1f7;
+  --color-input-placeholder: #aeb7c6;
+  --color-settings-select-bg: #181e2a;
+  --color-settings-select-border: #2e3b50;
+  --color-settings-select-text: #eff1f7;
+  --color-compose-input-bg: #181e2a;
+  --color-attachments-bg: #212a3a;
+  --color-attachments-border: #2e3b50;
+  --color-attachment-add-border: #f0a6c8;
+  --color-attachment-add-text: #d7ddea;
+  --color-action-bg: #7db4f0;
+  --color-action-text: #0f1c2a;
+  --color-action-danger-bg: #d97183;
+  --color-action-danger-text: #fff4f6;
+  --color-action-active-bg: #f0a6c8;
+  --color-action-active-text: #2a1620;
+  --color-action-ghost-text: #f0a6c8;
+  --color-link: #f0a6c8;
+  --color-sidebar-description: #d7ddea;
+  --color-brand-text: #d7ddea;
+  --color-oss-list: #d7ddea;
+  --color-sidebar-description-link: #9dbef4;
+  --color-sidebar-link: #f0a6c8;
+  --color-sidebar-divider: #2e3b50;
+  --color-settings-item-border: #2e3b50;
+  --color-settings-item-text: #d7ddea;
+  --color-status-backdrop: rgba(29, 51, 74, 0.7);
+  --color-status-modal-bg: #1a202d;
+  --color-status-modal-border: #2e3b50;
+  --color-status-modal-divider: #2e3b50;
+  --color-status-modal-title: #eff1f7;
+  --color-boosted-by: #9dbef4;
+  --color-notification-actor: #9dbef4;
+  --color-reply-info: #f0a6c8;
+  --color-character-count-normal: #d7ddea;
+}
+
+:root[data-color-scheme="dark"][data-theme="monochrome"] {
+  --page-background: radial-gradient(circle at top left, #0f0f0f, #080808 55%, #030303);
+  --color-text-primary: #f5f5f5;
+  --scrollbar-thumb: #616161;
+  --notification-badge-ring: #121212;
+  --color-overlay-backdrop: rgba(0, 0, 0, 0.5);
+  --color-panel-bg: #121212cc;
+  --color-panel-border: #3a3a3a;
+  --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-timeline-column-bg: #101010;
+  --color-timeline-column-border: #3a3a3a;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.35);
+  --color-status-bg: #101010;
+  --color-status-border: #3a3a3a;
+  --color-status-header: #d6d6d6;
+  --color-app-header-text: #d6d6d6;
+  --color-status-header-strong: #f5f5f5;
+  --color-status-meta: #bdbdbd;
+  --color-status-time: #bdbdbd;
+  --color-status-warning-bg: #181818;
+  --color-status-warning-text: #d6d6d6;
+  --color-status-link: #bdbdbd;
+  --color-link-preview-bg: #101010;
+  --color-link-preview-border: #3a3a3a;
+  --color-link-preview-text: #d6d6d6;
+  --color-link-preview-strong: #f5f5f5;
+  --color-link-preview-url: #bdbdbd;
+  --color-reaction-text: #d6d6d6;
+  --color-reaction-border: #3a3a3a;
+  --color-reaction-active-bg: #1a1a1a;
+  --color-reaction-active-border: #4a4a4a;
+  --color-reaction-active-text: #f5f5f5;
+  --color-account-add-button-bg: #e6e6e6;
+  --color-account-add-button-text: #111111;
+  --color-account-add-panel-bg: rgba(16, 16, 16, 0.88);
+  --color-account-add-panel-text: #f0f0f0;
+  --color-account-add-panel-border: #3a3a3a;
+  --shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-section-menu-bg: rgba(16, 16, 16, 0.88);
+  --color-section-menu-text: #f0f0f0;
+  --color-section-menu-border: #3a3a3a;
+  --shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-section-menu-danger: #ff8a8a;
+  --color-account-selector-bg: #101010;
+  --color-account-selector-border: #3a3a3a;
+  --shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.45);
+  --color-account-selector-placeholder: #cfcfcf;
+  --color-account-handle: #d6d6d6;
+  --color-file-button-bg: #2a2a2a;
+  --color-file-button-text: #f0f0f0;
+  --color-secondary-button-bg: #2a2a2a;
+  --color-secondary-button-text: #f0f0f0;
+  --color-secondary-button-border: #4a4a4a;
+  --color-emoji-panel-bg: #101010;
+  --color-emoji-panel-border: #3a3a3a;
+  --color-emoji-toggle-bg: #1a1a1a;
+  --color-emoji-toggle-text: #f5f5f5;
+  --color-emoji-toggle-border: #3a3a3a;
+  --color-emoji-count-bg: #2a2a2a;
+  --color-emoji-count-text: #f0f0f0;
+  --color-emoji-button-bg: #1a1a1a;
+  --color-emoji-button-border: #3a3a3a;
+  --color-emoji-empty-text: #bdbdbd;
+  --color-compose-busy-backdrop: rgba(0, 0, 0, 0.65);
+  --color-compose-busy-bg: #101010;
+  --color-compose-busy-border: #3a3a3a;
+  --color-compose-busy-text: #d6d6d6;
+  --color-compose-busy-spinner-border: #3a3a3a;
+  --color-compose-busy-spinner-active: #f0f0f0;
+  --color-input-bg: #101010;
+  --color-input-border: #3a3a3a;
+  --color-input-text: #f0f0f0;
+  --color-input-placeholder: #8a8a8a;
+  --color-settings-select-bg: #101010;
+  --color-settings-select-border: #3a3a3a;
+  --color-settings-select-text: #f0f0f0;
+  --color-compose-input-bg: #101010;
+  --color-attachments-bg: #181818;
+  --color-attachments-border: #3a3a3a;
+  --color-attachment-add-border: #f0f0f0;
+  --color-attachment-add-text: #d6d6d6;
+  --color-action-bg: #e6e6e6;
+  --color-action-text: #111111;
+  --color-action-danger-bg: #d32f2f;
+  --color-action-danger-text: #fff5f5;
+  --color-action-active-bg: #bdbdbd;
+  --color-action-active-text: #111111;
+  --color-action-ghost-text: #f0f0f0;
+  --color-link: #f0f0f0;
+  --color-sidebar-description: #d6d6d6;
+  --color-brand-text: #d6d6d6;
+  --color-oss-list: #d6d6d6;
+  --color-sidebar-description-link: #f0f0f0;
+  --color-sidebar-link: #f0f0f0;
+  --color-sidebar-divider: #3a3a3a;
+  --color-settings-item-text: #d6d6d6;
+  --color-status-backdrop: rgba(10, 10, 10, 0.5);
+  --color-status-modal-bg: #121212;
+  --color-status-modal-border: #3a3a3a;
+  --color-status-modal-divider: #3a3a3a;
+  --color-status-modal-title: #f5f5f5;
+  --color-boosted-by: #bdbdbd;
+  --color-notification-actor: #bdbdbd;
+  --color-reply-info: #bdbdbd;
+  --color-character-count-normal: #d6d6d6;
+  --color-delete-button-bg: #c62828;
+  --color-delete-button-text: #fff5f5;
+  --color-image-modal-delete-bg: #c62828;
+  --color-image-modal-delete-text: #fff5f5;
+}
diff --git a/src/ui/styles/themes/light.css b/src/ui/styles/themes/light.css
new file mode 100644
index 0000000..9d21130
--- /dev/null
+++ b/src/ui/styles/themes/light.css
@@ -0,0 +1,320 @@
+:root[data-theme="christmas"] {
+  --page-background: radial-gradient(circle at top left, #f6efe6, #fff5f0 55%, #ffffff);
+  --color-text-primary: #2d1a16;
+  --color-sidebar-description: #7b3f3f;
+  --color-brand-text: #7b3f3f;
+  --color-sidebar-description-link: #b43b3b;
+  --color-sidebar-link: #2e6b4f;
+  --color-sidebar-divider: #ead7cc;
+  --color-settings-backdrop: rgba(32, 16, 15, 0.65);
+  --color-status-backdrop: rgba(32, 16, 15, 0.7);
+  --color-status-modal-bg: #fff7f2;
+  --color-status-modal-border: #ead7cc;
+  --shadow-status-modal: 0 20px 60px rgba(134, 40, 40, 0.15);
+  --color-status-modal-divider: #ead7cc;
+  --color-status-modal-title: #5b1f1f;
+  --color-overlay-backdrop: rgba(91, 31, 31, 0.12);
+  --color-settings-item-border: #ead7cc;
+  --color-settings-item-text: #7b3f3f;
+  --color-panel-border: #e2cfc4;
+  --shadow-panel: 0 18px 40px rgba(134, 40, 40, 0.08);
+  --color-account-add-button-bg: #2e6b4f;
+  --color-account-add-button-text: #f4fff7;
+  --color-account-add-panel-bg: rgba(255, 247, 242, 0.92);
+  --color-account-add-panel-text: #5b1f1f;
+  --color-account-add-panel-border: #ead7cc;
+  --shadow-account-add-panel: 0 18px 40px rgba(134, 40, 40, 0.12);
+  --color-avatar-bg: #fff7f2;
+  --color-avatar-border: #ead7cc;
+  --color-avatar-fallback: #d4b2a2;
+  --color-account-selector-bg: #fff7f2;
+  --color-account-selector-border: #ead7cc;
+  --shadow-account-selector: 0 18px 40px rgba(134, 40, 40, 0.12);
+  --color-account-selector-placeholder: #7b3f3f;
+  --color-account-handle: #7b3f3f;
+  --color-action-bg: #b43b3b;
+  --color-action-text: #fff4f4;
+  --color-action-danger-bg: #8f2f2f;
+  --color-action-danger-text: #fff1f1;
+  --color-action-active-bg: #e4b46b;
+  --color-action-active-text: #3d2a12;
+  --color-action-ghost-text: #8f2f2f;
+  --color-section-menu-bg: rgba(255, 247, 242, 0.92);
+  --color-section-menu-text: #5b1f1f;
+  --color-section-menu-border: #ead7cc;
+  --shadow-section-menu: 0 18px 40px rgba(134, 40, 40, 0.12);
+  --color-timeline-column-bg: #fff7f2;
+  --color-timeline-column-border: #ead7cc;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(134, 40, 40, 0.06);
+  --color-status-bg: #fff7f2;
+  --color-status-border: #ead7cc;
+  --color-status-header: #7b3f3f;
+  --color-status-header-strong: #5b1f1f;
+  --color-status-meta: #2e6b4f;
+  --color-status-time: #2e6b4f;
+  --color-status-warning-bg: #f3e4dc;
+  --color-status-warning-text: #7b3f3f;
+  --color-link-preview-bg: #fff7f2;
+  --color-link-preview-border: #ead7cc;
+  --color-link-preview-text: #7b3f3f;
+  --color-link-preview-strong: #5b1f1f;
+  --color-link-preview-url: #2e6b4f;
+  --color-status-link: #2e6b4f;
+  --color-reaction-text: #5b1f1f;
+  --color-reaction-border: #ead7cc;
+  --color-reaction-active-bg: #7b3f3f;
+  --color-reaction-active-border: #5b1f1f;
+  --color-reaction-active-text: #fff1f1;
+  --color-file-button-bg: #f3e4dc;
+  --color-file-button-text: #7b3f3f;
+  --color-secondary-button-bg: #f3e4dc;
+  --color-secondary-button-text: #7b3f3f;
+  --color-secondary-button-border: #ead7cc;
+  --color-emoji-panel-bg: #fff7f2;
+  --color-emoji-panel-border: #ead7cc;
+  --color-emoji-toggle-bg: #f3e4dc;
+  --color-emoji-toggle-text: #7b3f3f;
+  --color-emoji-toggle-border: #ead7cc;
+  --color-emoji-count-bg: #ead7cc;
+  --color-emoji-count-text: #5b1f1f;
+  --color-emoji-button-bg: #f3e4dc;
+  --color-emoji-button-border: #ead7cc;
+  --color-emoji-empty-text: #a36a6a;
+  --color-compose-busy-backdrop: rgba(32, 16, 15, 0.25);
+  --color-compose-busy-bg: #fff7f2;
+  --color-compose-busy-border: #ead7cc;
+  --color-compose-busy-text: #7b3f3f;
+  --color-compose-busy-spinner-border: #ead7cc;
+  --color-compose-busy-spinner-active: #b43b3b;
+  --color-boosted-by: #2e6b4f;
+  --color-notification-actor: #2e6b4f;
+  --color-reply-info: #7b3f3f;
+  --color-input-bg: #fff7f2;
+  --color-input-border: #ead7cc;
+  --color-input-text: #5b1f1f;
+  --color-input-placeholder: #a36a6a;
+  --color-settings-select-bg: #fff7f2;
+  --color-settings-select-border: #ead7cc;
+  --color-settings-select-text: #5b1f1f;
+  --color-compose-input-bg: #fff7f2;
+  --color-attachments-bg: #f3e4dc;
+  --color-attachments-border: #ead7cc;
+  --color-attachment-add-border: #c9b9a6;
+  --color-attachment-add-text: #7b3f3f;
+}
+
+:root[data-theme="sky-pink"] {
+  --page-background: radial-gradient(circle at top left, #e9f6ff, #fceaf3 55%, #ffffff);
+  --color-text-primary: #1d2a3a;
+  --scrollbar-thumb: #b7cfe6;
+  --color-sidebar-description: #4a6b86;
+  --color-brand-text: #4a6b86;
+  --color-sidebar-description-link: #2b4f7d;
+  --color-sidebar-link: #c86a92;
+  --color-sidebar-divider: #d6e5f2;
+  --color-settings-backdrop: rgba(29, 51, 74, 0.6);
+  --color-status-backdrop: rgba(29, 51, 74, 0.7);
+  --color-status-modal-bg: #f7fbff;
+  --color-status-modal-border: #d6e5f2;
+  --shadow-status-modal: 0 20px 60px rgba(58, 118, 185, 0.15);
+  --color-status-modal-divider: #d6e5f2;
+  --color-status-modal-title: #2b4f7d;
+  --color-overlay-backdrop: rgba(74, 139, 216, 0.14);
+  --color-settings-item-border: #d6e5f2;
+  --color-settings-item-text: #4a6b86;
+  --color-panel-border: #d6e5f2;
+  --shadow-panel: 0 18px 40px rgba(58, 118, 185, 0.12);
+  --color-account-add-button-bg: #4a8bd8;
+  --color-account-add-button-text: #f6fbff;
+  --color-account-add-panel-bg: rgba(247, 251, 255, 0.92);
+  --color-account-add-panel-text: #2b4f7d;
+  --color-account-add-panel-border: #d6e5f2;
+  --shadow-account-add-panel: 0 18px 40px rgba(58, 118, 185, 0.16);
+  --color-avatar-bg: #f7fbff;
+  --color-avatar-border: #d6e5f2;
+  --color-avatar-fallback: #c7d9ef;
+  --color-account-selector-bg: #f7fbff;
+  --color-account-selector-border: #d6e5f2;
+  --shadow-account-selector: 0 18px 40px rgba(58, 118, 185, 0.16);
+  --color-account-selector-placeholder: #4a6b86;
+  --color-account-handle: #4a6b86;
+  --color-action-bg: #f2a5c9;
+  --color-action-text: #3d2130;
+  --color-action-danger-bg: #c24b5d;
+  --color-action-danger-text: #fff4f6;
+  --color-action-active-bg: #4a8bd8;
+  --color-action-active-text: #f6fbff;
+  --color-action-ghost-text: #c86a92;
+  --color-section-menu-bg: rgba(247, 251, 255, 0.92);
+  --color-section-menu-text: #2b4f7d;
+  --color-section-menu-border: #d6e5f2;
+  --shadow-section-menu: 0 18px 40px rgba(58, 118, 185, 0.16);
+  --color-timeline-column-bg: #f7fbff;
+  --color-timeline-column-border: #d6e5f2;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(58, 118, 185, 0.08);
+  --color-status-bg: #fff5fa;
+  --color-status-border: #d6e5f2;
+  --color-status-header: #4a6b86;
+  --color-status-header-strong: #2b4f7d;
+  --color-status-meta: #c86a92;
+  --color-status-time: #c86a92;
+  --color-status-warning-bg: #fbeaf2;
+  --color-status-warning-text: #9b5b7c;
+  --color-link-preview-bg: #fff5fa;
+  --color-link-preview-border: #d6e5f2;
+  --color-link-preview-text: #4a6b86;
+  --color-link-preview-strong: #2b4f7d;
+  --color-link-preview-url: #4a8bd8;
+  --color-status-link: #4a8bd8;
+  --color-reaction-text: #2b4f7d;
+  --color-reaction-border: #d6e5f2;
+  --color-reaction-active-bg: #4a8bd8;
+  --color-reaction-active-border: #2b4f7d;
+  --color-reaction-active-text: #f6fbff;
+  --color-file-button-bg: #e9f2fb;
+  --color-file-button-text: #4a6b86;
+  --color-secondary-button-bg: #e9f2fb;
+  --color-secondary-button-text: #4a6b86;
+  --color-secondary-button-border: #d6e5f2;
+  --color-emoji-panel-bg: #f7fbff;
+  --color-emoji-panel-border: #d6e5f2;
+  --color-emoji-toggle-bg: #e9f2fb;
+  --color-emoji-toggle-text: #4a6b86;
+  --color-emoji-toggle-border: #d6e5f2;
+  --color-emoji-count-bg: #d6e5f2;
+  --color-emoji-count-text: #2b4f7d;
+  --color-emoji-button-bg: #e9f2fb;
+  --color-emoji-button-border: #d6e5f2;
+  --color-emoji-empty-text: #9b7a8b;
+  --color-compose-busy-backdrop: rgba(29, 51, 74, 0.2);
+  --color-compose-busy-bg: #f7fbff;
+  --color-compose-busy-border: #d6e5f2;
+  --color-compose-busy-text: #4a6b86;
+  --color-compose-busy-spinner-border: #d6e5f2;
+  --color-compose-busy-spinner-active: #4a8bd8;
+  --color-boosted-by: #4a8bd8;
+  --color-notification-actor: #4a8bd8;
+  --color-reply-info: #c86a92;
+  --color-input-bg: #f7fbff;
+  --color-input-border: #d6e5f2;
+  --color-input-text: #2b4f7d;
+  --color-input-placeholder: #9b7a8b;
+  --color-settings-select-bg: #f7fbff;
+  --color-settings-select-border: #d6e5f2;
+  --color-settings-select-text: #2b4f7d;
+  --color-compose-input-bg: #f7fbff;
+  --color-attachments-bg: #e9f2fb;
+  --color-attachments-border: #d6e5f2;
+  --color-attachment-add-border: #aeb7c6;
+  --color-attachment-add-text: #4a6b86;
+}
+
+:root[data-theme="monochrome"] {
+  --page-background: radial-gradient(circle at top left, #ffffff, #f7f7f7 55%, #f2f2f2);
+  --color-text-primary: #111111;
+  --scrollbar-thumb: #4a4a4a;
+  --color-sidebar-description: #2a2a2a;
+  --color-brand-text: #2a2a2a;
+  --color-sidebar-description-link: #111111;
+  --color-sidebar-link: #111111;
+  --color-sidebar-divider: #111111;
+  --color-settings-backdrop: rgba(10, 10, 10, 0.65);
+  --color-status-backdrop: rgba(10, 10, 10, 0.7);
+  --color-status-modal-bg: #ffffff;
+  --color-status-modal-border: #1d1d1d;
+  --shadow-status-modal: 0 20px 60px rgba(0, 0, 0, 0.15);
+  --color-status-modal-divider: #1d1d1d;
+  --color-status-modal-title: #111111;
+  --color-overlay-backdrop: rgba(17, 17, 17, 0.16);
+  --color-settings-item-border: #1d1d1d;
+  --color-settings-item-text: #2a2a2a;
+  --color-panel-border: #1d1d1d;
+  --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.08);
+  --color-account-add-button-bg: #111111;
+  --color-account-add-button-text: #ffffff;
+  --color-account-add-panel-bg: rgba(255, 255, 255, 0.92);
+  --color-account-add-panel-text: #111111;
+  --color-account-add-panel-border: #1d1d1d;
+  --shadow-account-add-panel: 0 18px 40px rgba(0, 0, 0, 0.12);
+  --color-avatar-bg: #ffffff;
+  --color-avatar-border: #1d1d1d;
+  --color-avatar-fallback: #b3b3b3;
+  --color-account-selector-bg: rgba(255, 255, 255, 0.92);
+  --color-account-selector-border: #1d1d1d;
+  --shadow-account-selector: 0 18px 40px rgba(0, 0, 0, 0.12);
+  --color-account-selector-placeholder: #2a2a2a;
+  --color-account-handle: #2a2a2a;
+  --color-action-bg: #111111;
+  --color-action-text: #ffffff;
+  --color-action-danger-bg: #c62828;
+  --color-action-danger-text: #fff5f5;
+  --color-action-active-bg: #e6e6e6;
+  --color-action-active-text: #111111;
+  --color-action-ghost-text: #111111;
+  --color-section-menu-bg: rgba(255, 255, 255, 0.92);
+  --color-section-menu-text: #111111;
+  --color-section-menu-border: #1d1d1d;
+  --shadow-section-menu: 0 18px 40px rgba(0, 0, 0, 0.12);
+  --color-timeline-column-bg: #ffffff;
+  --color-timeline-column-border: #1d1d1d;
+  --shadow-timeline-column: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(0, 0, 0, 0.06);
+  --color-status-bg: #ffffff;
+  --color-status-border: #1d1d1d;
+  --color-status-header: #2a2a2a;
+  --color-status-header-strong: #111111;
+  --color-status-meta: #2a2a2a;
+  --color-status-time: #2a2a2a;
+  --color-status-warning-bg: #f1f1f1;
+  --color-status-warning-text: #2a2a2a;
+  --color-link-preview-bg: #ffffff;
+  --color-link-preview-border: #1d1d1d;
+  --color-link-preview-text: #2a2a2a;
+  --color-link-preview-strong: #111111;
+  --color-link-preview-url: #2a2a2a;
+  --color-status-link: #2a2a2a;
+  --color-reaction-text: #2a2a2a;
+  --color-reaction-border: #1d1d1d;
+  --color-reaction-active-bg: #2a2a2a;
+  --color-reaction-active-border: #111111;
+  --color-reaction-active-text: #f5f5f5;
+  --color-file-button-bg: #f1f1f1;
+  --color-file-button-text: #2a2a2a;
+  --color-secondary-button-bg: #f1f1f1;
+  --color-secondary-button-text: #2a2a2a;
+  --color-secondary-button-border: #1d1d1d;
+  --color-emoji-panel-bg: #ffffff;
+  --color-emoji-panel-border: #1d1d1d;
+  --color-emoji-toggle-bg: #f1f1f1;
+  --color-emoji-toggle-text: #2a2a2a;
+  --color-emoji-toggle-border: #1d1d1d;
+  --color-emoji-count-bg: #e5e5e5;
+  --color-emoji-count-text: #111111;
+  --color-emoji-button-bg: #f1f1f1;
+  --color-emoji-button-border: #1d1d1d;
+  --color-emoji-empty-text: #6b6b6b;
+  --color-compose-busy-backdrop: rgba(10, 10, 10, 0.2);
+  --color-compose-busy-bg: #ffffff;
+  --color-compose-busy-border: #1d1d1d;
+  --color-compose-busy-text: #2a2a2a;
+  --color-compose-busy-spinner-border: #1d1d1d;
+  --color-compose-busy-spinner-active: #111111;
+  --color-boosted-by: #2a2a2a;
+  --color-notification-actor: #2a2a2a;
+  --color-reply-info: #2a2a2a;
+  --color-input-bg: #ffffff;
+  --color-input-border: #1d1d1d;
+  --color-input-text: #111111;
+  --color-input-placeholder: #6b6b6b;
+  --color-settings-select-bg: #ffffff;
+  --color-settings-select-border: #1d1d1d;
+  --color-settings-select-text: #111111;
+  --color-compose-input-bg: #ffffff;
+  --color-attachments-bg: #f1f1f1;
+  --color-attachments-border: #1d1d1d;
+  --color-attachment-add-border: #9e9e9e;
+  --color-attachment-add-text: #2a2a2a;
+  --color-delete-button-bg: #c62828;
+  --color-delete-button-text: #fff5f5;
+  --color-image-modal-delete-bg: #c62828;
+  --color-image-modal-delete-text: #fff5f5;
+}
diff --git a/src/ui/utils/characterCount.ts b/src/ui/utils/characterCount.ts
new file mode 100644
index 0000000..f00cb41
--- /dev/null
+++ b/src/ui/utils/characterCount.ts
@@ -0,0 +1,60 @@
+import type { AccountPlatform, InstanceInfo, CharacterCountStatus } from "../../domain/types";
+
+/**
+ * 플랫폼별 문자 수를 계산합니다.
+ * - Mastodon: URL을 23자로 계산
+ * - Misskey: 순수 텍스트 글자 수 (CW 포함)
+ */
+export function calculateCharacterCount(
+  text: string, 
+  platform: AccountPlatform
+): number {
+  if (platform === "misskey") {
+    // Misskey: 순수 텍스트 글자 수
+    return text.length;
+  }
+  
+  // Mastodon: URL을 23자로 계산
+  const urlRegex = /https?:\/\/[^\s]+/g;
+  const urls = text.match(urlRegex) || [];
+  const urlCharCount = urls.length * 23;
+  const textWithoutUrls = text.replace(urlRegex, '');
+  return textWithoutUrls.length + urlCharCount;
+}
+
+/**
+ * 인스턴스 정보에서 문자 수 제한을 가져옵니다.
+ */
+export function getCharacterLimit(instanceInfo: InstanceInfo): number {
+  if (instanceInfo.platform === "misskey") {
+    return instanceInfo.maxNoteLength || 3000;
+  }
+  return instanceInfo.max_toot_chars || 500;
+}
+
+/**
+ * 현재 문자 수와 제한에 따른 상태를 반환합니다.
+ */
+export function getCharacterCountStatus(
+  current: number, 
+  limit: number
+): CharacterCountStatus {
+  const percentage = (current / limit) * 100;
+  if (percentage >= 100) return "limit";
+  if (percentage >= 80) return "warning";
+  return "normal";
+}
+
+/**
+ * 문자 수 상태에 따른 CSS 클래스명을 반환합니다.
+ */
+export function getCharacterCountClassName(status: CharacterCountStatus): string {
+  return `compose-character-count-${status}`;
+}
+
+/**
+ * 기본 문자 수 제한을 반환합니다.
+ */
+export function getDefaultCharacterLimit(platform: AccountPlatform): number {
+  return platform === "misskey" ? 3000 : 500;
+}
\ No newline at end of file