diff --git a/src/App.tsx b/src/App.tsx
index 16de8c3..5355e2a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import type { Account, Status, TimelineType } from "./domain/types";
 import { AccountAdd } from "./ui/components/AccountAdd";
 import { AccountSelector } from "./ui/components/AccountSelector";
 import { ComposeBox } from "./ui/components/ComposeBox";
+import { StatusModal } from "./ui/components/StatusModal";
 import { TimelineItem } from "./ui/components/TimelineItem";
 import { useTimeline } from "./ui/hooks/useTimeline";
 import { useAppContext } from "./ui/state/AppContext";
@@ -148,6 +149,8 @@ const TimelineSection = ({
   onAddSectionRight,
   onRemoveSection,
   onReply,
+  onStatusClick,
+  onCloseStatusModal,
   onError,
   onMoveSection,
   canMoveLeft,
@@ -170,8 +173,11 @@ const TimelineSection = ({
   onAddSectionRight: (sectionId: string) => void;
   onRemoveSection: (sectionId: string) => void;
   onReply: (status: Status, account: Account | null) => void;
+  onStatusClick: (status: Status, columnAccount: Account | null) => void;
   onError: (message: string | null) => void;
+  columnAccount: Account | null;
   onMoveSection: (sectionId: string, direction: "left" | "right") => void;
+  onCloseStatusModal: () => void;
   canMoveLeft: boolean;
   canMoveRight: boolean;
   canRemoveSection: boolean;
@@ -422,6 +428,7 @@ const TimelineSection = ({
     try {
       await services.api.deleteStatus(account, status.id);
       timeline.removeItem(status.id);
+      onCloseStatusModal();
     } catch (err) {
       onError(err instanceof Error ? err.message : "게시글 삭제에 실패했습니다.");
     }
@@ -563,8 +570,9 @@ const TimelineSection = ({
                           <TimelineItem
                             key={status.id}
                             status={status}
-                            onReply={(item) => onReply(item, account)}
-                            onToggleFavourite={handleToggleFavourite}
+                             onReply={(item) => onReply(item, account)}
+                             onStatusClick={(status) => onStatusClick(status, account)}
+                             onToggleFavourite={handleToggleFavourite}
                             onToggleReblog={handleToggleReblog}
                             onDelete={handleDeleteStatus}
                             activeHandle={
@@ -688,8 +696,9 @@ const TimelineSection = ({
               <TimelineItem
                 key={status.id}
                 status={status}
-                onReply={(item) => onReply(item, account)}
-                onToggleFavourite={handleToggleFavourite}
+                 onReply={(item) => onReply(item, account)}
+                 onStatusClick={(status) => onStatusClick(status, account)}
+                 onToggleFavourite={handleToggleFavourite}
                 onToggleReblog={handleToggleReblog}
                 onDelete={handleDeleteStatus}
                 activeHandle={
@@ -822,6 +831,7 @@ export const App = () => {
     [accountsState.accounts, composeAccountId]
   );
   const [replyTarget, setReplyTarget] = useState<Status | null>(null);
+  const [selectedStatus, setSelectedStatus] = useState<Status | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [oauthLoading, setOauthLoading] = useState(false);
   const [mentionSeed, setMentionSeed] = useState<string | null>(null);
@@ -1188,6 +1198,17 @@ export const App = () => {
     setComposeAccountId(account.id);
     setReplyTarget(status);
     setMentionSeed(`@${status.accountHandle}`);
+    setSelectedStatus(null);
+  };
+
+  const handleStatusClick = (status: Status, columnAccount: Account | null) => {
+    setSelectedStatus(status);
+    // Status에 columnAccount 정보를 임시 저장
+    (status as any).__columnAccount = columnAccount;
+  };
+
+  const handleCloseStatusModal = () => {
+    setSelectedStatus(null);
   };
 
   const composeAccountSelector = (
@@ -1413,13 +1434,16 @@ export const App = () => {
                           account={sectionAccount}
                           services={services}
                           accountsState={accountsState}
-                          onAccountChange={setSectionAccount}
-                          onTimelineChange={setSectionTimeline}
-                          onAddSectionLeft={(id) => addSectionNear(id, "left")}
-                          onAddSectionRight={(id) => addSectionNear(id, "right")}
-                          onRemoveSection={removeSection}
-                          onReply={handleReply}
-                          onError={(message) => setActionError(message || null)}
+onAccountChange={setSectionAccount}
+                           onTimelineChange={setSectionTimeline}
+                           onAddSectionLeft={(id) => addSectionNear(id, "left")}
+                           onAddSectionRight={(id) => addSectionNear(id, "right")}
+                           onRemoveSection={removeSection}
+                           onReply={handleReply}
+                            onStatusClick={handleStatusClick}
+                           columnAccount={sectionAccount}
+                           onCloseStatusModal={handleCloseStatusModal}
+                           onError={(message) => setActionError(message || null)}
                           onMoveSection={moveSection}
                           canMoveLeft={index > 0}
                           canMoveRight={index < sections.length - 1}
@@ -1646,6 +1670,72 @@ export const App = () => {
           </div>
         </div>
       ) : null}
+      
+      {selectedStatus ? (
+        <StatusModal
+          status={selectedStatus}
+          account={composeAccount}
+          threadAccount={(selectedStatus as any).__columnAccount || null}
+          api={services.api}
+          onClose={handleCloseStatusModal}
+          onReply={(status) => {
+            if (composeAccount) {
+              handleReply(status, composeAccount);
+            }
+          }}
+          onToggleFavourite={async (status) => {
+            if (!composeAccount) {
+              setActionError("계정을 선택해주세요.");
+              return;
+            }
+            setActionError(null);
+            try {
+              const updated = status.favourited
+                ? await services.api.unfavourite(composeAccount, status.id)
+                : await services.api.favourite(composeAccount, status.id);
+              // Update the status in modal
+              setSelectedStatus(updated);
+            } catch (err) {
+              setActionError(err instanceof Error ? err.message : "좋아요 처리에 실패했습니다.");
+            }
+          }}
+          onToggleReblog={async (status) => {
+            if (!composeAccount) {
+              setActionError("계정을 선택해주세요.");
+              return;
+            }
+            setActionError(null);
+            try {
+              const updated = status.reblogged
+                ? await services.api.unreblog(composeAccount, status.id)
+                : await services.api.reblog(composeAccount, status.id);
+              setSelectedStatus(updated);
+            } catch (err) {
+              setActionError(err instanceof Error ? err.message : "부스트 처리에 실패했습니다.");
+            }
+          }}
+          onDelete={async (status) => {
+            if (!composeAccount) {
+              return;
+            }
+            setActionError(null);
+            try {
+              await services.api.deleteStatus(composeAccount, status.id);
+              setSelectedStatus(null);
+            } catch (err) {
+              setActionError(err instanceof Error ? err.message : "게시글 삭제에 실패했습니다.");
+            }
+          }}
+          activeHandle={
+            composeAccount?.handle ? formatHandle(composeAccount.handle, composeAccount.instanceUrl) : composeAccount?.instanceUrl ?? ""
+          }
+          activeAccountHandle={composeAccount?.handle ?? ""}
+          activeAccountUrl={composeAccount?.url ?? null}
+          showProfileImage={showProfileImages}
+          showCustomEmojis={showCustomEmojis}
+          showReactions={showMisskeyReactions}
+        />
+      ) : null}
     </div>
   );
 };
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 6ee853d..8b7529d 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -96,6 +96,30 @@ export type Status = {
   accountEmojis: CustomEmoji[];
 };
 
+export type ThreadContext = {
+  ancestors: Status[];
+  descendants: Status[];
+  conversation?: Status[]; // Misskey 전체 대화용 (시간순 정렬)
+};
+
 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 3f1d014..1e22ced 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, 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);
@@ -132,6 +193,30 @@ export class MastodonHttpClient implements MastodonApi {
     return id;
   }
 
+  async fetchContext(account: Account, statusId: string): Promise<ThreadContext> {
+    const response = await fetch(`${account.instanceUrl}/api/v1/statuses/${statusId}/context`, {
+      headers: buildHeaders(account)
+    });
+    if (!response.ok) {
+      throw new Error("스레드 컨텍스트를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as Record<string, unknown>;
+    
+    // 마스토돈 API 응답: { ancestors: Status[], descendants: Status[] }
+    const ancestors = Array.isArray(data.ancestors) 
+      ? data.ancestors.map(mapStatus).filter((status): status is Status => status !== null)
+      : [];
+    
+    const descendants = Array.isArray(data.descendants)
+      ? data.descendants.map(mapStatus).filter((status): status is Status => status !== null)
+      : [];
+
+    return {
+      ancestors,
+      descendants
+    };
+  }
+
   async createStatus(account: Account, input: CreateStatusInput): Promise<Status> {
     const response = await fetch(`${account.instanceUrl}/api/v1/statuses`, {
       method: "POST",
diff --git a/src/infra/MisskeyHttpClient.ts b/src/infra/MisskeyHttpClient.ts
index 0397ef4..6316536 100644
--- a/src/infra/MisskeyHttpClient.ts
+++ b/src/infra/MisskeyHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, 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);
@@ -158,6 +179,38 @@ export class MisskeyHttpClient implements MastodonApi {
     return id;
   }
 
+  async fetchConversation(account: Account, noteId: string): Promise<ThreadContext> {
+    const response = await fetch(`${normalizeInstanceUrl(account.instanceUrl)}/api/notes/conversation`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(buildBody(account, { noteId, limit: 100 }))
+    });
+    if (!response.ok) {
+      throw new Error("대화를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as unknown[];
+    
+    // 미스키는 시간순으로 정렬된 전체 대화를 반환
+    const conversation = data
+      .map((item) => mapMisskeyStatusWithInstance(item, account.instanceUrl))
+      .filter((status): status is Status => status !== null);
+
+    // 전체 대화에서 현재 노트를 찾아서 ancestors/descendants로 분리
+    const currentIndex = conversation.findIndex(status => status.id === noteId);
+    const ancestors = currentIndex > 0 ? conversation.slice(0, currentIndex) : [];
+    const descendants = currentIndex >= 0 && currentIndex < conversation.length - 1 
+      ? conversation.slice(currentIndex + 1) 
+      : [];
+
+    return {
+      ancestors,
+      descendants,
+      conversation // 미스키 전용: 전체 대화 보존
+    };
+  }
+
   async createStatus(account: Account, input: CreateStatusInput): Promise<Status> {
     const payload: Record<string, unknown> = {
       text: input.status,
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index c387e5e..a7eb1c0 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -1,4 +1,4 @@
-import type { Account, 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);
   }
@@ -55,4 +60,16 @@ export class UnifiedApiClient implements MastodonApi {
   unreblog(account: Account, statusId: string) {
     return this.getClient(account).unreblog(account, statusId);
   }
+
+  async fetchThreadContext(account: Account, statusId: string): Promise<ThreadContext> {
+    if (account.platform === "misskey") {
+      // MisskeyHttpClient에는 fetchConversation 메서드가 있음
+      const misskeyClient = this.getClient(account) as any;
+      return misskeyClient.fetchConversation(account, statusId);
+    } else {
+      // MastodonHttpClient에는 fetchContext 메서드가 있음
+      const mastodonClient = this.getClient(account) as any;
+      return mastodonClient.fetchContext(account, statusId);
+    }
+  }
 }
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 baeaa3f..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"
@@ -615,9 +687,25 @@ export const ComposeBox = ({
           role="dialog"
           aria-modal="true"
           onWheel={(event) => event.preventDefault()}
+          onMouseDown={(event) => {
+            if (!(event.target instanceof Element)) {
+              return;
+            }
+            if (!event.target.closest(".image-modal-content")) {
+              setActiveImageId(null);
+            }
+          }}
         >
           <div className="image-modal-backdrop" onClick={() => setActiveImageId(null)} />
-          <div className="image-modal-content" ref={imageContainerRef}>
+          <div
+            className="image-modal-content"
+            ref={imageContainerRef}
+            onClick={(event) => {
+              if (event.target === event.currentTarget) {
+                setActiveImageId(null);
+              }
+            }}
+          >
             <div className="image-modal-actions">
               <button
                 type="button"
diff --git a/src/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
new file mode 100644
index 0000000..8849f2a
--- /dev/null
+++ b/src/ui/components/StatusModal.tsx
@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from "react";
+import type { Account, Status, ThreadContext } from "../../domain/types";
+import { TimelineItem } from "./TimelineItem";
+import boostIconUrl from "../assets/boost-icon.svg";
+
+export const StatusModal = ({
+  status,
+  account,
+  threadAccount,
+  api,
+  onClose,
+  onReply,
+  onToggleFavourite,
+  onToggleReblog,
+  onDelete,
+  activeHandle,
+  activeAccountHandle,
+  activeAccountUrl,
+  showProfileImage,
+  showCustomEmojis,
+  showReactions
+}: {
+  status: Status;
+  account: Account | null;
+  threadAccount: Account | null;
+  api: any; // UnifiedApiClient
+  onClose: () => void;
+  onReply: (status: Status) => void;
+  onToggleFavourite: (status: Status) => void;
+  onToggleReblog: (status: Status) => void;
+  onDelete?: (status: Status) => void;
+  activeHandle: string;
+  activeAccountHandle: string;
+  activeAccountUrl: string | null;
+  showProfileImage: boolean;
+  showCustomEmojis: boolean;
+  showReactions: boolean;
+}) => {
+  const displayStatus = status.reblog ?? status;
+  const boostedBy = status.reblog ? status.boostedBy : null;
+  
+  // 스레드 컨텍스트 상태
+  const [threadContext, setThreadContext] = useState<ThreadContext | null>(null);
+  const [isLoadingThread, setIsLoadingThread] = useState(false);
+  const [threadError, setThreadError] = useState<string | null>(null);
+
+  // 스레드 컨텍스트 가져오기
+  useEffect(() => {
+    if (!account || !api) return;
+    
+    const fetchThreadContext = async () => {
+      setIsLoadingThread(true);
+      setThreadError(null);
+      
+      try {
+        // 스레드를 가져올 때는 해당 게시글이 속한 컬럼의 계정 사용
+        const targetAccount = threadAccount || account;
+        const context = await api.fetchThreadContext(targetAccount, displayStatus.id);
+        setThreadContext(context);
+      } catch (error) {
+        console.error("스레드 컨텍스트 로딩 실패:", error);
+        setThreadError("스레드를 불러오지 못했습니다.");
+      } finally {
+        setIsLoadingThread(false);
+      }
+    };
+
+    fetchThreadContext();
+  }, [account, api, displayStatus.id]);
+
+  return (
+    <div
+      className="status-modal"
+      role="dialog"
+      aria-modal="true"
+      aria-label="글 보기"
+    >
+      <div className="status-modal-backdrop" onClick={onClose} />
+      <div className="status-modal-content">
+        <div className="status-modal-header">
+          <h3 className="status-modal-title">게시글</h3>
+          <div className="status-modal-header-actions">
+            {isLoadingThread && (
+              <div className="thread-loading-header">
+                <div className="thread-loading-spinner" />
+                <span className="thread-loading-text">스레드 불러오는 중</span>
+              </div>
+            )}
+            <button
+              type="button"
+              className="icon-button"
+              onClick={onClose}
+              aria-label="닫기"
+            >
+              <svg viewBox="0 0 24 24">
+                <line x1="6" y1="6" x2="18" y2="18" />
+                <line x1="18" y1="6" x2="6" y2="18" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        
+        <div className="status-modal-body">
+          {/* 스레드 컨텍스트 렌더링 */}
+          {threadContext && threadContext.ancestors.length > 0 && (
+            <div className="thread-context thread-ancestors">
+              {threadContext.ancestors.map((ancestorStatus) => (
+                <div key={ancestorStatus.id} className="thread-item thread-ancestor">
+                  <TimelineItem
+                    status={ancestorStatus}
+                    onReply={onReply}
+                    onToggleFavourite={onToggleFavourite}
+                    onToggleReblog={onToggleReblog}
+                    onDelete={onDelete || (() => {})}
+                    activeHandle={activeHandle}
+                    activeAccountHandle={activeAccountHandle}
+                    activeAccountUrl={activeAccountUrl}
+                    showProfileImage={showProfileImage}
+                    showCustomEmojis={showCustomEmojis}
+                    showReactions={showReactions}
+                    disableActions={!account}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {boostedBy ? (
+            <div className="boosted-by">
+              <img src={boostIconUrl} alt="" aria-hidden="true" />
+              <span>{boostedBy.name || boostedBy.handle} 님이 부스트함</span>
+            </div>
+          ) : null}
+          
+          <TimelineItem
+            status={status}
+            onReply={onReply}
+            onToggleFavourite={onToggleFavourite}
+            onToggleReblog={onToggleReblog}
+            onDelete={onDelete || (() => {})}
+            activeHandle={activeHandle}
+            activeAccountHandle={activeAccountHandle}
+            activeAccountUrl={activeAccountUrl}
+            showProfileImage={showProfileImage}
+            showCustomEmojis={showCustomEmojis}
+            showReactions={showReactions}
+            disableActions={!account}
+          />
+          
+          {/* 스레드 컨텍스트 - 후손 게시물들 */}
+          {threadContext && threadContext.descendants.length > 0 && (
+            <div className="thread-context thread-descendants">
+              {/* 현재 게시물 이후에 연결선 */}
+              <div className="thread-connector-to-descendants" />
+              
+              {/* 후손 게시물들 */}
+              {threadContext.descendants.map((descendantStatus) => (
+                <div key={descendantStatus.id} className="thread-item thread-descendant">
+                  <div className="thread-line" />
+                  <TimelineItem
+                    status={descendantStatus}
+                    onReply={onReply}
+                    onToggleFavourite={onToggleFavourite}
+                    onToggleReblog={onToggleReblog}
+                    onDelete={onDelete || (() => {})}
+                    activeHandle={activeHandle}
+                    activeAccountHandle={activeAccountHandle}
+                    activeAccountUrl={activeAccountUrl}
+                    showProfileImage={showProfileImage}
+                    showCustomEmojis={showCustomEmojis}
+                    showReactions={showReactions}
+                    disableActions={!account}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+          
+          {/* 로딩 상태는 헤더에서 처리 */}
+          
+          {threadError && (
+            <div className="thread-error">
+              <span>{threadError}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/ui/components/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index 4c665bf..dd9134a 100644
--- a/src/ui/components/TimelineItem.tsx
+++ b/src/ui/components/TimelineItem.tsx
@@ -11,6 +11,7 @@ export const TimelineItem = ({
   onToggleFavourite,
   onToggleReblog,
   onDelete,
+  onStatusClick,
   activeHandle,
   activeAccountHandle,
   activeAccountUrl,
@@ -24,6 +25,7 @@ export const TimelineItem = ({
   onToggleFavourite: (status: Status) => void;
   onToggleReblog: (status: Status) => void;
   onDelete: (status: Status) => void;
+  onStatusClick?: (status: Status) => void;
   activeHandle: string;
   activeAccountHandle: string;
   activeAccountUrl: string | null;
@@ -35,19 +37,59 @@ export const TimelineItem = ({
   const notification = status.notification;
   const displayStatus = notification?.target ?? status.reblog ?? status;
   const boostedBy = notification ? null : status.reblog ? status.boostedBy : null;
-  const [activeImageUrl, setActiveImageUrl] = useState<string | null>(null);
+  const [activeImageIndex, setActiveImageIndex] = useState<number | null>(null);
   const [showContent, setShowContent] = useState(() => displayStatus.spoilerText.length === 0);
   const [imageZoom, setImageZoom] = useState(1);
   const [imageOffset, setImageOffset] = useState({ x: 0, y: 0 });
   const [baseSize, setBaseSize] = useState<{ width: number; height: number } | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
   const imageContainerRef = useRef<HTMLDivElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
+  const menuRef = useRef<HTMLDivElement | null>(null);
   const dragStateRef = useRef<{ startX: number; startY: number; originX: number; originY: number } | null>(
     null
   );
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
   const attachments = displayStatus.mediaAttachments;
+  const activeImageUrl = activeImageIndex !== null ? attachments[activeImageIndex]?.url ?? null : null;
+
+  const goToPrevImage = useCallback(() => {
+    if (activeImageIndex === null || attachments.length <= 1) return;
+    const prevIndex = activeImageIndex === 0 ? attachments.length - 1 : activeImageIndex - 1;
+    setActiveImageIndex(prevIndex);
+    setImageZoom(1);
+    setImageOffset({ x: 0, y: 0 });
+  }, [activeImageIndex, attachments.length]);
+
+  const goToNextImage = useCallback(() => {
+    if (activeImageIndex === null || attachments.length <= 1) return;
+    const nextIndex = activeImageIndex === attachments.length - 1 ? 0 : activeImageIndex + 1;
+    setActiveImageIndex(nextIndex);
+    setImageZoom(1);
+    setImageOffset({ x: 0, y: 0 });
+  }, [activeImageIndex, attachments.length]);
+
+  useEffect(() => {
+    if (activeImageIndex === null) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        goToPrevImage();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        goToNextImage();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        setActiveImageIndex(null);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [activeImageIndex, goToPrevImage, goToNextImage]);
+
   const previewCard = displayStatus.card;
   const mentionNames = useMemo(() => {
     if (!displayStatus.mentions || displayStatus.mentions.length === 0) {
@@ -135,6 +177,28 @@ export const TimelineItem = ({
     () => new Date(displayStatus.createdAt).toLocaleString(),
     [displayStatus.createdAt]
   );
+  const originUrl = useMemo(() => {
+    if (displayStatus.url) {
+      return displayStatus.url;
+    }
+    const hostFromAccount = activeAccountUrl
+      ? (() => {
+          try {
+            return new URL(activeAccountUrl).hostname;
+          } catch {
+            return "";
+          }
+        })()
+      : "";
+    const hostFromHandle = activeHandle.includes("@")
+      ? activeHandle.split("@").pop() ?? ""
+      : "";
+    const host = hostFromAccount || hostFromHandle;
+    if (!host || !displayStatus.id) {
+      return null;
+    }
+    return `https://${host}/notes/${displayStatus.id}`;
+  }, [activeAccountUrl, activeHandle, displayStatus.id, displayStatus.url]);
   const handleHeaderClick = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
       if (!displayStatus.accountUrl) {
@@ -166,6 +230,52 @@ export const TimelineItem = ({
     },
     [displayStatus.accountUrl]
   );
+
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMenuOpen(false);
+      }
+    };
+    const handleClick = (event: MouseEvent) => {
+      if (!menuRef.current || !(event.target instanceof Node)) {
+        return;
+      }
+      if (!menuRef.current.contains(event.target)) {
+        setMenuOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("click", handleClick);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("click", handleClick);
+    };
+  }, [menuOpen]);
+
+  const handleOpenOrigin = useCallback(() => {
+    if (!originUrl) {
+      return;
+    }
+    window.open(originUrl, "_blank", "noopener,noreferrer");
+    setMenuOpen(false);
+  }, [originUrl]);
+
+  const handleStatusClick = useCallback(
+    (event: React.MouseEvent<HTMLElement>) => {
+      if (!onStatusClick) {
+        return;
+      }
+      if (event.target instanceof Element && event.target.closest("a")) {
+        return;
+      }
+      onStatusClick(displayStatus);
+    },
+    [displayStatus, onStatusClick]
+  );
   const visibilityIcon = useMemo(() => {
     switch (displayStatus.visibility) {
       case "public":
@@ -508,9 +618,34 @@ export const TimelineItem = ({
         </div>
       ) : null}
       <header className="status-header-main">
-        {showProfileImage ? (
-          <span
-            className="status-avatar"
+        <div className="status-header-info">
+          {showProfileImage ? (
+            <span
+              className="status-avatar"
+              onClick={handleHeaderClick}
+              onKeyDown={handleHeaderKeyDown}
+              role={displayStatus.accountUrl ? "link" : undefined}
+              tabIndex={displayStatus.accountUrl ? 0 : undefined}
+              aria-label={
+                displayStatus.accountUrl
+                  ? `${displayStatus.accountName || displayStatus.accountHandle} 프로필 열기`
+                  : undefined
+              }
+              data-interactive={displayStatus.accountUrl ? "true" : undefined}
+            >
+              {displayStatus.accountAvatarUrl ? (
+                <img
+                  src={displayStatus.accountAvatarUrl}
+                  alt={`${displayStatus.accountName || displayStatus.accountHandle} 프로필 이미지`}
+                  loading="lazy"
+                />
+              ) : (
+                <span className="status-avatar-fallback" aria-hidden="true" />
+              )}
+            </span>
+          ) : null}
+          <div
+            className="status-account"
             onClick={handleHeaderClick}
             onKeyDown={handleHeaderKeyDown}
             role={displayStatus.accountUrl ? "link" : undefined}
@@ -522,48 +657,55 @@ export const TimelineItem = ({
             }
             data-interactive={displayStatus.accountUrl ? "true" : undefined}
           >
-            {displayStatus.accountAvatarUrl ? (
-              <img
-                src={displayStatus.accountAvatarUrl}
-                alt={`${displayStatus.accountName || displayStatus.accountHandle} 프로필 이미지`}
-                loading="lazy"
+            <strong>
+              {displayStatus.accountUrl ? (
+                <a href={displayStatus.accountUrl} target="_blank" rel="noreferrer">
+                  {accountNameNode}
+                </a>
+              ) : (
+                accountNameNode
+              )}
+            </strong>
+            <span>
+              {displayStatus.accountUrl ? (
+                <a href={displayStatus.accountUrl} target="_blank" rel="noreferrer">
+                  @{displayHandle}
+                </a>
+              ) : (
+                `@${displayHandle}`
+              )}
+            </span>
+          </div>
+        </div>
+        <div className="status-menu section-menu" ref={menuRef}>
+          <button
+            type="button"
+            className="icon-button"
+            aria-label="게시글 메뉴 열기"
+            aria-haspopup="menu"
+            aria-expanded={menuOpen}
+            onClick={() => setMenuOpen((current) => !current)}
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="5" r="1.7" />
+              <circle cx="12" cy="12" r="1.7" />
+              <circle cx="12" cy="19" r="1.7" />
+            </svg>
+          </button>
+          {menuOpen ? (
+            <>
+              <div
+                className="overlay-backdrop"
+                onClick={() => setMenuOpen(false)}
+                aria-hidden="true"
               />
-            ) : (
-              <span className="status-avatar-fallback" aria-hidden="true" />
-            )}
-          </span>
-        ) : null}
-        <div
-          className="status-account"
-          onClick={handleHeaderClick}
-          onKeyDown={handleHeaderKeyDown}
-          role={displayStatus.accountUrl ? "link" : undefined}
-          tabIndex={displayStatus.accountUrl ? 0 : undefined}
-          aria-label={
-            displayStatus.accountUrl
-              ? `${displayStatus.accountName || displayStatus.accountHandle} 프로필 열기`
-              : undefined
-          }
-          data-interactive={displayStatus.accountUrl ? "true" : undefined}
-        >
-          <strong>
-            {displayStatus.accountUrl ? (
-              <a href={displayStatus.accountUrl} target="_blank" rel="noreferrer">
-                {accountNameNode}
-              </a>
-            ) : (
-              accountNameNode
-            )}
-          </strong>
-          <span>
-            {displayStatus.accountUrl ? (
-              <a href={displayStatus.accountUrl} target="_blank" rel="noreferrer">
-                @{displayHandle}
-              </a>
-            ) : (
-              `@${displayHandle}`
-            )}
-          </span>
+              <div className="section-menu-panel status-menu-panel" role="menu">
+                <button type="button" onClick={handleOpenOrigin} disabled={!originUrl}>
+                  원본 서버에서 보기
+                </button>
+              </div>
+            </>
+          ) : null}
         </div>
       </header>
       {displayStatus.spoilerText ? (
@@ -596,16 +738,17 @@ export const TimelineItem = ({
           ) : null}
         </>
       ) : null}
-      <div className="status-time">
+      <div 
+        className="status-time"
+        onClick={handleStatusClick}
+        role={onStatusClick ? "button" : undefined}
+        tabIndex={onStatusClick ? 0 : undefined}
+        aria-label={onStatusClick ? "글 보기" : undefined}
+        data-interactive={onStatusClick ? "true" : undefined}
+      >
         {visibilityIcon}
         {visibilityIcon ? <span className="time-separator" aria-hidden="true">·</span> : null}
-        {displayStatus.url ? (
-          <a href={displayStatus.url} target="_blank" rel="noreferrer" className="time-link">
-            <time dateTime={displayStatus.createdAt}>{timestamp}</time>
-          </a>
-        ) : (
-          <time dateTime={displayStatus.createdAt}>{timestamp}</time>
-        )}
+        <time dateTime={displayStatus.createdAt}>{timestamp}</time>
       </div>
       {shouldShowReactions ? (
         <div className="status-reactions" aria-label="받은 리액션">
@@ -665,7 +808,7 @@ export const TimelineItem = ({
               </>
             ) : null}
             {showContent
-              ? attachments.map((item) => (
+              ? attachments.map((item, index) => (
                   <button
                     key={item.id}
                     type="button"
@@ -673,7 +816,7 @@ export const TimelineItem = ({
                     onClick={() => {
                       setImageZoom(1);
                       setImageOffset({ x: 0, y: 0 });
-                      setActiveImageUrl(item.url);
+                      setActiveImageIndex(index);
                     }}
                     aria-label={item.description ? `이미지 보기: ${item.description}` : "이미지 보기"}
                   >
@@ -741,16 +884,56 @@ export const TimelineItem = ({
           role="dialog"
           aria-modal="true"
           onWheel={(event) => event.preventDefault()}
+          onMouseDown={(event) => {
+            if (!(event.target instanceof Element)) {
+              return;
+            }
+            if (!event.target.closest(".image-modal-content")) {
+              setActiveImageIndex(null);
+            }
+          }}
         >
-          <div className="image-modal-backdrop" onClick={() => setActiveImageUrl(null)} />
-          <div className="image-modal-content" ref={imageContainerRef}>
+          <div className="image-modal-backdrop" onClick={() => setActiveImageIndex(null)} />
+          <div
+            className="image-modal-content"
+            ref={imageContainerRef}
+            onClick={(event) => {
+              if (event.target === event.currentTarget) {
+                setActiveImageIndex(null);
+              }
+            }}
+          >
             <button
               type="button"
               className="image-modal-close"
-              onClick={() => setActiveImageUrl(null)}
+              onClick={() => setActiveImageIndex(null)}
             >
               닫기
             </button>
+            {attachments.length > 1 ? (
+              <button
+                type="button"
+                className="image-modal-nav image-modal-nav-prev"
+                onClick={goToPrevImage}
+                aria-label="이전 이미지"
+              >
+                <svg viewBox="0 0 24 24" width="24" height="24">
+                  <polyline points="15 18 9 12 15 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            ) : null}
+            {attachments.length > 1 ? (
+              <button
+                type="button"
+                className="image-modal-nav image-modal-nav-next"
+                onClick={goToNextImage}
+                aria-label="다음 이미지"
+              >
+                <svg viewBox="0 0 24 24" width="24" height="24">
+                  <polyline points="9 18 15 12 9 6" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+            ) : null}
             <img
               src={activeImageUrl}
               alt="첨부 이미지 원본"
@@ -790,6 +973,11 @@ export const TimelineItem = ({
                 setIsDragging(true);
               }}
             />
+            {attachments.length > 1 ? (
+              <div className="image-modal-counter">
+                {(activeImageIndex ?? 0) + 1} / {attachments.length}
+              </div>
+            ) : null}
           </div>
         </div>
       ) : null}
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 6d8ed09..9f19f18 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,34 @@ 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 {
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.status-header-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+  flex-direction: row;
+}
+
+.status-menu {
+  margin-left: auto;
 }
 
 .status-avatar,
@@ -983,6 +1067,11 @@ button.ghost {
   gap: 4px;
 }
 
+.status header .status-header-info {
+  flex-direction: row;
+  gap: 8px;
+}
+
 .custom-emoji {
   width: auto;
   height: 1.5em;
@@ -1001,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;
@@ -1019,7 +1108,7 @@ button.ghost {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #c9b9a6;
+  background: var(--color-avatar-fallback);
 }
 
 .status-header {
@@ -1028,7 +1117,7 @@ button.ghost {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
 }
 
 .status-header div {
@@ -1037,13 +1126,33 @@ button.ghost {
   gap: 4px;
 }
 
+.status header .status-header-info {
+  flex-direction: row;
+  align-items: center;
+}
+
+.status-menu-panel {
+  min-width: 180px;
+}
+
+.status-menu .icon-button {
+  width: 32px;
+  height: 32px;
+}
+
 .status header a {
   color: inherit;
   text-decoration: none;
 }
 
+.status-account strong {
+  display: block;
+  line-height: 1.2;
+  max-height: 1.4em;
+}
+
 .time-link {
-  color: inherit;
+  color: var(--color-status-meta);
   text-decoration: none;
 }
 
@@ -1073,12 +1182,20 @@ 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;
 }
 
+.status-time[role="button"] {
+  cursor: pointer;
+}
+
+.status-time[role="button"]:hover {
+  color: var(--color-link);
+}
+
 .status-time a {
   color: inherit;
   text-decoration: none;
@@ -1099,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 {
@@ -1147,7 +1264,7 @@ button.ghost {
 }
 
 .status-text a {
-  color: #7c6152;
+  color: var(--color-status-link);
   text-decoration: underline;
   word-break: break-word;
 }
@@ -1159,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 {
@@ -1183,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 {
@@ -1210,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;
 }
 
@@ -1252,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 {
@@ -1261,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;
@@ -1312,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 {
@@ -1332,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 {
@@ -1342,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;
 }
@@ -1359,6 +1529,49 @@ button.ghost {
   z-index: 2;
 }
 
+.image-modal-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 2;
+  transition: background 0.2s;
+}
+
+.image-modal-nav:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.image-modal-nav-prev {
+  left: 12px;
+}
+
+.image-modal-nav-next {
+  right: 12px;
+}
+
+.image-modal-counter {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 6px 14px;
+  border-radius: 16px;
+  font-size: 14px;
+  z-index: 2;
+}
+
 .confirm-modal {
   position: fixed;
   inset: 0;
@@ -1374,8 +1587,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;
@@ -1393,6 +1606,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 {
@@ -1408,7 +1624,88 @@ button.ghost {
 
 .confirm-actions .delete-button {
   width: auto;
-  color: #fffaf2;
+  color: var(--color-delete-button-text);
+}
+
+.status-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--color-status-backdrop);
+}
+
+.status-modal-content {
+  position: relative;
+  z-index: 1;
+  width: min(92vw, 600px);
+  max-height: 80vh;
+  overflow: hidden;
+  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: var(--shadow-status-modal);
+}
+
+.status-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 12px;
+  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 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.thread-loading-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-status-header);
+}
+
+.thread-loading-spinner {
+  width: 12px;
+  height: 12px;
+  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;
+}
+
+.thread-loading-text {
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+
+
+.status-modal-body {
+  padding: 16px;
+  overflow-y: auto;
+  max-height: calc(80vh - 100px);
 }
 
 .boosted-by {
@@ -1416,7 +1713,7 @@ button.ghost {
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-boosted-by);
   margin-bottom: 8px;
 }
 
@@ -1430,7 +1727,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-notification-actor);
   margin-bottom: 8px;
 }
 
@@ -1446,7 +1743,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-reply-info);
   margin-bottom: 8px;
 }
 
@@ -1467,7 +1764,7 @@ button.ghost {
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  background: #d8d1c7;
+  background: var(--color-switch-track);
   transition: background 0.2s ease;
 }
 
@@ -1477,14 +1774,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 {
@@ -1497,17 +1794,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;
 }
@@ -1516,7 +1813,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;
@@ -1536,7 +1833,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 {
@@ -1578,6 +1875,97 @@ button.ghost {
   display: none;
 }
 
+/* 스레드 컨텍스트 스타일 */
+.thread-context.thread-ancestors {
+  margin-bottom: 16px; /* 본문 상단 스레드: 하단 마진 */
+}
+
+.thread-context.thread-descendants {
+  margin-top: 16px; /* 본문 하단 스레드: 상단 마진 */
+}
+
+/* 스레드가 없을 때는 상단 여백 제거 */
+.thread-context:empty {
+  display: none;
+}
+
+.thread-item {
+  margin-bottom: 12px;
+  margin-left: 24px; /* leading margin으로 계층 표현 */
+}
+
+/* 마지막 스레드 아이템에는 하단 여백 제거 */
+.thread-item:last-child {
+  margin-bottom: 0;
+}
+
+.thread-item.thread-ancestor {
+  opacity: 0.85;
+}
+
+.thread-item.thread-descendant {
+  opacity: 0.9;
+}
+
+.thread-item.thread-ancestor .status,
+.thread-item.thread-descendant .status {
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--color-thread-border);
+  background: var(--color-thread-bg);
+}
+
+/* 스레드 커넥터 불필요하여 제거 */
+
+.thread-error {
+  padding: 12px;
+  text-align: center;
+  font-size: 13px;
+  border-radius: 10px;
+  margin: 8px 0; /* 위아래 여백 축소 */
+}
+
+/* 스레드 로딩은 헤더에서 처리하여 컨텐츠 영역에 영향 주지 않음 */
+
+@keyframes thread-loading-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.thread-error {
+  color: var(--color-thread-error-text);
+  background: var(--color-thread-error-bg);
+  border: 1px solid var(--color-thread-error-border);
+}
+
+/* 스레드 아이템 내부의 액션 버튼들은 작게 표시 */
+.thread-item .status-actions button {
+  height: 28px;
+  padding: 0 8px;
+  font-size: 12px;
+}
+
+.thread-item .icon-button {
+  width: 32px;
+  height: 32px;
+}
+
+.thread-item .status-text {
+  font-size: 14px;
+}
+
+.thread-item .rich-content {
+  font-size: 14px;
+}
+
+.thread-item .status-time {
+  font-size: 11px;
+}
+
 @media (max-width: 900px) {
   .timeline-column-header {
     flex-direction: row;
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 1d04698..7a4ba4b 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -1,3671 +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"] .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"] .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"] .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"]) .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="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="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"]) .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"] .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="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="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"] .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