From 7be5d07ed6f01f85bc60e18a8548c82e242fbcd8 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Tue, 6 Jan 2026 21:17:04 +0900
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=20=EB=B0=B0=EA=B2=BD=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=8B=AB=EA=B8=B0=20(#85)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/ComposeBox.tsx   | 18 +++++++++++++++++-
 src/ui/components/TimelineItem.tsx | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index baeaa3f..49d77a3 100644
--- a/src/ui/components/ComposeBox.tsx
+++ b/src/ui/components/ComposeBox.tsx
@@ -615,9 +615,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/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index d37f2ab..dbf3fe9 100644
--- a/src/ui/components/TimelineItem.tsx
+++ b/src/ui/components/TimelineItem.tsx
@@ -742,9 +742,25 @@ 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")) {
+              setActiveImageUrl(null);
+            }
+          }}
         >
           <div className="image-modal-backdrop" onClick={() => setActiveImageUrl(null)} />
-          <div className="image-modal-content" ref={imageContainerRef}>
+          <div
+            className="image-modal-content"
+            ref={imageContainerRef}
+            onClick={(event) => {
+              if (event.target === event.currentTarget) {
+                setActiveImageUrl(null);
+              }
+            }}
+          >
             <button
               type="button"
               className="image-modal-close"

From 08fb801a6d60e6181fcd680d145020fe9313971b Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 11:42:38 +0900
Subject: [PATCH 02/16] =?UTF-8?q?feat:=20=ED=83=80=EC=9E=84=EC=8A=A4?=
 =?UTF-8?q?=ED=83=AC=ED=94=84=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EA=B8=80?=
 =?UTF-8?q?=20=ED=8C=9D=EC=97=85=20=EB=AA=A8=EB=8B=AC=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatusModal 컴포넌트 신규 구현
  - 타임스탬프 클릭 시 글 상세 내용 팝업 표시
  - 스크롤 가능한 모달 디자인 (최대 높이 80vh)
  - 답글, 좋아요, 부스트, 삭제 기능 모두 지원
  - 접근성 속성 (aria-modal, role="button") 포함

- TimelineItem 컴포넌트 수정
  - 타임스탬프 클릭 핸들러 추가 (onStatusClick prop)
  - 기존 URL 링크 기능은 유지하되 팝업 우선
  - hover 효과 및 커서 포인터 스타일링

- App.tsx 상태 관리
  - selectedStatus 상태로 팝업 관리
  - handleStatusClick, handleCloseStatusModal 핸들러 추가
  - StatusModal 렌더링 및 props 전달

- components.css 스타일링
  - .status-modal 클래스 추가
  - .status-modal-backdrop 틴트 처리
  - .status-time 클릭 가능한 버튼 스타일

- TimelineSection props 확장
  - onStatusClick, onCloseStatusModal prop 추가
  - 모든 TimelineItem에 prop 전달
---
 src/App.tsx                        | 98 +++++++++++++++++++++++++++---
 src/ui/components/StatusModal.tsx  | 85 ++++++++++++++++++++++++++
 src/ui/components/TimelineItem.tsx | 32 +++++++---
 src/ui/styles/components.css       | 70 +++++++++++++++++++++
 4 files changed, 270 insertions(+), 15 deletions(-)
 create mode 100644 src/ui/components/StatusModal.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 16de8c3..67da28a 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,10 @@ const TimelineSection = ({
   onAddSectionRight: (sectionId: string) => void;
   onRemoveSection: (sectionId: string) => void;
   onReply: (status: Status, account: Account | null) => void;
+  onStatusClick: (status: Status) => void;
   onError: (message: string | null) => void;
   onMoveSection: (sectionId: string, direction: "left" | "right") => void;
+  onCloseStatusModal: () => void;
   canMoveLeft: boolean;
   canMoveRight: boolean;
   canRemoveSection: boolean;
@@ -422,6 +427,7 @@ const TimelineSection = ({
     try {
       await services.api.deleteStatus(account, status.id);
       timeline.removeItem(status.id);
+      onCloseStatusModal();
     } catch (err) {
       onError(err instanceof Error ? err.message : "게시글 삭제에 실패했습니다.");
     }
@@ -564,6 +570,7 @@ const TimelineSection = ({
                             key={status.id}
                             status={status}
                             onReply={(item) => onReply(item, account)}
+                            onStatusClick={onStatusClick}
                             onToggleFavourite={handleToggleFavourite}
                             onToggleReblog={handleToggleReblog}
                             onDelete={handleDeleteStatus}
@@ -689,6 +696,7 @@ const TimelineSection = ({
                 key={status.id}
                 status={status}
                 onReply={(item) => onReply(item, account)}
+                onStatusClick={onStatusClick}
                 onToggleFavourite={handleToggleFavourite}
                 onToggleReblog={handleToggleReblog}
                 onDelete={handleDeleteStatus}
@@ -822,6 +830,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 +1197,15 @@ export const App = () => {
     setComposeAccountId(account.id);
     setReplyTarget(status);
     setMentionSeed(`@${status.accountHandle}`);
+    setSelectedStatus(null);
+  };
+
+  const handleStatusClick = (status: Status) => {
+    setSelectedStatus(status);
+  };
+
+  const handleCloseStatusModal = () => {
+    setSelectedStatus(null);
   };
 
   const composeAccountSelector = (
@@ -1413,13 +1431,15 @@ 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}
+                           onCloseStatusModal={handleCloseStatusModal}
+                           onError={(message) => setActionError(message || null)}
                           onMoveSection={moveSection}
                           canMoveLeft={index > 0}
                           canMoveRight={index < sections.length - 1}
@@ -1646,6 +1666,70 @@ export const App = () => {
           </div>
         </div>
       ) : null}
+      
+      {selectedStatus ? (
+        <StatusModal
+          status={selectedStatus}
+          account={composeAccount}
+          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/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
new file mode 100644
index 0000000..e150c11
--- /dev/null
+++ b/src/ui/components/StatusModal.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import type { Account, Status } from "../../domain/types";
+import { TimelineItem } from "./TimelineItem";
+import boostIconUrl from "../assets/boost-icon.svg";
+
+export const StatusModal = ({
+  status,
+  account,
+  onClose,
+  onReply,
+  onToggleFavourite,
+  onToggleReblog,
+  onDelete,
+  activeHandle,
+  activeAccountHandle,
+  activeAccountUrl,
+  showProfileImage,
+  showCustomEmojis,
+  showReactions
+}: {
+  status: Status;
+  account: Account | null;
+  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;
+
+  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>
+          <button
+            type="button"
+            className="status-modal-close"
+            onClick={onClose}
+            aria-label="닫기"
+          >
+            닫기
+          </button>
+        </div>
+        
+        <div className="status-modal-body">
+          {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}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/ui/components/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index 2b14ea1..aee7139 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;
@@ -166,6 +168,19 @@ export const TimelineItem = ({
     },
     [displayStatus.accountUrl]
   );
+
+  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":
@@ -596,16 +611,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="받은 리액션">
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 6d8ed09..719194a 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1079,6 +1079,14 @@ button.ghost {
   gap: 6px;
 }
 
+.status-time[role="button"] {
+  cursor: pointer;
+}
+
+.status-time[role="button"]:hover {
+  color: #3b5fa8;
+}
+
 .status-time a {
   color: inherit;
   text-decoration: none;
@@ -1411,6 +1419,68 @@ button.ghost {
   color: #fffaf2;
 }
 
+.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: rgba(15, 13, 11, 0.7);
+}
+
+.status-modal-content {
+  position: relative;
+  z-index: 1;
+  width: min(92vw, 600px);
+  max-height: 80vh;
+  overflow: hidden;
+  background: #fffdfa;
+  border: 1px solid #e2ddd5;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+}
+
+.status-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid #e2ddd5;
+}
+
+.status-modal-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.status-modal-close {
+  background: none;
+  color: #3b5fa8;
+  border: none;
+  padding: 6px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.status-modal-close:hover {
+  background: #f3efe7;
+}
+
+.status-modal-body {
+  padding: 0;
+  overflow-y: auto;
+  max-height: calc(80vh - 60px);
+}
+
 .boosted-by {
   display: flex;
   align-items: center;

From 35cabde61b6a07a452cce84444df6c7392f829f8 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 11:51:30 +0900
Subject: [PATCH 03/16] =?UTF-8?q?fix:=20StatusModal=20=ED=85=8C=EB=A7=88?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=83=89=EC=83=81=20=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EC=A7=80=EC=9B=90=20=EB=B3=B4=EC=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 라이트 테마별 StatusModal 스타일 추가
  - christmas, sky-pink, monochrome 테마 지원
  - 배경, 내용, 헤더, 버튼 색상 조정

- 하드코딩된 색상 모드 StatusModal 스타일 추가
  - 다크 모드 기본 스타일
  - 각 테마별 다크 모드 스타일 조정

- StatusModal 전체 테마 일관성 확보
  - backdrop 틴트 색상 테마 맞춤
  - content 배경색 테마 맞춤
  - header, title, close 버튼 색상 테마 맞춤
---
 src/ui/styles/theme.css | 325 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 324 insertions(+), 1 deletion(-)

diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index 1d04698..76ca526 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -1,4 +1,4 @@
-:root[data-theme="christmas"] .sidebar-description {
+:root[data-theme="christmas"] .sidebar-description {
   color: #7b3f3f;
 }
 
@@ -22,6 +22,31 @@
   background: rgba(32, 16, 15, 0.65);
 }
 
+:root[data-theme="christmas"] .status-modal-backdrop {
+  background: rgba(32, 16, 15, 0.7);
+}
+
+:root[data-theme="christmas"] .status-modal-content {
+  background: #fff7f2;
+  border: 1px solid #ead7cc;
+}
+
+:root[data-theme="christmas"] .status-modal-header {
+  border-bottom: 1px solid #ead7cc;
+}
+
+:root[data-theme="christmas"] .status-modal-title {
+  color: #5b1f1f;
+}
+
+:root[data-theme="christmas"] .status-modal-close {
+  color: #8f2f2f;
+}
+
+:root[data-theme="christmas"] .status-modal-close:hover {
+  background: #f3e4dc;
+}
+
 :root[data-theme="christmas"] .overlay-backdrop,
 body[data-theme="christmas"] .overlay-backdrop {
   background: rgba(91, 31, 31, 0.12);
@@ -294,6 +319,31 @@ body[data-theme="christmas"] .compose-icon-button {
   background: rgba(29, 51, 74, 0.6);
 }
 
+:root[data-theme="sky-pink"] .status-modal-backdrop {
+  background: rgba(29, 51, 74, 0.7);
+}
+
+:root[data-theme="sky-pink"] .status-modal-content {
+  background: #f7fbff;
+  border: 1px solid #d6e5f2;
+}
+
+:root[data-theme="sky-pink"] .status-modal-header {
+  border-bottom: 1px solid #d6e5f2;
+}
+
+:root[data-theme="sky-pink"] .status-modal-title {
+  color: #2b4f7d;
+}
+
+:root[data-theme="sky-pink"] .status-modal-close {
+  color: #4a6b86;
+}
+
+:root[data-theme="sky-pink"] .status-modal-close:hover {
+  background: #e9f2fb;
+}
+
 :root[data-theme="sky-pink"] .overlay-backdrop,
 body[data-theme="sky-pink"] .overlay-backdrop {
   background: rgba(74, 139, 216, 0.14);
@@ -562,6 +612,31 @@ body[data-theme="sky-pink"] .compose-icon-button {
   background: rgba(10, 10, 10, 0.65);
 }
 
+:root[data-theme="monochrome"] .status-modal-backdrop {
+  background: rgba(10, 10, 10, 0.7);
+}
+
+:root[data-theme="monochrome"] .status-modal-content {
+  background: #ffffff;
+  border: 1px solid #1d1d1d;
+}
+
+:root[data-theme="monochrome"] .status-modal-header {
+  border-bottom: 1px solid #1d1d1d;
+}
+
+:root[data-theme="monochrome"] .status-modal-title {
+  color: #111111;
+}
+
+:root[data-theme="monochrome"] .status-modal-close {
+  color: #111111;
+}
+
+:root[data-theme="monochrome"] .status-modal-close:hover {
+  background: #f1f1f1;
+}
+
 :root[data-theme="monochrome"] .overlay-backdrop,
 body[data-theme="monochrome"] .overlay-backdrop {
   background: rgba(17, 17, 17, 0.16);
@@ -1672,6 +1747,37 @@ body[data-theme="monochrome"] .compose-icon-button {
     background: rgba(8, 7, 6, 0.7);
   }
 
+  :root:not([data-color-scheme="light"]) .status-modal-backdrop,
+  body:not([data-color-scheme="light"]) .status-modal-backdrop {
+    background: rgba(8, 7, 6, 0.7);
+  }
+
+  :root:not([data-color-scheme="light"]) .status-modal-content,
+  body:not([data-color-scheme="light"]) .status-modal-content {
+    background: #171512;
+    border: 1px solid #3b342d;
+  }
+
+  :root:not([data-color-scheme="light"]) .status-modal-header,
+  body:not([data-color-scheme="light"]) .status-modal-header {
+    border-bottom: 1px solid #3b342d;
+  }
+
+  :root:not([data-color-scheme="light"]) .status-modal-title,
+  body:not([data-color-scheme="light"]) .status-modal-title {
+    color: #f0e7dc;
+  }
+
+  :root:not([data-color-scheme="light"]) .status-modal-close,
+  body:not([data-color-scheme="light"]) .status-modal-close {
+    color: #8fa6cf;
+  }
+
+  :root:not([data-color-scheme="light"]) .status-modal-close:hover,
+  body:not([data-color-scheme="light"]) .status-modal-close:hover {
+    background: #2c3b59;
+  }
+
   :root:not([data-color-scheme="light"]) .back-link,
   body:not([data-color-scheme="light"]) .back-link {
     color: #d7cbbd;
@@ -1691,6 +1797,37 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #9cc7ab;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop {
+    background: rgba(32, 16, 15, 0.45);
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content {
+    background: #201412;
+    border: 1px solid #4a2f2c;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header {
+    border-bottom: 1px solid #4a2f2c;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title {
+    color: #f7e7df;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close {
+    color: #cf8c8c;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close:hover,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close:hover {
+    background: #3b2624;
+  }
+
   :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,
@@ -1698,6 +1835,37 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #9dbef4;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop {
+    background: rgba(29, 51, 74, 0.7);
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content {
+    background: #1a202dcc;
+    border: 1px solid #2e3b50;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header {
+    border-bottom: 1px solid #2e3b50;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title {
+    color: #eff1f7;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close {
+    color: #aeb7c6;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close:hover,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close:hover {
+    background: #223047;
+  }
+
   :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,
@@ -1705,6 +1873,37 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #bdbdbd;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop {
+    background: rgba(10, 10, 10, 0.5);
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content {
+    background: #121212;
+    border: 1px solid #3a3a3a;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header {
+    border-bottom: 1px solid #3a3a3a;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title {
+    color: #f5f5f5;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close {
+    color: #f0f0f0;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close:hover,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close:hover {
+    background: #2a2a2a;
+  }
+
   :root:not([data-color-scheme="light"]) .reply-info,
   body:not([data-color-scheme="light"]) .reply-info {
     color: #c4b6a6;
@@ -3114,6 +3313,37 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: rgba(8, 7, 6, 0.7);
   }
 
+  :root[data-color-scheme="dark"] .status-modal-backdrop,
+  body[data-color-scheme="dark"] .status-modal-backdrop {
+    background: rgba(8, 7, 6, 0.7);
+  }
+
+  :root[data-color-scheme="dark"] .status-modal-content,
+  body[data-color-scheme="dark"] .status-modal-content {
+    background: #171512;
+    border: 1px solid #3b342d;
+  }
+
+  :root[data-color-scheme="dark"] .status-modal-header,
+  body[data-color-scheme="dark"] .status-modal-header {
+    border-bottom: 1px solid #3b342d;
+  }
+
+  :root[data-color-scheme="dark"] .status-modal-title,
+  body[data-color-scheme="dark"] .status-modal-title {
+    color: #f0e7dc;
+  }
+
+  :root[data-color-scheme="dark"] .status-modal-close,
+  body[data-color-scheme="dark"] .status-modal-close {
+    color: #8fa6cf;
+  }
+
+  :root[data-color-scheme="dark"] .status-modal-close:hover,
+  body[data-color-scheme="dark"] .status-modal-close:hover {
+    background: #2c3b59;
+  }
+
   :root[data-color-scheme="dark"] .back-link,
   body[data-color-scheme="dark"] .back-link {
     color: #d7cbbd;
@@ -3133,6 +3363,37 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #9cc7ab;
   }
 
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop {
+    background: rgba(32, 16, 15, 0.7);
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content {
+    background: #201412;
+    border: 1px solid #4a2f2c;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header {
+    border-bottom: 1px solid #4a2f2c;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title {
+    color: #f7e7df;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close {
+    color: #cf8c8c;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover {
+    background: #3b2624;
+  }
+
   :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,
@@ -3140,6 +3401,37 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #9dbef4;
   }
 
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop {
+    background: rgba(29, 51, 74, 0.7);
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content {
+    background: #1a202d;
+    border: 1px solid #2e3b50;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header {
+    border-bottom: 1px solid #2e3b50;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title {
+    color: #eff1f7;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close {
+    color: #aeb7c6;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover {
+    background: #223047;
+  }
+
   :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,
@@ -3147,6 +3439,37 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #bdbdbd;
   }
 
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop {
+    background: rgba(10, 10, 10, 0.5);
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content {
+    background: #121212;
+    border: 1px solid #3a3a3a;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header {
+    border-bottom: 1px solid #3a3a3a;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title {
+    color: #f5f5f5;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close {
+    color: #f0f0f0;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover {
+    background: #2a2a2a;
+  }
+
   :root[data-color-scheme="dark"] .reply-info,
   body[data-color-scheme="dark"] .reply-info {
     color: #c4b6a6;

From 82b0894031844cdc3adf560bbebf02bf43b77d6a Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 11:59:07 +0900
Subject: [PATCH 04/16] =?UTF-8?q?refine:=20StatusModal=20UI=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 닫기 버튼 텍스트를 '×' 아이콘으로 변경
  - 테마와 색상 모드 일관성 확보
  - 커서 포인터와 hover 효과 유지

- StatusModal 마진과 그림자 효과 추가
  - content에 20px 마진 추가
  - 테마별로 맞춤 그림자 효과 적용
  - body에 16px 패딩으로 여백 확보

- 전체적인 레이아웃 개선
  - 모달과 화면 경계에 적당한 간격 확보
  - 내용이 너무 붙어 보이는 문제 해결
  - 라이트/다크 모드 모두 지원
---
 src/ui/components/StatusModal.tsx |  2 +-
 src/ui/styles/components.css      | 12 ++++++++----
 src/ui/styles/theme.css           | 31 +++++++++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
index e150c11..a48b412 100644
--- a/src/ui/components/StatusModal.tsx
+++ b/src/ui/components/StatusModal.tsx
@@ -52,7 +52,7 @@ export const StatusModal = ({
             onClick={onClose}
             aria-label="닫기"
           >
-            닫기
+            ×
           </button>
         </div>
         
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 719194a..b409495 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1445,6 +1445,8 @@ button.ghost {
   border-radius: 16px;
   display: flex;
   flex-direction: column;
+  margin: 20px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }
 
 .status-modal-header {
@@ -1465,10 +1467,12 @@ button.ghost {
   background: none;
   color: #3b5fa8;
   border: none;
-  padding: 6px 12px;
-  font-size: 14px;
+  padding: 4px 8px;
+  font-size: 18px;
   cursor: pointer;
   border-radius: 8px;
+  line-height: 1;
+  font-weight: 300;
 }
 
 .status-modal-close:hover {
@@ -1476,9 +1480,9 @@ button.ghost {
 }
 
 .status-modal-body {
-  padding: 0;
+  padding: 16px;
   overflow-y: auto;
-  max-height: calc(80vh - 60px);
+  max-height: calc(80vh - 100px);
 }
 
 .boosted-by {
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index 76ca526..d977a0c 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -29,6 +29,7 @@
 :root[data-theme="christmas"] .status-modal-content {
   background: #fff7f2;
   border: 1px solid #ead7cc;
+  box-shadow: 0 20px 60px rgba(134, 40, 40, 0.15);
 }
 
 :root[data-theme="christmas"] .status-modal-header {
@@ -326,6 +327,7 @@ body[data-theme="christmas"] .compose-icon-button {
 :root[data-theme="sky-pink"] .status-modal-content {
   background: #f7fbff;
   border: 1px solid #d6e5f2;
+  box-shadow: 0 20px 60px rgba(58, 118, 185, 0.15);
 }
 
 :root[data-theme="sky-pink"] .status-modal-header {
@@ -619,6 +621,7 @@ body[data-theme="sky-pink"] .compose-icon-button {
 :root[data-theme="monochrome"] .status-modal-content {
   background: #ffffff;
   border: 1px solid #1d1d1d;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }
 
 :root[data-theme="monochrome"] .status-modal-header {
@@ -1756,6 +1759,7 @@ body[data-theme="monochrome"] .compose-icon-button {
   body:not([data-color-scheme="light"]) .status-modal-content {
     background: #171512;
     border: 1px solid #3b342d;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
   }
 
   :root:not([data-color-scheme="light"]) .status-modal-header,
@@ -1806,6 +1810,7 @@ body[data-theme="monochrome"] .compose-icon-button {
   body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content {
     background: #201412;
     border: 1px solid #4a2f2c;
+    box-shadow: 0 20px 60px rgba(64, 20, 20, 0.15);
   }
 
   :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header,
@@ -1840,10 +1845,11 @@ body[data-theme="monochrome"] .compose-icon-button {
     background: rgba(29, 51, 74, 0.7);
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content,
+:root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content,
   body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content {
-    background: #1a202dcc;
+    background: #1a202d;
     border: 1px solid #2e3b50;
+    box-shadow: 0 20px 60px rgba(12, 18, 28, 0.15);
   }
 
   :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header,
@@ -1882,6 +1888,7 @@ body[data-theme="monochrome"] .compose-icon-button {
   body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content {
     background: #121212;
     border: 1px solid #3a3a3a;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
   }
 
   :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header,
@@ -3344,6 +3351,11 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #2c3b59;
   }
 
+  :root[data-color-scheme="dark"] .status-modal-close:hover,
+  body[data-color-scheme="dark"] .status-modal-close:hover {
+    background: #2c3b59;
+  }
+
   :root[data-color-scheme="dark"] .back-link,
   body[data-color-scheme="dark"] .back-link {
     color: #d7cbbd;
@@ -3394,6 +3406,11 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #3b2624;
   }
 
+  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover {
+    background: #3b2624;
+  }
+
   :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,
@@ -3432,6 +3449,11 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #223047;
   }
 
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover {
+    background: #223047;
+  }
+
   :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,
@@ -3470,6 +3492,11 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #2a2a2a;
   }
 
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover {
+    background: #2a2a2a;
+  }
+
   :root[data-color-scheme="dark"] .reply-info,
   body[data-color-scheme="dark"] .reply-info {
     color: #c4b6a6;

From 2d48fe49647c2da8834f8976949d642b153fe7ff Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 12:07:37 +0900
Subject: [PATCH 05/16] =?UTF-8?q?fix:=20StatusModal=20=EB=8B=AB=EA=B8=B0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hover 효과 제거로 깔끔한 디자인 적용
  - 배경색 변경 없음
  - 커서 포인터만 유지

- 닫기 버튼 텍스트 색상 테마별 조정
  - 기본 테마: #666 (연한 회색)
  - Christmas: #7b3f3f (따뜻한 회갈색)
  - Sky-Pink: #4a6b86 (차가운 회갈색)
  - Monochrome: #666 (중간 회색)
  - 다크 모드: #999 (연한 회색)

- 일관성 있는 색상 체계 적용
  - 모든 테마와 색상 모드에서 자연스러움
  - 시각적 방해 없는 수수한 디자인
---
 src/ui/styles/components.css |  7 +---
 src/ui/styles/theme.css      | 64 ++++--------------------------------
 2 files changed, 7 insertions(+), 64 deletions(-)

diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index b409495..8e71ae2 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1465,20 +1465,15 @@ button.ghost {
 
 .status-modal-close {
   background: none;
-  color: #3b5fa8;
+  color: #666;
   border: none;
   padding: 4px 8px;
   font-size: 18px;
   cursor: pointer;
-  border-radius: 8px;
   line-height: 1;
   font-weight: 300;
 }
 
-.status-modal-close:hover {
-  background: #f3efe7;
-}
-
 .status-modal-body {
   padding: 16px;
   overflow-y: auto;
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index d977a0c..003f40e 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -41,11 +41,7 @@
 }
 
 :root[data-theme="christmas"] .status-modal-close {
-  color: #8f2f2f;
-}
-
-:root[data-theme="christmas"] .status-modal-close:hover {
-  background: #f3e4dc;
+  color: #7b3f3f;
 }
 
 :root[data-theme="christmas"] .overlay-backdrop,
@@ -342,10 +338,6 @@ body[data-theme="christmas"] .compose-icon-button {
   color: #4a6b86;
 }
 
-:root[data-theme="sky-pink"] .status-modal-close:hover {
-  background: #e9f2fb;
-}
-
 :root[data-theme="sky-pink"] .overlay-backdrop,
 body[data-theme="sky-pink"] .overlay-backdrop {
   background: rgba(74, 139, 216, 0.14);
@@ -633,11 +625,7 @@ body[data-theme="sky-pink"] .compose-icon-button {
 }
 
 :root[data-theme="monochrome"] .status-modal-close {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .status-modal-close:hover {
-  background: #f1f1f1;
+  color: #666;
 }
 
 :root[data-theme="monochrome"] .overlay-backdrop,
@@ -1774,12 +1762,7 @@ body[data-theme="monochrome"] .compose-icon-button {
 
   :root:not([data-color-scheme="light"]) .status-modal-close,
   body:not([data-color-scheme="light"]) .status-modal-close {
-    color: #8fa6cf;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-close:hover,
-  body:not([data-color-scheme="light"]) .status-modal-close:hover {
-    background: #2c3b59;
+    color: #999;
   }
 
   :root:not([data-color-scheme="light"]) .back-link,
@@ -1828,11 +1811,6 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #cf8c8c;
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close:hover,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close:hover {
-    background: #3b2624;
-  }
-
   :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,
@@ -1867,11 +1845,6 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #aeb7c6;
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close:hover,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close:hover {
-    background: #223047;
-  }
-
   :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,
@@ -1903,12 +1876,7 @@ body[data-theme="monochrome"] .compose-icon-button {
 
   :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close,
   body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close:hover,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close:hover {
-    background: #2a2a2a;
+    color: #999;
   }
 
   :root:not([data-color-scheme="light"]) .reply-info,
@@ -3343,12 +3311,7 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
 
   :root[data-color-scheme="dark"] .status-modal-close,
   body[data-color-scheme="dark"] .status-modal-close {
-    color: #8fa6cf;
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-close:hover,
-  body[data-color-scheme="dark"] .status-modal-close:hover {
-    background: #2c3b59;
+    color: #999;
   }
 
   :root[data-color-scheme="dark"] .status-modal-close:hover,
@@ -3406,11 +3369,6 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #3b2624;
   }
 
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover {
-    background: #3b2624;
-  }
-
   :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,
@@ -3449,11 +3407,6 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     background: #223047;
   }
 
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover {
-    background: #223047;
-  }
-
   :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,
@@ -3484,12 +3437,7 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
 
   :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close,
   body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover {
-    background: #2a2a2a;
+    color: #999;
   }
 
   :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,

From 6add41f979dc1d6e53e1523f3579eb787dc21c64 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 12:10:56 +0900
Subject: [PATCH 06/16] =?UTF-8?q?fix:=20StatusModal=20=EB=8B=AB=EA=B8=B0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EB=8B=A4=ED=81=AC=20=EB=AA=A8=EB=93=9C?=
 =?UTF-8?q?=20=EC=83=89=EC=83=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 다른 버튼들의 다크 모드 색상과 일관성 확보
  - 기본 다크: #8fa6cf (파스텔 블루)
  - Christmas 다크: #cf8c8c (따뜻한 핑크)
  - Sky-Pink 다크: #f0a6c8 (밝은 핑크)
  - Monochrome 다크: #f0f0f0 (밝은 흰색)

- button.ghost 스타일과 색상 일치 적용
- 모든 테마와 색상 모드에서 가시성 확보
- 앱 전체 디자인 시스템과 일관성 유지
---
 src/ui/styles/theme.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index 003f40e..d6b248b 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -1762,7 +1762,7 @@ body[data-theme="monochrome"] .compose-icon-button {
 
   :root:not([data-color-scheme="light"]) .status-modal-close,
   body:not([data-color-scheme="light"]) .status-modal-close {
-    color: #999;
+    color: #8fa6cf;
   }
 
   :root:not([data-color-scheme="light"]) .back-link,
@@ -1842,7 +1842,7 @@ body[data-theme="monochrome"] .compose-icon-button {
 
   :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close,
   body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close {
-    color: #aeb7c6;
+    color: #f0a6c8;
   }
 
   :root:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
@@ -1876,7 +1876,7 @@ body[data-theme="monochrome"] .compose-icon-button {
 
   :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close,
   body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close {
-    color: #999;
+    color: #f0f0f0;
   }
 
   :root:not([data-color-scheme="light"]) .reply-info,
@@ -3311,7 +3311,7 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
 
   :root[data-color-scheme="dark"] .status-modal-close,
   body[data-color-scheme="dark"] .status-modal-close {
-    color: #999;
+    color: #8fa6cf;
   }
 
   :root[data-color-scheme="dark"] .status-modal-close:hover,
@@ -3399,7 +3399,7 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
 
   :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close,
   body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close {
-    color: #aeb7c6;
+    color: #f0a6c8;
   }
 
   :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover,
@@ -3437,7 +3437,7 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
 
   :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close,
   body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close {
-    color: #999;
+    color: #f0f0f0;
   }
 
   :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,

From efb873d082ca9289a69801cdc317250d6073234b Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 12:29:21 +0900
Subject: [PATCH 07/16] =?UTF-8?q?fix:=20StatusModal=20=EB=8B=AB=EA=B8=B0?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=EC=9D=BC=EB=B0=98=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EB=B2=84=ED=8A=BC=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- status-modal-close를 icon-button 클래스로 변경하여 다른 아이콘 버튼과 스타일 일치
- 텍스트 대신 SVG X 아이콘으로 변경하고 viewBox 추가하여 중앙 정렬
- 모든 테마별 색상 오버라이드 및 hover 효과 제거
- 컴포넌트 스타일 단순화
---
 src/ui/components/StatusModal.tsx |  7 ++-
 src/ui/styles/components.css      | 11 +----
 src/ui/styles/theme.css           | 72 +++++++------------------------
 3 files changed, 21 insertions(+), 69 deletions(-)

diff --git a/src/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
index a48b412..0a013c4 100644
--- a/src/ui/components/StatusModal.tsx
+++ b/src/ui/components/StatusModal.tsx
@@ -48,11 +48,14 @@ export const StatusModal = ({
           <h3 className="status-modal-title">게시글</h3>
           <button
             type="button"
-            className="status-modal-close"
+            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>
         
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 8e71ae2..a980858 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1463,16 +1463,7 @@ button.ghost {
   font-weight: 600;
 }
 
-.status-modal-close {
-  background: none;
-  color: #666;
-  border: none;
-  padding: 4px 8px;
-  font-size: 18px;
-  cursor: pointer;
-  line-height: 1;
-  font-weight: 300;
-}
+
 
 .status-modal-body {
   padding: 16px;
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index d6b248b..e56fea0 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -40,9 +40,7 @@
   color: #5b1f1f;
 }
 
-:root[data-theme="christmas"] .status-modal-close {
-  color: #7b3f3f;
-}
+
 
 :root[data-theme="christmas"] .overlay-backdrop,
 body[data-theme="christmas"] .overlay-backdrop {
@@ -334,9 +332,7 @@ body[data-theme="christmas"] .compose-icon-button {
   color: #2b4f7d;
 }
 
-:root[data-theme="sky-pink"] .status-modal-close {
-  color: #4a6b86;
-}
+
 
 :root[data-theme="sky-pink"] .overlay-backdrop,
 body[data-theme="sky-pink"] .overlay-backdrop {
@@ -624,9 +620,7 @@ body[data-theme="sky-pink"] .compose-icon-button {
   color: #111111;
 }
 
-:root[data-theme="monochrome"] .status-modal-close {
-  color: #666;
-}
+
 
 :root[data-theme="monochrome"] .overlay-backdrop,
 body[data-theme="monochrome"] .overlay-backdrop {
@@ -1760,10 +1754,7 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f0e7dc;
   }
 
-  :root:not([data-color-scheme="light"]) .status-modal-close,
-  body:not([data-color-scheme="light"]) .status-modal-close {
-    color: #8fa6cf;
-  }
+  
 
   :root:not([data-color-scheme="light"]) .back-link,
   body:not([data-color-scheme="light"]) .back-link {
@@ -1806,10 +1797,7 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f7e7df;
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-close {
-    color: #cf8c8c;
-  }
+  
 
   :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
   body:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
@@ -1840,10 +1828,7 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #eff1f7;
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-close {
-    color: #f0a6c8;
-  }
+  
 
   :root:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
   body:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
@@ -1874,10 +1859,7 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f5f5f5;
   }
 
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-close {
-    color: #f0f0f0;
-  }
+  
 
   :root:not([data-color-scheme="light"]) .reply-info,
   body:not([data-color-scheme="light"]) .reply-info {
@@ -3309,15 +3291,9 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f0e7dc;
   }
 
-  :root[data-color-scheme="dark"] .status-modal-close,
-  body[data-color-scheme="dark"] .status-modal-close {
-    color: #8fa6cf;
-  }
+  
 
-  :root[data-color-scheme="dark"] .status-modal-close:hover,
-  body[data-color-scheme="dark"] .status-modal-close:hover {
-    background: #2c3b59;
-  }
+  
 
   :root[data-color-scheme="dark"] .back-link,
   body[data-color-scheme="dark"] .back-link {
@@ -3359,15 +3335,9 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f7e7df;
   }
 
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close {
-    color: #cf8c8c;
-  }
+  
 
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-close:hover {
-    background: #3b2624;
-  }
+  
 
   :root[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
   body[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
@@ -3397,15 +3367,9 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #eff1f7;
   }
 
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close {
-    color: #f0a6c8;
-  }
+  
 
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-close:hover {
-    background: #223047;
-  }
+  
 
   :root[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
   body[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
@@ -3435,15 +3399,9 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f5f5f5;
   }
 
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close {
-    color: #f0f0f0;
-  }
+  
 
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-close:hover {
-    background: #2a2a2a;
-  }
+  
 
   :root[data-color-scheme="dark"] .reply-info,
   body[data-color-scheme="dark"] .reply-info {

From dc7b2032ef077ef0689cf35faedc9e37b973bdf5 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 16:34:43 +0900
Subject: [PATCH 08/16] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=97=90=EC=84=9C=20=EC=8A=A4=EB=A0=88?=
 =?UTF-8?q?=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 마스토돈(/api/v1/statuses/:id/context)과 미스키(/notes/conversation) API 지원
- 조상/후손 게시물을 시각적 계층으로 표시
- UnifiedApiClient에 통합 스레드 API 메서드 추가
- StatusModal에서 자동 스레드 로딩 및 렌더링
- 미묘한 로딩 인디케이터와 에러 처리
- 깔끔한 들여쓰기 기반 스레드 디자인
- 최적화된 여백 처리로 일관된 레이아웃 제공
---
 src/App.tsx                       |   1 +
 src/domain/types.ts               |   6 ++
 src/infra/MastodonHttpClient.ts   |  26 ++++++-
 src/infra/MisskeyHttpClient.ts    |  34 +++++++-
 src/infra/UnifiedApiClient.ts     |  14 +++-
 src/ui/components/StatusModal.tsx | 124 ++++++++++++++++++++++++++----
 src/ui/styles/components.css      | 119 ++++++++++++++++++++++++++++
 7 files changed, 308 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 67da28a..d891a44 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1671,6 +1671,7 @@ onAccountChange={setSectionAccount}
         <StatusModal
           status={selectedStatus}
           account={composeAccount}
+          api={services.api}
           onClose={handleCloseStatusModal}
           onReply={(status) => {
             if (composeAccount) {
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 6ee853d..cdf1c2f 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -96,6 +96,12 @@ export type Status = {
   accountEmojis: CustomEmoji[];
 };
 
+export type ThreadContext = {
+  ancestors: Status[];
+  descendants: Status[];
+  conversation?: Status[]; // Misskey 전체 대화용 (시간순 정렬)
+};
+
 export type TimelineItem = {
   status: Status;
 };
diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index 3f1d014..5b4626f 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 } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapNotificationToStatus, mapStatus } from "./mastodonMapper";
 
@@ -132,6 +132,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..ff9f964 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 } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapMisskeyNotification, mapMisskeyStatusWithInstance } from "./misskeyMapper";
 
@@ -158,6 +158,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..c9da4f5 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 } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 
@@ -55,4 +55,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/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
index 0a013c4..ea65a1c 100644
--- a/src/ui/components/StatusModal.tsx
+++ b/src/ui/components/StatusModal.tsx
@@ -1,11 +1,12 @@
-import React from "react";
-import type { Account, Status } from "../../domain/types";
+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,
+  api,
   onClose,
   onReply,
   onToggleFavourite,
@@ -20,6 +21,7 @@ export const StatusModal = ({
 }: {
   status: Status;
   account: Account | null;
+  api: any; // UnifiedApiClient
   onClose: () => void;
   onReply: (status: Status) => void;
   onToggleFavourite: (status: Status) => void;
@@ -34,6 +36,33 @@ export const StatusModal = ({
 }) => {
   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 context = await api.fetchThreadContext(account, displayStatus.id);
+        setThreadContext(context);
+      } catch (error) {
+        console.error("스레드 컨텍스트 로딩 실패:", error);
+        setThreadError("스레드를 불러오지 못했습니다.");
+      } finally {
+        setIsLoadingThread(false);
+      }
+    };
+
+    fetchThreadContext();
+  }, [account, api, displayStatus.id]);
 
   return (
     <div
@@ -46,20 +75,52 @@ export const StatusModal = ({
       <div className="status-modal-content">
         <div className="status-modal-header">
           <h3 className="status-modal-title">게시글</h3>
-          <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 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" />
@@ -81,6 +142,43 @@ export const StatusModal = ({
             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>
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index a980858..8e981ef 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1463,6 +1463,34 @@ button.ghost {
   font-weight: 600;
 }
 
+.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: #6b5c4f;
+}
+
+.thread-loading-spinner {
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid #d8d1c7;
+  border-top-color: #3b5fa8;
+  border-radius: 50%;
+  animation: thread-loading-spin 0.8s linear infinite;
+}
+
+.thread-loading-text {
+  font-size: 11px;
+  white-space: nowrap;
+}
+
 
 
 .status-modal-body {
@@ -1638,6 +1666,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 #f0ebe3;
+  background: #faf9f6;
+}
+
+/* 스레드 커넥터 불필요하여 제거 */
+
+.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: #9a2e1f;
+  background: #fdf2f0;
+  border: 1px solid #f5d6d0;
+}
+
+/* 스레드 아이템 내부의 액션 버튼들은 작게 표시 */
+.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;

From e7d206078c2218038450c08cf6b5658c21a38b1f Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Wed, 7 Jan 2026 17:57:12 +0900
Subject: [PATCH 09/16] =?UTF-8?q?fix:=20=EC=8A=A4=EB=A0=88=EB=93=9C=20API?=
 =?UTF-8?q?=20=ED=98=B8=EC=B6=9C=20=EC=8B=9C=20=EC=98=AC=EB=B0=94=EB=A5=B8?=
 =?UTF-8?q?=20=EA=B3=84=EC=A0=95=20=EC=A0=95=EB=B3=B4=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- StatusModal에서 해당 게시글이 속한 컬럼의 계정으로 스레드 API 호출
- Misskey에서 "NO_SUCH_NOTE" 에러 발생하는 문제 해결
- TimelineItem에서 onStatusClick 시 columnAccount 정보 전달
- StatusModal에 threadAccount prop 추가하여 올바른 계정 정보 사용
- 디버그 로그 제거로 코드 깔끔하게 정리
---
 src/App.tsx                       | 23 ++++++++++++++---------
 src/ui/components/StatusModal.tsx |  6 +++++-
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d891a44..5355e2a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -173,8 +173,9 @@ const TimelineSection = ({
   onAddSectionRight: (sectionId: string) => void;
   onRemoveSection: (sectionId: string) => void;
   onReply: (status: Status, account: Account | null) => void;
-  onStatusClick: (status: Status) => 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;
@@ -569,9 +570,9 @@ const TimelineSection = ({
                           <TimelineItem
                             key={status.id}
                             status={status}
-                            onReply={(item) => onReply(item, account)}
-                            onStatusClick={onStatusClick}
-                            onToggleFavourite={handleToggleFavourite}
+                             onReply={(item) => onReply(item, account)}
+                             onStatusClick={(status) => onStatusClick(status, account)}
+                             onToggleFavourite={handleToggleFavourite}
                             onToggleReblog={handleToggleReblog}
                             onDelete={handleDeleteStatus}
                             activeHandle={
@@ -695,9 +696,9 @@ const TimelineSection = ({
               <TimelineItem
                 key={status.id}
                 status={status}
-                onReply={(item) => onReply(item, account)}
-                onStatusClick={onStatusClick}
-                onToggleFavourite={handleToggleFavourite}
+                 onReply={(item) => onReply(item, account)}
+                 onStatusClick={(status) => onStatusClick(status, account)}
+                 onToggleFavourite={handleToggleFavourite}
                 onToggleReblog={handleToggleReblog}
                 onDelete={handleDeleteStatus}
                 activeHandle={
@@ -1200,8 +1201,10 @@ export const App = () => {
     setSelectedStatus(null);
   };
 
-  const handleStatusClick = (status: Status) => {
+  const handleStatusClick = (status: Status, columnAccount: Account | null) => {
     setSelectedStatus(status);
+    // Status에 columnAccount 정보를 임시 저장
+    (status as any).__columnAccount = columnAccount;
   };
 
   const handleCloseStatusModal = () => {
@@ -1437,7 +1440,8 @@ onAccountChange={setSectionAccount}
                            onAddSectionRight={(id) => addSectionNear(id, "right")}
                            onRemoveSection={removeSection}
                            onReply={handleReply}
-                           onStatusClick={handleStatusClick}
+                            onStatusClick={handleStatusClick}
+                           columnAccount={sectionAccount}
                            onCloseStatusModal={handleCloseStatusModal}
                            onError={(message) => setActionError(message || null)}
                           onMoveSection={moveSection}
@@ -1671,6 +1675,7 @@ onAccountChange={setSectionAccount}
         <StatusModal
           status={selectedStatus}
           account={composeAccount}
+          threadAccount={(selectedStatus as any).__columnAccount || null}
           api={services.api}
           onClose={handleCloseStatusModal}
           onReply={(status) => {
diff --git a/src/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
index ea65a1c..8849f2a 100644
--- a/src/ui/components/StatusModal.tsx
+++ b/src/ui/components/StatusModal.tsx
@@ -6,6 +6,7 @@ import boostIconUrl from "../assets/boost-icon.svg";
 export const StatusModal = ({
   status,
   account,
+  threadAccount,
   api,
   onClose,
   onReply,
@@ -21,6 +22,7 @@ export const StatusModal = ({
 }: {
   status: Status;
   account: Account | null;
+  threadAccount: Account | null;
   api: any; // UnifiedApiClient
   onClose: () => void;
   onReply: (status: Status) => void;
@@ -51,7 +53,9 @@ export const StatusModal = ({
       setThreadError(null);
       
       try {
-        const context = await api.fetchThreadContext(account, displayStatus.id);
+        // 스레드를 가져올 때는 해당 게시글이 속한 컬럼의 계정 사용
+        const targetAccount = threadAccount || account;
+        const context = await api.fetchThreadContext(targetAccount, displayStatus.id);
         setThreadContext(context);
       } catch (error) {
         console.error("스레드 컨텍스트 로딩 실패:", error);

From d167a89ecedaf81a634db3561d8a6fbaa774ec26 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <deholexp@gmail.com>
Date: Thu, 8 Jan 2026 05:33:40 +0900
Subject: [PATCH 10/16] =?UTF-8?q?feat:=20=EC=9B=90=EB=B3=B8=20=EC=84=9C?=
 =?UTF-8?q?=EB=B2=84=EC=97=90=EC=84=9C=20=EB=B3=B4=EA=B8=B0=20=EB=A9=94?=
 =?UTF-8?q?=EB=89=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/TimelineItem.tsx | 177 ++++++++++++++++++++++-------
 src/ui/styles/components.css       |  44 +++++++
 2 files changed, 177 insertions(+), 44 deletions(-)

diff --git a/src/ui/components/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index aee7139..02631a2 100644
--- a/src/ui/components/TimelineItem.tsx
+++ b/src/ui/components/TimelineItem.tsx
@@ -43,8 +43,10 @@ export const TimelineItem = ({
   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
   );
@@ -137,6 +139,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) {
@@ -169,6 +193,39 @@ 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) {
@@ -523,9 +580,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}
@@ -537,48 +619,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 ? (
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 8e981ef..d9e4427 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -972,6 +972,25 @@ button.ghost {
   color: #6b5c4f;
 }
 
+.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,
 .status-account {
   cursor: pointer;
@@ -983,6 +1002,11 @@ button.ghost {
   gap: 4px;
 }
 
+.status header .status-header-info {
+  flex-direction: row;
+  gap: 8px;
+}
+
 .custom-emoji {
   width: auto;
   height: 1.5em;
@@ -1037,11 +1061,31 @@ 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;
   text-decoration: none;

From ae85de20ffc6dfc1fe1da2d457f9d7ec152aa257 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 09:27:26 +0900
Subject: [PATCH 11/16] =?UTF-8?q?=EA=B8=80=20=EC=9E=91=EC=84=B1=EC=8B=9C?=
 =?UTF-8?q?=20=EA=B8=80=EC=9E=90=20=EC=88=98=20=EC=B9=B4=EC=9A=B4=ED=8C=85?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 도메인 타입에 InstanceInfo와 CharacterCountStatus 추가
- 플랫폼별 문자 수 계산 유틸리티 구현 (Mastodon: URL 23자 계산, Misskey: 순수 텍스트)
- MastodonHttpClient와 MisskeyHttpClient에 fetchInstanceInfo 메서드 추가
- UnifiedApiClient에 인스턴스 정보 조회 기능 통합
- ComposeBox 컴포넌트에 실시간 문자 수 표시 UI 추가
- 문자 수 제한 초과 시 제출 방지 및 알림 기능
- 라이트/다크 테마별 문자 수 색상 스타일링
- 인스턴스별 동적 문자 수 제한 적용 (Mastodon: 500자, Misskey: 3000자 기본값)

Fixes #94
---
 src/domain/types.ts              | 18 +++++++++
 src/infra/MastodonHttpClient.ts  | 19 ++++++++-
 src/infra/MisskeyHttpClient.ts   | 23 ++++++++++-
 src/infra/UnifiedApiClient.ts    |  7 +++-
 src/services/MastodonApi.ts      |  3 +-
 src/ui/components/ComposeBox.tsx | 69 +++++++++++++++++++++++++++++++-
 src/ui/styles/components.css     | 20 +++++++++
 src/ui/styles/theme.css          | 31 ++++++++++++++
 src/ui/utils/characterCount.ts   | 60 +++++++++++++++++++++++++++
 9 files changed, 245 insertions(+), 5 deletions(-)
 create mode 100644 src/ui/utils/characterCount.ts

diff --git a/src/domain/types.ts b/src/domain/types.ts
index cdf1c2f..8b7529d 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -105,3 +105,21 @@ export type ThreadContext = {
 export type TimelineItem = {
   status: Status;
 };
+
+export type InstanceInfo = {
+  // 공통 필드
+  uri: string;
+  title: string;
+  description?: string;
+  
+  // Mastodon 전용
+  max_toot_chars?: number;
+  
+  // Misskey 전용
+  maxNoteLength?: number;
+  
+  // 플랫폼 식별
+  platform: AccountPlatform;
+};
+
+export type CharacterCountStatus = "normal" | "warning" | "limit";
diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index 5b4626f..5cd3321 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, CustomEmoji, Status, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapNotificationToStatus, mapStatus } from "./mastodonMapper";
 
@@ -111,6 +111,23 @@ export class MastodonHttpClient implements MastodonApi {
     return mapCustomEmojis(data);
   }
 
+  async fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    const response = await fetch(`${account.instanceUrl}/api/v1/instance`, {
+      headers: buildHeaders(account)
+    });
+    if (!response.ok) {
+      throw new Error("인스턴스 정보를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as Record<string, unknown>;
+    return {
+      uri: String(data.uri || data.domain || ""),
+      title: String(data.title || ""),
+      description: data.description ? String(data.description) : undefined,
+      max_toot_chars: typeof data.max_toot_chars === "number" ? data.max_toot_chars : 500,
+      platform: "mastodon"
+    };
+  }
+
   async uploadMedia(account: Account, file: File): Promise<string> {
     const formData = new FormData();
     formData.append("file", file);
diff --git a/src/infra/MisskeyHttpClient.ts b/src/infra/MisskeyHttpClient.ts
index ff9f964..6316536 100644
--- a/src/infra/MisskeyHttpClient.ts
+++ b/src/infra/MisskeyHttpClient.ts
@@ -1,4 +1,4 @@
-import type { Account, CustomEmoji, Status, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, CustomEmoji, Status, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 import { mapMisskeyNotification, mapMisskeyStatusWithInstance } from "./misskeyMapper";
 
@@ -136,6 +136,27 @@ export class MisskeyHttpClient implements MastodonApi {
     return mapMisskeyEmojis(data);
   }
 
+  async fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    const response = await fetch(`${normalizeInstanceUrl(account.instanceUrl)}/api/meta`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(buildBody(account, {}))
+    });
+    if (!response.ok) {
+      throw new Error("인스턴스 정보를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as Record<string, unknown>;
+    return {
+      uri: String(data.uri || ""),
+      title: String(data.name || ""),
+      description: data.description ? String(data.description) : undefined,
+      maxNoteLength: typeof data.maxNoteLength === "number" ? data.maxNoteLength : 3000,
+      platform: "misskey"
+    };
+  }
+
   async uploadMedia(account: Account, file: File): Promise<string> {
     const formData = new FormData();
     formData.append("i", account.accessToken);
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index c9da4f5..a7eb1c0 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -1,4 +1,4 @@
-import type { Account, ThreadContext, TimelineType } from "../domain/types";
+import type { Account, ThreadContext, TimelineType, InstanceInfo } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 import type { CreateStatusInput, MastodonApi } from "../services/MastodonApi";
 
@@ -28,6 +28,11 @@ export class UnifiedApiClient implements MastodonApi {
     return this.getClient(account).fetchCustomEmojis(account);
   }
 
+  fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
+    const client = this.getClient(account) as any;
+    return client.fetchInstanceInfo(account);
+  }
+
   uploadMedia(account: Account, file: File) {
     return this.getClient(account).uploadMedia(account, file);
   }
diff --git a/src/services/MastodonApi.ts b/src/services/MastodonApi.ts
index b2cc7e3..702a00c 100644
--- a/src/services/MastodonApi.ts
+++ b/src/services/MastodonApi.ts
@@ -1,4 +1,4 @@
-import type { Account, Status, TimelineType, Visibility } from "../domain/types";
+import type { Account, Status, TimelineType, Visibility, InstanceInfo } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 
 export type CreateStatusInput = {
@@ -21,4 +21,5 @@ export interface MastodonApi {
   unfavourite(account: Account, statusId: string): Promise<Status>;
   reblog(account: Account, statusId: string): Promise<Status>;
   unreblog(account: Account, statusId: string): Promise<Status>;
+  fetchInstanceInfo(account: Account): Promise<InstanceInfo>;
 }
diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index 49d77a3..13fabb5 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({
@@ -484,6 +541,16 @@ export const ComposeBox = ({
               </option>
             ))}
           </select>
+          
+          {/* 문자 수 표시 */}
+          {characterLimit && (
+            <div className="compose-character-count">
+              <span className={getCharacterCountClassName(charCountStatus)}>
+                {currentCharCount.toLocaleString()} / {characterLimit.toLocaleString()}
+              </span>
+            </div>
+          )}
+          
           <div className="compose-actions-right">
             <button
               type="button"
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index d9e4427..3a83458 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -599,6 +599,26 @@
   margin: 0;
 }
 
+.compose-character-count {
+  font-size: 12px;
+  font-weight: 500;
+  color: #6b7280;
+  margin: 0 8px;
+}
+
+.compose-character-count-normal {
+  color: #6b7280;
+}
+
+.compose-character-count-warning {
+  color: #f59e0b;
+}
+
+.compose-character-count-limit {
+  color: #ef4444;
+  font-weight: 600;
+}
+
 .compose-emoji-category {
   display: flex;
   flex-direction: column;
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index e56fea0..b42f918 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -3925,3 +3925,34 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     border: 1px solid #3b342d;
     color: #f0e7dc;
   }
+
+  /* Character count dark theme styles */
+  :root:not([data-color-scheme="light"]) .compose-character-count-normal,
+  body:not([data-color-scheme="light"]) .compose-character-count-normal {
+    color: #9ca3af;
+  }
+
+  :root:not([data-color-scheme="light"]) .compose-character-count-warning,
+  body:not([data-color-scheme="light"]) .compose-character-count-warning {
+    color: #fbbf24;
+  }
+
+  :root:not([data-color-scheme="light"]) .compose-character-count-limit,
+  body:not([data-color-scheme="light"]) .compose-character-count-limit {
+    color: #f87171;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-character-count-normal,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-character-count-normal {
+    color: #cf8c8c;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-character-count-normal,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-character-count-normal {
+    color: #d7ddea;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-character-count-normal,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-character-count-normal {
+    color: #d6d6d6;
+  }
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

From 6e656590abfbfbb9d6b056f55a480197f218615e Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 09:37:29 +0900
Subject: [PATCH 12/16] =?UTF-8?q?=EB=A7=88=EC=8A=A4=ED=86=A0=EB=8F=88=20?=
 =?UTF-8?q?=EC=84=9C=EB=B2=84=EB=B3=84=20=EB=AC=B8=EC=9E=90=20=EC=88=98=20?=
 =?UTF-8?q?=EC=A0=9C=ED=95=9C=20=EB=8F=99=EC=A0=81=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- v2 API(/api/v2/instance) 우선 시도로 최신 정보 가져오기
- configuration.statuses.max_characters 필드 확인으로 서버별 제한 적용
- v2 API 실패 시 v1 API로 안전한 fallback 처리
- 이전 버전 마스토돈 서버와의 호환성 유지

서버별 문자 수 제한을 정확히 반영하여 사용자 경험 개선
---
 src/infra/MastodonHttpClient.ts | 52 ++++++++++++++++++++++++++++++---
 1 file changed, 48 insertions(+), 4 deletions(-)

diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index 5cd3321..1e22ced 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -112,18 +112,62 @@ export class MastodonHttpClient implements MastodonApi {
   }
 
   async fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
-    const response = await fetch(`${account.instanceUrl}/api/v1/instance`, {
+    // 먼저 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 (!response.ok) {
+    if (!v1Response.ok) {
       throw new Error("인스턴스 정보를 불러오지 못했습니다.");
     }
-    const data = (await response.json()) as Record<string, unknown>;
+    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: typeof data.max_toot_chars === "number" ? data.max_toot_chars : 500,
+      max_toot_chars: maxChars,
       platform: "mastodon"
     };
   }

From 5f4dfe92437b9441b4ef954f76a9af8eebe6e9e4 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 11:26:17 +0900
Subject: [PATCH 13/16] =?UTF-8?q?refactor:=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=EC=83=81=EC=9E=90=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B2=A8=EB=B6=80=20=EC=98=81=EC=97=AD=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- textarea와 이미지 첨부 영역을 compose-input-container로 통합
- flexbox 레이아웃으로 글자와 이미지 겹침 문제 해결
- textarea 테두리 제거 및 vertical 리사이징만 허용
- 모든 테마(라이트/다크 + 4가지 테마)에서 일관된 디자인 제공
- CSS 선택자 단순화로 유지보수성 향상
---
 src/ui/components/ComposeBox.tsx |  70 ++++----
 src/ui/styles/components.css     |  32 +++-
 src/ui/styles/theme.css          | 265 +++++++++++++++++++++++++++----
 3 files changed, 302 insertions(+), 65 deletions(-)

diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index 13fabb5..01291d1 100644
--- a/src/ui/components/ComposeBox.tsx
+++ b/src/ui/components/ComposeBox.tsx
@@ -495,40 +495,42 @@ 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-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>
-        ) : null}
+        <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();
+              }
+            }}
+          />
+          {attachments.length > 0 ? (
+            <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>
+          ) : null}
+        </div>
         <div className="compose-actions">
           <select
             value={visibility}
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 3a83458..c8efc9d 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -472,13 +472,34 @@
   font-family: inherit;
 }
 
-.compose-form textarea {
+.compose-input-container {
+  position: relative;
   width: 100%;
-  padding: 12px;
   border-radius: 12px;
   border: 1px solid #d8d1c7;
+  background: #fffdfa;
+  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: inherit !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.compose-input-container textarea::placeholder {
+  color: inherit;
+  opacity: 0.6;
 }
 
 .compose-box {
@@ -1345,8 +1366,11 @@ button.ghost {
 .compose-attachments {
   display: flex;
   gap: 8px;
-  margin-top: 10px;
   flex-wrap: wrap;
+  padding: 8px 12px 12px;
+  background: #f9f6f2;
+  border-top: 1px solid #e8dfd4;
+  border-radius: 0 0 12px 12px;
 }
 
 .file-button {
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index b42f918..b59c1dc 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -274,15 +274,32 @@ body[data-theme="christmas"] .compose-icon-button {
   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,
+  :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"] .compose-input-container {
+    background: #fff7f2;
+    border: 1px solid #ead7cc;
+  }
+
+  :root[data-theme="christmas"] .compose-input-container textarea {
+    color: #5b1f1f !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-theme="christmas"] .compose-attachments {
+    background: #f3e4dc;
+    border-top: 1px solid #ead7cc;
+  }
 
 :root[data-theme="christmas"] .account-form input::placeholder,
 :root[data-theme="christmas"] .compose-form textarea::placeholder,
@@ -562,15 +579,32 @@ body[data-theme="sky-pink"] .compose-icon-button {
   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,
+  :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"] .compose-input-container {
+    background: #f7fbff;
+    border: 1px solid #d6e5f2;
+  }
+
+  :root[data-theme="sky-pink"] .compose-input-container textarea {
+    color: #2b4f7d !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-theme="sky-pink"] .compose-attachments {
+    background: #e9f2fb;
+    border-top: 1px solid #d6e5f2;
+  }
 
 :root[data-theme="sky-pink"] .account-form input::placeholder,
 :root[data-theme="sky-pink"] .compose-form textarea::placeholder,
@@ -863,15 +897,32 @@ body[data-theme="monochrome"] .compose-icon-button {
   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,
+  :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"] .compose-input-container {
+    background: #ffffff;
+    border: 1px solid #1d1d1d;
+  }
+
+  :root[data-theme="monochrome"] .compose-input-container textarea {
+    color: #111111 !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-theme="monochrome"] .compose-attachments {
+    background: #f1f1f1;
+    border-top: 1px solid #1d1d1d;
+  }
 
 :root[data-theme="monochrome"] .account-form input::placeholder,
 :root[data-theme="monochrome"] .compose-form textarea::placeholder,
@@ -1176,6 +1227,26 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f0e7dc;
   }
 
+  :root:not([data-color-scheme="light"]) .compose-input-container,
+  body:not([data-color-scheme="light"]) .compose-input-container {
+    background: #151310;
+    border: 1px solid #3a312a;
+  }
+
+  :root:not([data-color-scheme="light"]) .compose-input-container textarea,
+  body:not([data-color-scheme="light"]) .compose-input-container textarea {
+    color: #f0e7dc !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root:not([data-color-scheme="light"]) .compose-attachments,
+  body:not([data-color-scheme="light"]) .compose-attachments {
+    background: #1a1814;
+    border-top: 1px solid #3a312a;
+  }
+
   :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,
@@ -1191,6 +1262,26 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f7e7df;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container {
+    background: #1a100f;
+    border: 1px solid #3b2624;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container textarea,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container textarea {
+    color: #f7e7df !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments,
+  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments {
+    background: #2a1b19;
+    border-top: 1px solid #3b2624;
+  }
+
   :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,
@@ -1206,6 +1297,26 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #eff1f7;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container {
+    background: #181e2a;
+    border: 1px solid #2e3b50;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container textarea,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container textarea {
+    color: #eff1f7 !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments,
+  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments {
+    background: #212a3a;
+    border-top: 1px solid #2e3b50;
+  }
+
   :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,
@@ -1239,6 +1350,26 @@ body[data-theme="monochrome"] .compose-icon-button {
     color: #f0f0f0;
   }
 
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container {
+    background: #101010;
+    border: 1px solid #3a3a3a;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container textarea,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container textarea {
+    color: #f0f0f0 !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments,
+  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments {
+    background: #181818;
+    border-top: 1px solid #3a3a3a;
+  }
+
   :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,
@@ -2702,6 +2833,26 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f0e7dc;
   }
 
+  :root[data-color-scheme="dark"] .compose-input-container,
+  body[data-color-scheme="dark"] .compose-input-container {
+    background: #151310;
+    border: 1px solid #3a312a;
+  }
+
+  :root[data-color-scheme="dark"] .compose-input-container textarea,
+  body[data-color-scheme="dark"] .compose-input-container textarea {
+    color: #f0e7dc !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-color-scheme="dark"] .compose-attachments,
+  body[data-color-scheme="dark"] .compose-attachments {
+    background: #1a1814;
+    border-top: 1px solid #3a312a;
+  }
+
   :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,
@@ -2717,6 +2868,26 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f7e7df;
   }
 
+  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container,
+  body[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container {
+    background: #1a100f;
+    border: 1px solid #3b2624;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container textarea,
+  body[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container textarea {
+    color: #f7e7df !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-attachments,
+  body[data-color-scheme="dark"][data-theme="christmas"] .compose-attachments {
+    background: #2a1b19;
+    border-top: 1px solid #3b2624;
+  }
+
   :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,
@@ -2732,6 +2903,26 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #eff1f7;
   }
 
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container {
+    background: #181e2a;
+    border: 1px solid #2e3b50;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container textarea,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container textarea {
+    color: #eff1f7 !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-attachments,
+  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-attachments {
+    background: #212a3a;
+    border-top: 1px solid #2e3b50;
+  }
+
   :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,
@@ -2765,6 +2956,26 @@ body[data-color-scheme="dark"][data-theme="monochrome"] {
     color: #f0f0f0;
   }
 
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container {
+    background: #101010;
+    border: 1px solid #3a3a3a;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container textarea,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container textarea {
+    color: #f0f0f0 !important;
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-attachments,
+  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-attachments {
+    background: #181818;
+    border-top: 1px solid #3a3a3a;
+  }
+
   :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,

From c1eabf5895ffffba779f6aabafb0e0f437dc1095 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 11:57:03 +0900
Subject: [PATCH 14/16] =?UTF-8?q?refactor:=20=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=EC=83=81=EC=9E=90=20=EC=B2=A8=EB=B6=80=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 글자수 카운트를 첨부 영역 오른쪽 고정 위치로 이동
- 이미지 추가 버튼을 첨부 영역 내부로 이동하여 더 자연스러운 UX 제공
- 첨부 영역 좌우 스크롤 기능 추가 (스크롤바 숨김 처리)
- 모든 테마에 맞는 외곽선 색상 적용 및 flex-shrink 방지
- 이미지가 많아져도 레이아웃이 찌그러지지 않도록 개선
---
 src/ui/components/ComposeBox.tsx | 55 ++++++++++----------
 src/ui/styles/components.css     | 89 +++++++++++++++++++++++++++++++-
 2 files changed, 117 insertions(+), 27 deletions(-)

diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index 01291d1..5976ce5 100644
--- a/src/ui/components/ComposeBox.tsx
+++ b/src/ui/components/ComposeBox.tsx
@@ -511,8 +511,9 @@ export const ComposeBox = ({
               }
             }}
           />
-          {attachments.length > 0 ? (
-            <div className="compose-attachments">
+          <div className="compose-attachments">
+            {/* 첨부된 이미지들과 이미지 추가 버튼 */}
+            <div className="compose-attachments-scroll">
               {attachments.map((item) => (
                 <button
                   key={item.id}
@@ -528,8 +529,33 @@ export const ComposeBox = ({
                   <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>
-          ) : null}
+            
+            {/* 문자 수 표시 - 고정 위치 */}
+            {characterLimit && (
+              <div className="compose-attachments-character-count">
+                <span className={getCharacterCountClassName(charCountStatus)}>
+                  {currentCharCount.toLocaleString()} / {characterLimit.toLocaleString()}
+                </span>
+              </div>
+            )}
+          </div>
         </div>
         <div className="compose-actions">
           <select
@@ -544,15 +570,6 @@ export const ComposeBox = ({
             ))}
           </select>
           
-          {/* 문자 수 표시 */}
-          {characterLimit && (
-            <div className="compose-character-count">
-              <span className={getCharacterCountClassName(charCountStatus)}>
-                {currentCharCount.toLocaleString()} / {characterLimit.toLocaleString()}
-              </span>
-            </div>
-          )}
-          
           <div className="compose-actions-right">
             <button
               type="button"
@@ -578,20 +595,6 @@ export const ComposeBox = ({
             >
               CW
             </button>
-            <label className="file-button icon-button compose-icon-button" aria-label="이미지 추가">
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
-                <circle cx="9" cy="10" r="2" />
-                <path d="M21 16l-5-5-4 4-2-2-5 5" />
-              </svg>
-              <input
-                type="file"
-                accept="image/*"
-                multiple
-                onChange={handleFilesSelected}
-                disabled={isSubmitting}
-              />
-            </label>
             <button
               type="submit"
               className="icon-button compose-icon-button"
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index c8efc9d..26bd9f0 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1361,18 +1361,105 @@ button.ghost {
   width: 32px;
   height: 32px;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .compose-attachments {
   display: flex;
   gap: 8px;
-  flex-wrap: wrap;
   padding: 8px 12px 12px;
   background: #f9f6f2;
   border-top: 1px solid #e8dfd4;
   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 #a89b8a;
+  color: #6b5c4f;
+  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;
+}
+
+/* 테마별 외곽선 색상 */
+:root[data-theme="christmas"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #c9b9a6;
+  color: #7b3f3f;
+}
+
+:root[data-theme="sky-pink"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #aeb7c6;
+  color: #4a6b86;
+}
+
+:root[data-theme="monochrome"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #9e9e9e;
+  color: #2a2a2a;
+}
+
+/* 다크 모드에서의 외곽선 색상 */
+:root:not([data-color-scheme="light"]) .compose-attachments .file-button.attachment-thumb {
+  border-color: #8fa6cf;
+  color: #c4b6a6;
+}
+
+:root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #cf8c8c;
+  color: #cf8c8c;
+}
+
+:root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #f0a6c8;
+  color: #d7ddea;
+}
+
+:root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments .file-button.attachment-thumb {
+  border-color: #f0f0f0;
+  color: #d6d6d6;
+}
+
+/* 스크롤바 스타일 없음 - 사용자 요청 */
+
 .file-button {
   background: #e1e7f4;
   color: #1e2b45;

From b463a5c2fb2ea74e2e4b3bf0c88603427008add7 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 14:02:03 +0900
Subject: [PATCH 15/16] =?UTF-8?q?refactor:=20=ED=85=8C=EB=A7=88=20CSS=20?=
 =?UTF-8?q?=ED=86=A0=ED=81=B0=ED=99=94=20=EB=B0=8F=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/styles/base.css         |  174 +-
 src/ui/styles/components.css   |  361 ++-
 src/ui/styles/layout.css       |   12 +-
 src/ui/styles/theme.css        | 4171 +-------------------------------
 src/ui/styles/themes/dark.css  |  917 +++++++
 src/ui/styles/themes/light.css |  320 +++
 6 files changed, 1577 insertions(+), 4378 deletions(-)
 create mode 100644 src/ui/styles/themes/dark.css
 create mode 100644 src/ui/styles/themes/light.css

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 26bd9f0..87d13a3 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1,11 +1,11 @@
 .sidebar-description {
   margin: 0 0 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-sidebar-description);
 }
 
 .sidebar-description a {
-  color: #3b5fa8;
+  color: var(--color-sidebar-description-link);
   text-decoration: underline;
 }
 
@@ -45,12 +45,12 @@
 
 .sidebar-divider {
   height: 1px;
-  background: #e2ddd5;
+  background: var(--color-sidebar-divider);
   margin: 12px 0;
 }
 
 .sidebar-links a {
-  color: #7c6152;
+  color: var(--color-sidebar-link);
   font-size: 13px;
   text-decoration: none;
 }
@@ -66,7 +66,7 @@
 .readme-text {
   font-size: 12px;
   line-height: 1.5;
-  color: #6b5c4f;
+  color: var(--color-readme-text);
 }
 
 .readme-text h1,
@@ -86,19 +86,19 @@
 }
 
 .readme-text a {
-  color: #7c6152;
+  color: var(--color-readme-link);
   text-decoration: underline;
 }
 
 .readme-text code {
-  background: #f5efe7;
+  background: var(--color-readme-code-bg);
   padding: 2px 4px;
   border-radius: 6px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 .readme-text pre {
-  background: #f5efe7;
+  background: var(--color-readme-code-bg);
   padding: 12px;
   border-radius: 12px;
   overflow: auto;
@@ -116,37 +116,38 @@
   max-width: calc(50% - 4px);
   height: auto;
   border-radius: 12px;
-  border: 1px solid #e2ddd5;
-  background: #f5efe7;
+  border: 1px solid var(--color-readme-code-border);
+  background: var(--color-readme-code-bg);
 }
 
 .license {
   white-space: pre-wrap;
   font-size: 12px;
-  background: #f5efe7;
+  background: var(--color-license-bg);
   border-radius: 12px;
   padding: 12px;
-  border: 1px solid #e2ddd5;
+  border: 1px solid var(--color-license-border);
+  color: var(--color-license-text);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 .oss-list {
   margin: 0;
   padding-left: 18px;
-  color: #6b5c4f;
+  color: var(--color-oss-list);
 }
 
 .app-header p {
   margin: 4px 0 0;
-  color: #5b4e43;
+  color: var(--color-app-header-text);
 }
 
 .account-add-button {
   width: 100%;
   height: 32px;
   border-radius: 10px;
-  background: #3b5fa8;
-  color: #f2f6ff;
+  background: var(--color-account-add-button-bg);
+  color: var(--color-account-add-button-text);
   font-size: 14px;
   line-height: 1;
   padding: 0 12px;
@@ -168,11 +169,12 @@
 .account-add-panel {
   width: 100%;
   max-width: 100%;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-account-add-panel-bg);
+  border: 1px solid var(--color-account-add-panel-border);
   border-radius: 12px;
   padding: 12px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.12);
+  box-shadow: var(--shadow-account-add-panel);
+  color: var(--color-account-add-panel-text);
   margin-top: 8px;
 }
 
@@ -185,7 +187,7 @@
 .settings-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.6);
+  background: var(--color-settings-backdrop);
 }
 
 .settings-modal-content {
@@ -220,7 +222,7 @@
   align-items: center;
   gap: 12px;
   padding: 10px 0;
-  border-top: 1px solid #e2ddd5;
+  border-top: 1px solid var(--color-settings-item-border);
 }
 
 .settings-item:first-of-type {
@@ -231,21 +233,23 @@
 .settings-item p {
   margin: 4px 0 0;
   font-size: 12px;
-  color: #6b5c4f;
+  color: var(--color-settings-item-text);
 }
 
 .settings-item select {
   min-width: 120px;
   height: 32px;
   border-radius: 8px;
-  border: 1px solid #d8d1c7;
+  border: 1px solid var(--color-settings-select-border);
+  background: var(--color-settings-select-bg);
+  color: var(--color-settings-select-text);
   padding: 0 10px;
   font-family: inherit;
 }
 
 .settings-danger-button {
-  background: #9a2e1f;
-  color: #fff6f0;
+  background: var(--color-action-danger-bg);
+  color: var(--color-action-danger-text);
 }
 
 .settings-item .account-add-wrapper {
@@ -310,8 +314,8 @@
   height: 32px;
   border-radius: 10px;
   overflow: hidden;
-  background: #f5efe7;
-  border: 1px solid #e2ddd5;
+  background: var(--color-avatar-bg);
+  border: 1px solid var(--color-avatar-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -327,17 +331,17 @@
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #c9b9a6;
+  background: var(--color-avatar-fallback);
 }
 
 .account-handle {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-handle);
 }
 
 .account-list .ghost {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-handle);
   flex-shrink: 0;
   white-space: nowrap;
 }
@@ -383,8 +387,8 @@
   padding: 10px 14px;
   height: 48px;
   border-radius: 12px;
-  border: 1px solid #e2ddd5;
-  background: #fffdfa;
+  border: 1px solid var(--color-account-selector-border);
+  background: var(--color-account-selector-bg);
   width: 100%;
 }
 
@@ -417,13 +421,13 @@
 }
 
 .account-selector-placeholder {
-  color: #8a6b58;
+  color: var(--color-account-selector-placeholder);
   font-size: 13px;
 }
 
 .account-selector-caret {
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-account-selector-placeholder);
 }
 
 .account-selector-dropdown {
@@ -432,11 +436,11 @@
   left: 0;
   right: 0;
   z-index: 20;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-account-selector-bg);
+  border: 1px solid var(--color-account-selector-border);
   border-radius: 12px;
   padding: 6px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.12);
+  box-shadow: var(--shadow-account-selector);
 }
 
 .account-selector .account-list {
@@ -459,7 +463,7 @@
 }
 
 .account-form-divider {
-  border-top: 1px dashed #e2ddd5;
+  border-top: 1px dashed var(--color-settings-item-border);
   padding-top: 14px;
 }
 
@@ -468,7 +472,9 @@
   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;
 }
 
@@ -476,8 +482,8 @@
   position: relative;
   width: 100%;
   border-radius: 12px;
-  border: 1px solid #d8d1c7;
-  background: #fffdfa;
+  border: 1px solid var(--color-input-border);
+  background: var(--color-compose-input-bg);
   display: flex;
   flex-direction: column;
 }
@@ -492,16 +498,22 @@
   resize: vertical !important;
   background: transparent !important;
   min-height: 80px;
-  color: inherit !important;
+  color: var(--color-input-text) !important;
   outline: none !important;
   box-shadow: none !important;
 }
 
 .compose-input-container textarea::placeholder {
-  color: inherit;
+  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 {
   position: relative;
 }
@@ -514,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;
 }
 
@@ -535,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;
 }
@@ -554,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;
@@ -577,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;
 }
 
@@ -589,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;
 }
 
@@ -616,27 +632,27 @@
 
 .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: #6b7280;
+  color: var(--color-character-count);
   margin: 0 8px;
 }
 
 .compose-character-count-normal {
-  color: #6b7280;
+  color: var(--color-character-count-normal);
 }
 
 .compose-character-count-warning {
-  color: #f59e0b;
+  color: var(--color-character-count-warning);
 }
 
 .compose-character-count-limit {
-  color: #ef4444;
+  color: var(--color-character-count-limit);
   font-weight: 600;
 }
 
@@ -647,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;
@@ -662,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 {
@@ -677,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;
@@ -692,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;
@@ -742,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 {
@@ -753,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;
@@ -814,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;
 }
 
@@ -886,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;
 }
 
@@ -899,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;
@@ -912,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;
@@ -920,7 +936,7 @@ button.ghost {
 }
 
 .section-menu-panel .danger {
-  color: #9a2e1f;
+  color: var(--color-section-menu-danger);
   font-weight: 600;
 }
 
@@ -1000,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 {
@@ -1010,7 +1026,15 @@ button.ghost {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
+}
+
+.status header strong {
+  color: var(--color-status-header-strong);
+}
+
+.status header span {
+  color: var(--color-status-meta);
 }
 
 .status-header-main {
@@ -1066,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;
@@ -1084,7 +1108,7 @@ button.ghost {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: #c9b9a6;
+  background: var(--color-avatar-fallback);
 }
 
 .status-header {
@@ -1093,7 +1117,7 @@ button.ghost {
   align-items: center;
   gap: 12px;
   font-size: 13px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
 }
 
 .status-header div {
@@ -1128,7 +1152,7 @@ button.ghost {
 }
 
 .time-link {
-  color: inherit;
+  color: var(--color-status-meta);
   text-decoration: none;
 }
 
@@ -1158,7 +1182,7 @@ button.ghost {
 .status-time {
   margin-top: 10px;
   font-size: 12px;
-  color: #8a6b58;
+  color: var(--color-status-time);
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1169,7 +1193,7 @@ button.ghost {
 }
 
 .status-time[role="button"]:hover {
-  color: #3b5fa8;
+  color: var(--color-link);
 }
 
 .status-time a {
@@ -1192,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 {
@@ -1240,7 +1264,7 @@ button.ghost {
 }
 
 .status-text a {
-  color: #7c6152;
+  color: var(--color-status-link);
   text-decoration: underline;
   word-break: break-word;
 }
@@ -1252,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 {
@@ -1276,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 {
@@ -1303,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;
 }
 
@@ -1345,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 {
@@ -1354,10 +1378,10 @@ 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;
@@ -1368,8 +1392,8 @@ button.ghost {
   display: flex;
   gap: 8px;
   padding: 8px 12px 12px;
-  background: #f9f6f2;
-  border-top: 1px solid #e8dfd4;
+  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 이미지 썸네일 + 패딩과 동일 */
@@ -1405,8 +1429,8 @@ button.ghost {
 /* 첨부 영역 내의 이미지 추가 버튼 */
 .compose-attachments .file-button.attachment-thumb {
   background: transparent;
-  border: 2px dashed #a89b8a;
-  color: #6b5c4f;
+  border: 2px dashed var(--color-attachment-add-border);
+  color: var(--color-attachment-add-text);
   flex-shrink: 0;
 }
 
@@ -1421,48 +1445,11 @@ button.ghost {
   stroke-linejoin: round;
 }
 
-/* 테마별 외곽선 색상 */
-:root[data-theme="christmas"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #c9b9a6;
-  color: #7b3f3f;
-}
-
-:root[data-theme="sky-pink"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #aeb7c6;
-  color: #4a6b86;
-}
-
-:root[data-theme="monochrome"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #9e9e9e;
-  color: #2a2a2a;
-}
-
-/* 다크 모드에서의 외곽선 색상 */
-:root:not([data-color-scheme="light"]) .compose-attachments .file-button.attachment-thumb {
-  border-color: #8fa6cf;
-  color: #c4b6a6;
-}
-
-:root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #cf8c8c;
-  color: #cf8c8c;
-}
-
-:root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #f0a6c8;
-  color: #d7ddea;
-}
-
-:root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments .file-button.attachment-thumb {
-  border-color: #f0f0f0;
-  color: #d6d6d6;
-}
-
 /* 스크롤바 스타일 없음 - 사용자 요청 */
 
 .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;
@@ -1495,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 {
@@ -1515,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 {
@@ -1525,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;
 }
@@ -1557,8 +1544,8 @@ button.ghost {
   width: min(92vw, 600px);
   max-height: 80vh;
   overflow: auto;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-confirm-modal-bg);
+  border: 1px solid var(--color-confirm-modal-border);
   border-radius: 16px;
   padding: 16px;
   display: flex;
@@ -1576,6 +1563,9 @@ button.ghost {
 
 .confirm-status {
   padding: 14px;
+  background: var(--color-confirm-status-bg);
+  border: 1px solid var(--color-confirm-status-border);
+  border-radius: 12px;
 }
 
 .confirm-actions {
@@ -1591,7 +1581,7 @@ button.ghost {
 
 .confirm-actions .delete-button {
   width: auto;
-  color: #fffaf2;
+  color: var(--color-delete-button-text);
 }
 
 .status-modal {
@@ -1606,7 +1596,7 @@ button.ghost {
 .status-modal-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.7);
+  background: var(--color-status-backdrop);
 }
 
 .status-modal-content {
@@ -1615,13 +1605,13 @@ button.ghost {
   width: min(92vw, 600px);
   max-height: 80vh;
   overflow: hidden;
-  background: #fffdfa;
-  border: 1px solid #e2ddd5;
+  background: var(--color-status-modal-bg);
+  border: 1px solid var(--color-status-modal-border);
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   margin: 20px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--shadow-status-modal);
 }
 
 .status-modal-header {
@@ -1629,13 +1619,14 @@ button.ghost {
   justify-content: space-between;
   align-items: center;
   padding: 16px 16px 12px;
-  border-bottom: 1px solid #e2ddd5;
+  border-bottom: 1px solid var(--color-status-modal-divider);
 }
 
 .status-modal-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  color: var(--color-status-modal-title);
 }
 
 .status-modal-header-actions {
@@ -1649,14 +1640,14 @@ button.ghost {
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: #6b5c4f;
+  color: var(--color-status-header);
 }
 
 .thread-loading-spinner {
   width: 12px;
   height: 12px;
-  border: 1.5px solid #d8d1c7;
-  border-top-color: #3b5fa8;
+  border: 1.5px solid var(--color-input-border);
+  border-top-color: var(--color-action-bg);
   border-radius: 50%;
   animation: thread-loading-spin 0.8s linear infinite;
 }
@@ -1679,7 +1670,7 @@ button.ghost {
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-boosted-by);
   margin-bottom: 8px;
 }
 
@@ -1693,7 +1684,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-notification-actor);
   margin-bottom: 8px;
 }
 
@@ -1709,7 +1700,7 @@ button.ghost {
   align-items: center;
   gap: 8px;
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-reply-info);
   margin-bottom: 8px;
 }
 
@@ -1730,7 +1721,7 @@ button.ghost {
   position: absolute;
   inset: 0;
   border-radius: 999px;
-  background: #d8d1c7;
+  background: var(--color-switch-track);
   transition: background 0.2s ease;
 }
 
@@ -1740,14 +1731,14 @@ button.ghost {
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: #ffffff;
+  background: var(--color-switch-thumb);
   top: 3px;
   left: 3px;
   transition: transform 0.2s ease;
 }
 
 .switch input:checked + .slider {
-  background: #2e6b4f;
+  background: var(--color-switch-on);
 }
 
 .switch input:checked + .slider::before {
@@ -1760,17 +1751,17 @@ button.ghost {
 }
 
 .error {
-  color: #9a2e1f;
+  color: var(--color-error-text);
   font-size: 13px;
 }
 
 .empty {
-  color: #8a6b58;
+  color: var(--color-empty-text);
   font-size: 13px;
 }
 
 .hint {
-  color: #7c6152;
+  color: var(--color-hint-text);
   font-size: 12px;
   margin-top: 12px;
 }
@@ -1779,7 +1770,7 @@ button.ghost {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #f5efe7;
+  background: var(--color-replying-bg);
   border-radius: 10px;
   padding: 8px 12px;
   margin-bottom: 12px;
@@ -1799,7 +1790,7 @@ button.ghost {
 .mobile-menu-backdrop {
   position: absolute;
   inset: 0;
-  background: rgba(15, 13, 11, 0.6);
+  background: var(--color-settings-backdrop);
 }
 
 .mobile-menu-panel {
@@ -1877,8 +1868,8 @@ button.ghost {
 .thread-item.thread-descendant .status {
   padding: 10px;
   border-radius: 10px;
-  border: 1px solid #f0ebe3;
-  background: #faf9f6;
+  border: 1px solid var(--color-thread-border);
+  background: var(--color-thread-bg);
 }
 
 /* 스레드 커넥터 불필요하여 제거 */
@@ -1903,9 +1894,9 @@ button.ghost {
 }
 
 .thread-error {
-  color: #9a2e1f;
-  background: #fdf2f0;
-  border: 1px solid #f5d6d0;
+  color: var(--color-thread-error-text);
+  background: var(--color-thread-error-bg);
+  border: 1px solid var(--color-thread-error-border);
 }
 
 /* 스레드 아이템 내부의 액션 버튼들은 작게 표시 */
diff --git a/src/ui/styles/layout.css b/src/ui/styles/layout.css
index 126f850..c44aa66 100644
--- a/src/ui/styles/layout.css
+++ b/src/ui/styles/layout.css
@@ -51,7 +51,7 @@
 .brand-text p {
   margin: 0;
   font-size: 11px;
-  color: #6b5c4f;
+  color: var(--color-brand-text);
 }
 
 .brand + .sidebar-description {
@@ -67,7 +67,7 @@
 
 .back-link {
   font-size: 12px;
-  color: #7c6152;
+  color: var(--color-back-link);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
@@ -99,11 +99,11 @@ aside {
 }
 
 .panel {
-  background: #ffffffcc;
-  border: 1px solid #e2ddd5;
+  background: var(--color-panel-bg);
+  border: 1px solid var(--color-panel-border);
   border-radius: 16px;
   padding: 16px;
-  box-shadow: 0 18px 40px rgba(67, 57, 45, 0.08);
+  box-shadow: var(--shadow-panel);
 }
 
 .panel h2 {
@@ -156,7 +156,7 @@ aside {
   }
 
   .brand-text p {
-    color: #c4b6a6;
+    color: var(--color-brand-text-mobile);
   }
 
   .timeline-column {
diff --git a/src/ui/styles/theme.css b/src/ui/styles/theme.css
index b59c1dc..7a4ba4b 100644
--- a/src/ui/styles/theme.css
+++ b/src/ui/styles/theme.css
@@ -1,4169 +1,2 @@
-:root[data-theme="christmas"] .sidebar-description {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .brand-text p {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .sidebar-description a {
-  color: #b43b3b;
-}
-
-:root[data-theme="christmas"] .sidebar-links a {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .sidebar-divider {
-  background: #ead7cc;
-}
-
-:root[data-theme="christmas"] .settings-modal-backdrop {
-  background: rgba(32, 16, 15, 0.65);
-}
-
-:root[data-theme="christmas"] .status-modal-backdrop {
-  background: rgba(32, 16, 15, 0.7);
-}
-
-:root[data-theme="christmas"] .status-modal-content {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 20px 60px rgba(134, 40, 40, 0.15);
-}
-
-:root[data-theme="christmas"] .status-modal-header {
-  border-bottom: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-modal-title {
-  color: #5b1f1f;
-}
-
-
-
-:root[data-theme="christmas"] .overlay-backdrop,
-body[data-theme="christmas"] .overlay-backdrop {
-  background: rgba(91, 31, 31, 0.12);
-}
-
-:root[data-theme="christmas"] .settings-item {
-  border-top: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .settings-item p {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .panel {
-  border: 1px solid #e2cfc4;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.08);
-}
-
-:root[data-theme="christmas"] .account-add-button {
-  background: #2e6b4f;
-  color: #f4fff7;
-}
-
-:root[data-theme="christmas"] .account-add-panel {
-  background: rgba(255, 247, 242, 0.92);
-  color: #5b1f1f;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .status-avatar {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-avatar-fallback {
-  background: #d4b2a2;
-}
-
-:root[data-theme="christmas"] .account-selector-summary {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .account-selector-dropdown {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .account-selector-placeholder,
-:root[data-theme="christmas"] .account-selector-caret {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .account-handle {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] button {
-  background: #b43b3b;
-  color: #fff4f4;
-}
-
-:root[data-theme="christmas"] .settings-danger-button {
-  background: #8f2f2f;
-  color: #fff1f1;
-}
-
-:root[data-theme="christmas"] button.is-active {
-  background: #e4b46b;
-  color: #3d2a12;
-}
-
-:root[data-theme="christmas"] button.ghost {
-  color: #8f2f2f;
-}
-
-:root[data-theme="christmas"] .text-link,
-body[data-theme="christmas"] .text-link {
-  background: none;
-}
-
-:root[data-theme="christmas"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="christmas"] .section-menu-panel {
-  background: rgba(255, 247, 242, 0.92);
-  color: #5b1f1f;
-  border: 1px solid #ead7cc;
-  box-shadow: 0 18px 40px rgba(134, 40, 40, 0.12);
-}
-
-:root[data-theme="christmas"] .section-menu-panel button,
-body[data-theme="christmas"] .section-menu-panel button {
-  background: none;
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .timeline-column {
-  background: #fff7f2;
-  border: 1px solid #ead7cc;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(134, 40, 40, 0.06);
-}
-
-:root[data-theme="christmas"] .status {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .status header {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .status header strong {
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .status header span,
-:root[data-theme="christmas"] .time-link {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-time {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-warning,
-body[data-theme="christmas"] .status-warning {
-  background: #f3e4dc;
-}
-
-:root[data-theme="christmas"] .status-warning-text,
-body[data-theme="christmas"] .status-warning-text {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .link-preview {
-  border: 1px solid #ead7cc;
-  background: #fff7f2;
-}
-
-:root[data-theme="christmas"] .link-preview-body {
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .link-preview-body strong {
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .link-preview-url {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-text a {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .status-reaction {
-  color: #5b1f1f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .status-reaction.is-active {
-  background: #7b3f3f;
-  border-color: #5b1f1f;
-  color: #fff1f1;
-}
-
-:root[data-theme="christmas"] .file-button {
-  background: #f3e4dc;
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .compose-icon-button,
-body[data-theme="christmas"] .compose-icon-button {
-  background: #f3e4dc;
-  color: #7b3f3f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-panel {
-  background: #fff7f2;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-category-toggle {
-  background: #f3e4dc;
-  color: #7b3f3f;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-count {
-  background: #ead7cc;
-  color: #5b1f1f;
-}
-
-:root[data-theme="christmas"] .compose-emoji-button {
-  background: #f3e4dc;
-  border-color: #ead7cc;
-}
-
-:root[data-theme="christmas"] .compose-emoji-empty {
-  color: #a36a6a;
-}
-
-:root[data-theme="christmas"] .compose-busy-backdrop {
-  background: rgba(32, 16, 15, 0.25);
-}
-
-:root[data-theme="christmas"] .compose-busy-content {
-  background: #fff7f2;
-  border-color: #ead7cc;
-  color: #7b3f3f;
-}
-
-:root[data-theme="christmas"] .compose-busy-spinner {
-  border-color: #ead7cc;
-  border-top-color: #b43b3b;
-}
-
-:root[data-theme="christmas"] .boosted-by,
-:root[data-theme="christmas"] .notification-actor {
-  color: #2e6b4f;
-}
-
-:root[data-theme="christmas"] .reply-info {
-  color: #7b3f3f;
-}
-
-  :root[data-theme="christmas"] .account-form input,
-  :root[data-theme="christmas"] .compose-form textarea,
-  :root[data-theme="christmas"] .compose-cw input,
-  :root[data-theme="christmas"] .compose-actions select,
-  :root[data-theme="christmas"] .settings-item select {
-    background: #fff7f2;
-    border: 1px solid #ead7cc;
-    color: #5b1f1f;
-  }
-
-  :root[data-theme="christmas"] .compose-input-container {
-    background: #fff7f2;
-    border: 1px solid #ead7cc;
-  }
-
-  :root[data-theme="christmas"] .compose-input-container textarea {
-    color: #5b1f1f !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-theme="christmas"] .compose-attachments {
-    background: #f3e4dc;
-    border-top: 1px solid #ead7cc;
-  }
-
-:root[data-theme="christmas"] .account-form input::placeholder,
-:root[data-theme="christmas"] .compose-form textarea::placeholder,
-:root[data-theme="christmas"] .compose-cw input::placeholder {
-  color: #a36a6a;
-}
-
-:root[data-theme="sky-pink"] .sidebar-description {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .brand-text p {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .sidebar-description a {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .sidebar-links a {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .sidebar-divider {
-  background: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .settings-modal-backdrop {
-  background: rgba(29, 51, 74, 0.6);
-}
-
-:root[data-theme="sky-pink"] .status-modal-backdrop {
-  background: rgba(29, 51, 74, 0.7);
-}
-
-:root[data-theme="sky-pink"] .status-modal-content {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 20px 60px rgba(58, 118, 185, 0.15);
-}
-
-:root[data-theme="sky-pink"] .status-modal-header {
-  border-bottom: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-modal-title {
-  color: #2b4f7d;
-}
-
-
-
-:root[data-theme="sky-pink"] .overlay-backdrop,
-body[data-theme="sky-pink"] .overlay-backdrop {
-  background: rgba(74, 139, 216, 0.14);
-}
-
-:root[data-theme="sky-pink"] .settings-item {
-  border-top: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .settings-item p {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .panel {
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.12);
-}
-
-:root[data-theme="sky-pink"] .account-add-button {
-  background: #4a8bd8;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] .account-add-panel {
-  background: rgba(247, 251, 255, 0.92);
-  color: #2b4f7d;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .status-avatar {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-avatar-fallback {
-  background: #c7d9ef;
-}
-
-:root[data-theme="sky-pink"] .account-selector-summary,
-:root[data-theme="sky-pink"] .account-selector-dropdown {
-  border: 1px solid #d6e5f2;
-  background: #f7fbff;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .account-handle {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .account-selector-placeholder,
-:root[data-theme="sky-pink"] .account-selector-caret {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] button {
-  background: #f2a5c9;
-  color: #3d2130;
-}
-
-:root[data-theme="sky-pink"] .settings-danger-button {
-  background: #c24b5d;
-  color: #fff4f6;
-}
-
-:root[data-theme="sky-pink"] button.is-active {
-  background: #4a8bd8;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] button.ghost {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .text-link,
-body[data-theme="sky-pink"] .text-link {
-  background: none;
-}
-
-:root[data-theme="sky-pink"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="sky-pink"] .section-menu-panel {
-  background: rgba(247, 251, 255, 0.92);
-  color: #2b4f7d;
-  border: 1px solid #d6e5f2;
-  box-shadow: 0 18px 40px rgba(58, 118, 185, 0.16);
-}
-
-:root[data-theme="sky-pink"] .section-menu-panel button,
-body[data-theme="sky-pink"] .section-menu-panel button {
-  background: none;
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .timeline-column {
-  background: #f7fbff;
-  border: 1px solid #d6e5f2;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(58, 118, 185, 0.08);
-}
-
-:root[data-theme="sky-pink"] .status {
-  border: 1px solid #d6e5f2;
-  background: #fff5fa;
-}
-
-:root[data-theme="sky-pink"] .status header {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .status header strong {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .status header span,
-:root[data-theme="sky-pink"] .time-link {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .status-time {
-  color: #c86a92;
-}
-
-:root[data-theme="sky-pink"] .status-warning,
-body[data-theme="sky-pink"] .status-warning {
-  background: #fbeaf2;
-}
-
-:root[data-theme="sky-pink"] .status-warning-text,
-body[data-theme="sky-pink"] .status-warning-text {
-  color: #9b5b7c;
-}
-
-:root[data-theme="sky-pink"] .link-preview {
-  border: 1px solid #d6e5f2;
-  background: #fff5fa;
-}
-
-:root[data-theme="sky-pink"] .link-preview-body {
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .link-preview-body strong {
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .link-preview-url {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .status-text a {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .status-reaction {
-  color: #2b4f7d;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .status-reaction.is-active {
-  background: #4a8bd8;
-  border-color: #2b4f7d;
-  color: #f6fbff;
-}
-
-:root[data-theme="sky-pink"] .file-button {
-  background: #e9f2fb;
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .compose-icon-button,
-body[data-theme="sky-pink"] .compose-icon-button {
-  background: #e9f2fb;
-  color: #4a6b86;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-panel {
-  background: #f7fbff;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-category-toggle {
-  background: #e9f2fb;
-  color: #4a6b86;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-count {
-  background: #d6e5f2;
-  color: #2b4f7d;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-button {
-  background: #e9f2fb;
-  border-color: #d6e5f2;
-}
-
-:root[data-theme="sky-pink"] .compose-emoji-empty {
-  color: #9b7a8b;
-}
-
-:root[data-theme="sky-pink"] .compose-busy-backdrop {
-  background: rgba(29, 51, 74, 0.2);
-}
-
-:root[data-theme="sky-pink"] .compose-busy-content {
-  background: #f7fbff;
-  border-color: #d6e5f2;
-  color: #4a6b86;
-}
-
-:root[data-theme="sky-pink"] .compose-busy-spinner {
-  border-color: #d6e5f2;
-  border-top-color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .boosted-by,
-:root[data-theme="sky-pink"] .notification-actor {
-  color: #4a8bd8;
-}
-
-:root[data-theme="sky-pink"] .reply-info {
-  color: #c86a92;
-}
-
-  :root[data-theme="sky-pink"] .account-form input,
-  :root[data-theme="sky-pink"] .compose-form textarea,
-  :root[data-theme="sky-pink"] .compose-cw input,
-  :root[data-theme="sky-pink"] .compose-actions select,
-  :root[data-theme="sky-pink"] .settings-item select {
-    background: #f7fbff;
-    border: 1px solid #d6e5f2;
-    color: #2b4f7d;
-  }
-
-  :root[data-theme="sky-pink"] .compose-input-container {
-    background: #f7fbff;
-    border: 1px solid #d6e5f2;
-  }
-
-  :root[data-theme="sky-pink"] .compose-input-container textarea {
-    color: #2b4f7d !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-theme="sky-pink"] .compose-attachments {
-    background: #e9f2fb;
-    border-top: 1px solid #d6e5f2;
-  }
-
-:root[data-theme="sky-pink"] .account-form input::placeholder,
-:root[data-theme="sky-pink"] .compose-form textarea::placeholder,
-:root[data-theme="sky-pink"] .compose-cw input::placeholder {
-  color: #9b7a8b;
-}
-
-:root[data-theme="monochrome"] .sidebar-description {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .brand-text p {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .sidebar-description a {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .sidebar-links a {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .sidebar-divider {
-  background: #111111;
-}
-
-:root[data-theme="monochrome"] .settings-modal-backdrop {
-  background: rgba(10, 10, 10, 0.65);
-}
-
-:root[data-theme="monochrome"] .status-modal-backdrop {
-  background: rgba(10, 10, 10, 0.7);
-}
-
-:root[data-theme="monochrome"] .status-modal-content {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-}
-
-:root[data-theme="monochrome"] .status-modal-header {
-  border-bottom: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-modal-title {
-  color: #111111;
-}
-
-
-
-:root[data-theme="monochrome"] .overlay-backdrop,
-body[data-theme="monochrome"] .overlay-backdrop {
-  background: rgba(17, 17, 17, 0.16);
-}
-
-:root[data-theme="monochrome"] .settings-item {
-  border-top: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .settings-item p {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .panel {
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
-}
-
-:root[data-theme="monochrome"] .account-add-button {
-  background: #111111;
-  color: #ffffff;
-}
-
-:root[data-theme="monochrome"] .account-add-panel {
-  background: rgba(255, 255, 255, 0.92);
-  color: #111111;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .status-avatar {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-avatar-fallback {
-  background: #b3b3b3;
-}
-
-:root[data-theme="monochrome"] .account-selector-summary,
-:root[data-theme="monochrome"] .account-selector-dropdown {
-  border: 1px solid #1d1d1d;
-  background: rgba(255, 255, 255, 0.92);
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .account-selector-placeholder,
-:root[data-theme="monochrome"] .account-selector-caret {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .account-handle {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] button {
-  background: #111111;
-  color: #ffffff;
-}
-
-:root[data-theme="monochrome"] .settings-danger-button {
-  background: #c62828;
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] button.is-active {
-  background: #e6e6e6;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] button.ghost {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .text-link,
-body[data-theme="monochrome"] .text-link {
-  background: none;
-}
-
-:root[data-theme="monochrome"] .account-list button {
-  background: none;
-  color: inherit;
-}
-
-:root[data-theme="monochrome"] .section-menu-panel {
-  background: rgba(255, 255, 255, 0.92);
-  color: #111111;
-  border: 1px solid #1d1d1d;
-  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
-}
-
-:root[data-theme="monochrome"] .section-menu-panel button,
-body[data-theme="monochrome"] .section-menu-panel button {
-  background: none;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .timeline-column {
-  background: #ffffff;
-  border: 1px solid #1d1d1d;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(0, 0, 0, 0.06);
-}
-
-:root[data-theme="monochrome"] .status {
-  border: 1px solid #1d1d1d;
-  background: #ffffff;
-}
-
-:root[data-theme="monochrome"] .status header {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status header strong {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .status header span,
-:root[data-theme="monochrome"] .time-link {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-time {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-warning,
-body[data-theme="monochrome"] .status-warning {
-  background: #f1f1f1;
-}
-
-:root[data-theme="monochrome"] .status-warning-text,
-body[data-theme="monochrome"] .status-warning-text {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .link-preview {
-  border: 1px solid #1d1d1d;
-  background: #ffffff;
-}
-
-:root[data-theme="monochrome"] .link-preview-body {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .link-preview-body strong {
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .link-preview-url {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-text a {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .status-reaction {
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .status-reaction.is-active {
-  background: #2a2a2a;
-  border-color: #111111;
-  color: #f5f5f5;
-}
-
-:root[data-theme="monochrome"] .file-button {
-  background: #f1f1f1;
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .compose-icon-button,
-body[data-theme="monochrome"] .compose-icon-button {
-  background: #f1f1f1;
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .delete-button {
-  background: #c62828;
-}
-
-:root[data-theme="monochrome"] .confirm-actions .delete-button {
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] .image-modal-delete {
-  background: #c62828;
-  color: #fff5f5;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-panel {
-  background: #ffffff;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-category-toggle {
-  background: #f1f1f1;
-  color: #2a2a2a;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-count {
-  background: #e5e5e5;
-  color: #111111;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-button {
-  background: #f1f1f1;
-  border-color: #1d1d1d;
-}
-
-:root[data-theme="monochrome"] .compose-emoji-empty {
-  color: #6b6b6b;
-}
-
-:root[data-theme="monochrome"] .compose-busy-backdrop {
-  background: rgba(10, 10, 10, 0.2);
-}
-
-:root[data-theme="monochrome"] .compose-busy-content {
-  background: #ffffff;
-  border-color: #1d1d1d;
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .compose-busy-spinner {
-  border-color: #1d1d1d;
-  border-top-color: #111111;
-}
-
-:root[data-theme="monochrome"] .boosted-by,
-:root[data-theme="monochrome"] .notification-actor {
-  color: #2a2a2a;
-}
-
-:root[data-theme="monochrome"] .reply-info {
-  color: #2a2a2a;
-}
-
-  :root[data-theme="monochrome"] .account-form input,
-  :root[data-theme="monochrome"] .compose-form textarea,
-  :root[data-theme="monochrome"] .compose-cw input,
-  :root[data-theme="monochrome"] .compose-actions select,
-  :root[data-theme="monochrome"] .settings-item select {
-    background: #ffffff;
-    border: 1px solid #1d1d1d;
-    color: #111111;
-  }
-
-  :root[data-theme="monochrome"] .compose-input-container {
-    background: #ffffff;
-    border: 1px solid #1d1d1d;
-  }
-
-  :root[data-theme="monochrome"] .compose-input-container textarea {
-    color: #111111 !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-theme="monochrome"] .compose-attachments {
-    background: #f1f1f1;
-    border-top: 1px solid #1d1d1d;
-  }
-
-: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"]) .compose-input-container,
-  body:not([data-color-scheme="light"]) .compose-input-container {
-    background: #151310;
-    border: 1px solid #3a312a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-input-container textarea,
-  body:not([data-color-scheme="light"]) .compose-input-container textarea {
-    color: #f0e7dc !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-attachments,
-  body:not([data-color-scheme="light"]) .compose-attachments {
-    background: #1a1814;
-    border-top: 1px solid #3a312a;
-  }
-
-  :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="christmas"] .compose-input-container,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container textarea,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-input-container textarea {
-    color: #f7e7df !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-attachments {
-    background: #2a1b19;
-    border-top: 1px solid #3b2624;
-  }
-
-  :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="sky-pink"] .compose-input-container,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container textarea,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-input-container textarea {
-    color: #eff1f7 !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-attachments {
-    background: #212a3a;
-    border-top: 1px solid #2e3b50;
-  }
-
-  :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"] .compose-input-container,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container textarea,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-input-container textarea {
-    color: #f0f0f0 !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-attachments {
-    background: #181818;
-    border-top: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-form input::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-cw input::placeholder {
-    color: #8a8a8a;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-form-divider,
-  body:not([data-color-scheme="light"]) .account-form-divider {
-    border-top: 1px dashed #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-form input::placeholder,
-  body:not([data-color-scheme="light"]) .account-form input::placeholder,
-  :root:not([data-color-scheme="light"]) .compose-form textarea::placeholder,
-  body:not([data-color-scheme="light"]) .compose-form textarea::placeholder,
-  :root:not([data-color-scheme="light"]) .compose-cw input::placeholder,
-  body:not([data-color-scheme="light"]) .compose-cw input::placeholder {
-    color: #9b8e80;
-  }
-
-  :root:not([data-color-scheme="light"]) button,
-  body:not([data-color-scheme="light"]) button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-danger-button,
-  body:not([data-color-scheme="light"]) .settings-danger-button {
-    background: #b5463b;
-    color: #fff6f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button {
-    background: #8f2f2f;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .settings-danger-button {
-    background: #a54343;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-danger-button {
-    background: #d97183;
-    color: #fff4f6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-danger-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-danger-button {
-    background: #d32f2f;
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) button.is-active,
-  body:not([data-color-scheme="light"]) button.is-active {
-    background: #8fa6cf;
-    color: #1d2638;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button.is-active {
-    background: #b07a3b;
-    color: #2b1a10;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button.is-active {
-    background: #f0a6c8;
-    color: #2a1620;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button.is-active,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button.is-active {
-    background: #bdbdbd;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"]) button.ghost,
-  body:not([data-color-scheme="light"]) button.ghost {
-    color: #8fa6cf;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] button.ghost {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] button.ghost,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] button.ghost {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .text-link,
-  body:not([data-color-scheme="light"]) .text-link {
-    color: #8fa6cf;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .text-link {
-    color: #cf8c8c;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .text-link {
-    color: #f0a6c8;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .text-link,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .text-link {
-    color: #f0f0f0;
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-add-button,
-  body:not([data-color-scheme="light"]) .account-add-button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-button {
-    background: #2e6b4f;
-    color: #f4fff7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-add-panel,
-  body:not([data-color-scheme="light"]) .account-add-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-add-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-add-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-add-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel,
-  body:not([data-color-scheme="light"]) .section-menu-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel button,
-  body:not([data-color-scheme="light"]) .section-menu-panel button {
-    background: none;
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"]) .section-menu-panel .danger,
-  body:not([data-color-scheme="light"]) .section-menu-panel .danger {
-    color: #e07a6d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel .danger,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel .danger {
-    color: #ff8a8a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .section-menu-panel button {
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .section-menu-panel button {
-    color: #eff1f7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .section-menu-panel button {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-list button,
-  body:not([data-color-scheme="light"]) .account-list button {
-    background: none;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-list button:not(.ghost),
-  body:not([data-color-scheme="light"]) .account-list button:not(.ghost) {
-    color: inherit;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-summary,
-  body:not([data-color-scheme="light"]) .account-selector-summary {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-dropdown,
-  body:not([data-color-scheme="light"]) .account-selector-dropdown {
-    background: rgba(23, 21, 18, 0.88);
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"]) .account-selector-placeholder,
-  body:not([data-color-scheme="light"]) .account-selector-placeholder,
-  :root:not([data-color-scheme="light"]) .account-selector-caret,
-  body:not([data-color-scheme="light"]) .account-selector-caret {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-handle,
-  body:not([data-color-scheme="light"]) .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-summary {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-dropdown {
-    background: rgba(26, 16, 15, 0.88);
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-summary {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-dropdown {
-    background: rgba(24, 30, 42, 0.9);
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown {
-    background: rgba(16, 16, 16, 0.88);
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-selector-caret {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-selector-caret {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary .account-text,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-summary .account-text,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown .account-text,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-dropdown .account-text {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-placeholder,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-placeholder,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-caret,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-selector-caret {
-    color: #cfcfcf;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .account-handle {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .account-handle {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-description,
-  body:not([data-color-scheme="light"]) .sidebar-description,
-  :root:not([data-color-scheme="light"]) .oss-list,
-  body:not([data-color-scheme="light"]) .oss-list {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .brand-text p,
-  body:not([data-color-scheme="light"]) .brand-text p {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-description a,
-  body:not([data-color-scheme="light"]) .sidebar-description a {
-    color: #8fa6cf;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-links a,
-  body:not([data-color-scheme="light"]) .sidebar-links a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .oss-list,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .oss-list {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .brand-text p,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .brand-text p {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .brand-text p,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .brand-text p {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .oss-list,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .oss-list {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-description a,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .sidebar-links a {
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-links a {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-description a {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-links a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-links a {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"]) .sidebar-divider,
-  body:not([data-color-scheme="light"]) .sidebar-divider {
-    background: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-divider,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .sidebar-divider {
-    background: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-divider,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .sidebar-divider {
-    background: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-item,
-  body:not([data-color-scheme="light"]) .settings-item {
-    border-top: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-item p,
-  body:not([data-color-scheme="light"]) .settings-item p {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .settings-item {
-    border-top: 1px solid #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item {
-    border-top: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item p,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .settings-item p {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item p,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .settings-item p {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .settings-modal-backdrop,
-  body:not([data-color-scheme="light"]) .settings-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-backdrop,
-  body:not([data-color-scheme="light"]) .status-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-content,
-  body:not([data-color-scheme="light"]) .status-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-header,
-  body:not([data-color-scheme="light"]) .status-modal-header {
-    border-bottom: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-modal-title,
-  body:not([data-color-scheme="light"]) .status-modal-title {
-    color: #f0e7dc;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"]) .back-link,
-  body:not([data-color-scheme="light"]) .back-link {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .boosted-by,
-  body:not([data-color-scheme="light"]) .boosted-by,
-  :root:not([data-color-scheme="light"]) .notification-actor,
-  body:not([data-color-scheme="light"]) .notification-actor {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .notification-actor {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-backdrop {
-    background: rgba(32, 16, 15, 0.45);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-content {
-    background: #201412;
-    border: 1px solid #4a2f2c;
-    box-shadow: 0 20px 60px rgba(64, 20, 20, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-header {
-    border-bottom: 1px solid #4a2f2c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-modal-title {
-    color: #f7e7df;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .notification-actor {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-backdrop {
-    background: rgba(29, 51, 74, 0.7);
-  }
-
-:root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-content {
-    background: #1a202d;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 20px 60px rgba(12, 18, 28, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-header {
-    border-bottom: 1px solid #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-modal-title {
-    color: #eff1f7;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .boosted-by,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .notification-actor,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .notification-actor {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-backdrop {
-    background: rgba(10, 10, 10, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-content {
-    background: #121212;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-header {
-    border-bottom: 1px solid #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-modal-title {
-    color: #f5f5f5;
-  }
-
-  
-
-  :root:not([data-color-scheme="light"]) .reply-info,
-  body:not([data-color-scheme="light"]) .reply-info {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .reply-info {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .reply-info {
-    color: #f0a6c8;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .reply-info,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .reply-info {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-reaction,
-  body:not([data-color-scheme="light"]) .status-reaction {
-    color: #e9dfd2;
-    border-color: #5a4f45;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction {
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction {
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction {
-    color: #d6d6d6;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-reaction.is-active,
-  body:not([data-color-scheme="light"]) .status-reaction.is-active {
-    background: #2c2722;
-    border-color: #6f5c47;
-    color: #fff7ec;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-reaction.is-active {
-    background: #2a1b19;
-    border-color: #3b2624;
-    color: #fff1f1;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-reaction.is-active {
-    background: #212a3a;
-    border-color: #2e3b50;
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction.is-active,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-reaction.is-active {
-    background: #1a1a1a;
-    border-color: #4a4a4a;
-    color: #f5f5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-header,
-  body:not([data-color-scheme="light"]) .status-header {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-handle,
-  body:not([data-color-scheme="light"]) .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .account-handle {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-avatar,
-  body:not([data-color-scheme="light"]) .account-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-avatar,
-  body:not([data-color-scheme="light"]) .status-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .account-avatar-fallback,
-  body:not([data-color-scheme="light"]) .account-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-avatar-fallback,
-  body:not([data-color-scheme="light"]) .status-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root:not([data-color-scheme="light"]) .attachment-thumb,
-  body:not([data-color-scheme="light"]) .attachment-thumb {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root:not([data-color-scheme="light"]) .file-button,
-  body:not([data-color-scheme="light"]) .file-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-icon-button,
-  body:not([data-color-scheme="light"]) .compose-icon-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .file-button {
-    background: #2a1b19;
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-icon-button {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .file-button {
-    background: #223047;
-    color: #d7e7fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-icon-button {
-    background: #223047;
-    color: #d7e7fb;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .file-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .file-button,
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-icon-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-icon-button {
-    background: #2a2a2a;
-    color: #f0f0f0;
-    border-color: #4a4a4a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-panel,
-  body:not([data-color-scheme="light"]) .compose-emoji-panel {
-    background: #1b1916;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-panel {
-    background: #201412;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-panel {
-    background: #181e2a;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-panel,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-panel {
-    background: #101010;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"]) .compose-emoji-category-toggle {
-    background: #2a2622;
-    color: #f0e7dc;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-category-toggle {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-category-toggle {
-    background: #223047;
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-category-toggle,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-category-toggle {
-    background: #1a1a1a;
-    color: #f5f5f5;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-count,
-  body:not([data-color-scheme="light"]) .compose-emoji-count {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-count {
-    background: #3b2624;
-    color: #f7e7df;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-count {
-    background: #344760;
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-count,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-count {
-    background: #2a2a2a;
-    color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-button,
-  body:not([data-color-scheme="light"]) .compose-emoji-button {
-    background: #221f1b;
-    border-color: #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-button {
-    background: #1a100f;
-    border-color: #3b2624;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-button {
-    background: #223047;
-    border-color: #2e3b50;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-button {
-    background: #1a1a1a;
-    border-color: #3a3a3a;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-emoji-empty,
-  body:not([data-color-scheme="light"]) .compose-emoji-empty {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-emoji-empty {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-emoji-empty {
-    color: #b7c2d2;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-empty,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-emoji-empty {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-backdrop,
-  body:not([data-color-scheme="light"]) .compose-busy-backdrop {
-    background: rgba(8, 7, 6, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-content,
-  body:not([data-color-scheme="light"]) .compose-busy-content {
-    background: #1b1916;
-    border-color: #3b342d;
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-busy-spinner,
-  body:not([data-color-scheme="light"]) .compose-busy-spinner {
-    border-color: #3b342d;
-    border-top-color: #e1e7f4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-backdrop {
-    background: rgba(32, 16, 15, 0.5);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-content {
-    background: #201412;
-    border-color: #3b2624;
-    color: #e4b9b9;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-busy-spinner {
-    border-color: #3b2624;
-    border-top-color: #e4b46b;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-backdrop {
-    background: rgba(24, 30, 42, 0.55);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-content {
-    background: #181e2a;
-    border-color: #2e3b50;
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-busy-spinner {
-    border-color: #2e3b50;
-    border-top-color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-backdrop,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-backdrop {
-    background: rgba(0, 0, 0, 0.55);
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-content,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-content {
-    background: #101010;
-    border-color: #3a3a3a;
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-spinner,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-busy-spinner {
-    border-color: #3a3a3a;
-    border-top-color: #f0f0f0;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview,
-  body:not([data-color-scheme="light"]) .link-preview {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview {
-    border: 1px solid #3b2624;
-    background: #1a100f;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview {
-    border: 1px solid #2e3b50;
-    background: #181e2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview {
-    border: 1px solid #3a3a3a;
-    background: #101010;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-body,
-  body:not([data-color-scheme="light"]) .link-preview-body {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body {
-    color: #e4b9b9;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body {
-    color: #d6d6d6;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-body strong,
-  body:not([data-color-scheme="light"]) .link-preview-body strong {
-    color: #f0e7dc;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-body strong {
-    color: #f4d7d7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-body strong {
-    color: #f2f5fb;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body strong,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-body strong {
-    color: #f5f5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .link-preview-url,
-  body:not([data-color-scheme="light"]) .link-preview-url {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .link-preview-url {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .link-preview-url {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-url,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .link-preview-url {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text,
-  body:not([data-color-scheme="light"]) .readme-text {
-    color: #c4b6a6;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text a,
-  body:not([data-color-scheme="light"]) .readme-text a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-text code,
-  body:not([data-color-scheme="light"]) .readme-text code,
-  :root:not([data-color-scheme="light"]) .readme-text pre,
-  body:not([data-color-scheme="light"]) .readme-text pre {
-    background: #221f1b;
-  }
-
-  :root:not([data-color-scheme="light"]) .readme-image-row img,
-  body:not([data-color-scheme="light"]) .readme-image-row img {
-    border-color: #2f2a25;
-    background: #221f1b;
-  }
-
-  :root:not([data-color-scheme="light"]) .status-text a,
-  body:not([data-color-scheme="light"]) .status-text a {
-    color: #d7cbbd;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .status-text a {
-    color: #9cc7ab;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .status-text a {
-    color: #9dbef4;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .status-text a,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .status-text a {
-    color: #bdbdbd;
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-backdrop,
-  body:not([data-color-scheme="light"]) .image-modal-backdrop {
-    background: rgba(8, 7, 6, 0.8);
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-content img,
-  body:not([data-color-scheme="light"]) .image-modal-content img {
-    border: 1px solid #2f2923;
-    background: #0b0a09;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-modal-content,
-  body:not([data-color-scheme="light"]) .confirm-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-actions .delete-button,
-  body:not([data-color-scheme="light"]) .confirm-actions .delete-button {
-    color: #fffaf2;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .confirm-actions .delete-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .confirm-actions .delete-button {
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .confirm-status,
-  body:not([data-color-scheme="light"]) .confirm-status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root:not([data-color-scheme="light"]) .image-modal-delete,
-  body:not([data-color-scheme="light"]) .image-modal-delete {
-    background: #7a3a2a;
-    color: #f5efe7;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .image-modal-delete,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .image-modal-delete {
-    background: #c62828;
-    color: #fff5f5;
-  }
-
-  :root:not([data-color-scheme="light"]) .delete-button,
-  body:not([data-color-scheme="light"]) .delete-button {
-    background: #7a3a2a;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .delete-button,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .delete-button {
-    background: #c62828;
-  }
-
-  :root:not([data-color-scheme="light"]) .license,
-  body:not([data-color-scheme="light"]) .license {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-    color: #f0e7dc;
-  }
-}
-
-:root[data-color-scheme="dark"] {
-  background: radial-gradient(circle at top left, #1d1b18, #12110f 55%, #0d0c0b);
-  color: #f0e7dc;
-  --scrollbar-thumb: var(--scrollbar-thumb-dark);
-  --notification-badge-ring: #1b1916;
-}
-
-:root[data-color-scheme="dark"][data-theme="christmas"],
-body[data-color-scheme="dark"][data-theme="christmas"] {
-  background: radial-gradient(circle at top left, #2a1716, #1d1110 55%, #120b0a);
-  color: #f7e7df;
-  --notification-badge-ring: #201412;
-}
-
-:root[data-color-scheme="dark"][data-theme="sky-pink"],
-body[data-color-scheme="dark"][data-theme="sky-pink"] {
-  background: radial-gradient(circle at top left, #1b2330, #191a26 55%, #101218);
-  color: #eff1f7;
-  --scrollbar-thumb: #5f6875;
-  --notification-badge-ring: #1a202d;
-}
-
-:root[data-color-scheme="dark"][data-theme="monochrome"],
-body[data-color-scheme="dark"][data-theme="monochrome"] {
-  background: radial-gradient(circle at top left, #0f0f0f, #080808 55%, #030303);
-  color: #f5f5f5;
-  --scrollbar-thumb: #616161;
-  --notification-badge-ring: #121212;
-}
-
-  :root[data-color-scheme="dark"] .overlay-backdrop,
-  body[data-color-scheme="dark"] .overlay-backdrop {
-    background: rgba(15, 13, 11, 0.4);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .overlay-backdrop {
-    background: rgba(32, 16, 15, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .overlay-backdrop {
-    background: rgba(88, 102, 138, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .overlay-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .overlay-backdrop {
-    background: rgba(0, 0, 0, 0.5);
-  }
-
-  :root[data-color-scheme="dark"] .panel,
-  body[data-color-scheme="dark"] .panel {
-    background: #1b1916cc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .panel {
-    background: #201412cc;
-    border: 1px solid #4a2f2c;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .panel {
-    background: #1a202dcc;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .panel {
-    background: #121212cc;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .timeline-column,
-  body[data-color-scheme="dark"] .timeline-column {
-    background: #171512;
-    border: 1px solid #302822;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="christmas"] .timeline-column {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(64, 20, 20, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .timeline-column {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(12, 18, 28, 0.35);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .timeline-column,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .timeline-column {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 24px rgba(0, 0, 0, 0.35);
-  }
-
-  :root[data-color-scheme="dark"] .app-header p,
-  body[data-color-scheme="dark"] .app-header p,
-  :root[data-color-scheme="dark"] .status header,
-  body[data-color-scheme="dark"] .status header,
-  :root[data-color-scheme="dark"] .account-list .ghost,
-  body[data-color-scheme="dark"] .account-list .ghost,
-  :root[data-color-scheme="dark"] .attachments a,
-  body[data-color-scheme="dark"] .attachments a,
-  :root[data-color-scheme="dark"] .empty,
-  body[data-color-scheme="dark"] .empty,
-  :root[data-color-scheme="dark"] .hint,
-  body[data-color-scheme="dark"] .hint {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .app-header p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .app-header p,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-list .ghost,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-list .ghost,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .attachments a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .attachments a,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .empty,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .empty,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .hint,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .hint {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .status,
-  body[data-color-scheme="dark"] .status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header {
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header strong {
-    color: #f4d7d7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status header span,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .time-link,
-  body[data-color-scheme="dark"][data-theme="christmas"] .time-link {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header strong {
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status header span,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .time-link,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .time-link {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header strong,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header strong {
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status header span,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status header span,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .time-link,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .time-link {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-time,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-time {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-time,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-time {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-time,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-time {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-warning {
-    background: #2a1b19;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning {
-    background: #1e1a24;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-warning-text {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-warning-text {
-    color: #d9a3bd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-warning,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-warning {
-    background: #181818;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-warning-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-warning-text {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .status p,
-  body[data-color-scheme="dark"] .status p {
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"] .status-time,
-  body[data-color-scheme="dark"] .status-time {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .status-warning,
-  body[data-color-scheme="dark"] .status-warning {
-    background: #2a241f;
-  }
-
-  :root[data-color-scheme="dark"] .status-warning-text,
-  body[data-color-scheme="dark"] .status-warning-text {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .replying,
-  body[data-color-scheme="dark"] .replying {
-    background: #2a241f;
-  }
-
-  :root[data-color-scheme="dark"] .account-form input,
-  body[data-color-scheme="dark"] .account-form input,
-  :root[data-color-scheme="dark"] .compose-form textarea,
-  body[data-color-scheme="dark"] .compose-form textarea,
-  :root[data-color-scheme="dark"] .compose-cw input,
-  body[data-color-scheme="dark"] .compose-cw input,
-  :root[data-color-scheme="dark"] .compose-actions select,
-  body[data-color-scheme="dark"] .compose-actions select,
-  :root[data-color-scheme="dark"] .settings-item select,
-  body[data-color-scheme="dark"] .settings-item select {
-    background: #151310;
-    border: 1px solid #3a312a;
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"] .compose-input-container,
-  body[data-color-scheme="dark"] .compose-input-container {
-    background: #151310;
-    border: 1px solid #3a312a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-input-container textarea,
-  body[data-color-scheme="dark"] .compose-input-container textarea {
-    color: #f0e7dc !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-color-scheme="dark"] .compose-attachments,
-  body[data-color-scheme="dark"] .compose-attachments {
-    background: #1a1814;
-    border-top: 1px solid #3a312a;
-  }
-
-  :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="christmas"] .compose-input-container,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container textarea,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-input-container textarea {
-    color: #f7e7df !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-attachments,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-attachments {
-    background: #2a1b19;
-    border-top: 1px solid #3b2624;
-  }
-
-  :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="sky-pink"] .compose-input-container,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container textarea,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-input-container textarea {
-    color: #eff1f7 !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-attachments,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-attachments {
-    background: #212a3a;
-    border-top: 1px solid #2e3b50;
-  }
-
-  :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"] .compose-input-container,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container textarea,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-input-container textarea {
-    color: #f0f0f0 !important;
-    border: none !important;
-    outline: none !important;
-    box-shadow: none !important;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-attachments,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-attachments {
-    background: #181818;
-    border-top: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-form input::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-cw input::placeholder {
-    color: #8a8a8a;
-  }
-
-  :root[data-color-scheme="dark"] .account-form-divider,
-  body[data-color-scheme="dark"] .account-form-divider {
-    border-top: 1px dashed #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-form input::placeholder,
-  body[data-color-scheme="dark"] .account-form input::placeholder,
-  :root[data-color-scheme="dark"] .compose-form textarea::placeholder,
-  body[data-color-scheme="dark"] .compose-form textarea::placeholder,
-  :root[data-color-scheme="dark"] .compose-cw input::placeholder,
-  body[data-color-scheme="dark"] .compose-cw input::placeholder {
-    color: #9b8e80;
-  }
-
-  :root[data-color-scheme="dark"] button,
-  body[data-color-scheme="dark"] button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root[data-color-scheme="dark"] .settings-danger-button,
-  body[data-color-scheme="dark"] .settings-danger-button {
-    background: #b5463b;
-    color: #fff6f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button,
-  body[data-color-scheme="dark"][data-theme="christmas"] button {
-    background: #8f2f2f;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .settings-danger-button {
-    background: #a54343;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-danger-button {
-    background: #d97183;
-    color: #fff4f6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .settings-danger-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .settings-danger-button {
-    background: #d32f2f;
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] button.is-active,
-  body[data-color-scheme="dark"] button.is-active {
-    background: #8fa6cf;
-    color: #1d2638;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="christmas"] button.is-active {
-    background: #b07a3b;
-    color: #2b1a10;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button.is-active {
-    background: #f0a6c8;
-    color: #2a1620;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button.is-active,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button.is-active {
-    background: #bdbdbd;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"] button.ghost,
-  body[data-color-scheme="dark"] button.ghost {
-    color: #8fa6cf;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="christmas"] button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-list button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-list button {
-    background: none;
-    color: inherit;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-list button.ghost,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-list button.ghost {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] button.ghost {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] button.ghost,
-  body[data-color-scheme="dark"][data-theme="monochrome"] button.ghost {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .text-link,
-  body[data-color-scheme="dark"] .text-link {
-    color: #8fa6cf;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .text-link,
-  body[data-color-scheme="dark"][data-theme="christmas"] .text-link {
-    color: #cf8c8c;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .text-link,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .text-link {
-    color: #f0a6c8;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .text-link,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .text-link {
-    color: #f0f0f0;
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"] .account-add-button,
-  body[data-color-scheme="dark"] .account-add-button {
-    background: #4a6cb6;
-    color: #edf3ff;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-add-button {
-    background: #2e6b4f;
-    color: #f4fff7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-button {
-    background: #7db4f0;
-    color: #0f1c2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-add-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-add-button {
-    background: #e6e6e6;
-    color: #111111;
-  }
-
-  :root[data-color-scheme="dark"] .account-add-panel,
-  body[data-color-scheme="dark"] .account-add-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-add-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-add-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-add-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-add-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel,
-  body[data-color-scheme="dark"] .section-menu-panel {
-    background: rgba(23, 21, 18, 0.88);
-    color: #f0e7dc;
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel button,
-  body[data-color-scheme="dark"] .section-menu-panel button {
-    background: none;
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"] .section-menu-panel .danger,
-  body[data-color-scheme="dark"] .section-menu-panel .danger {
-    color: #e07a6d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel .danger,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel .danger {
-    color: #ff8a8a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel {
-    background: rgba(26, 16, 15, 0.88);
-    color: #f7e7df;
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .section-menu-panel button {
-    background: none;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel {
-    background: rgba(24, 30, 42, 0.9);
-    color: #eff1f7;
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .section-menu-panel button {
-    color: #eff1f7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel {
-    background: rgba(16, 16, 16, 0.88);
-    color: #f0f0f0;
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .section-menu-panel button {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .account-list button,
-  body[data-color-scheme="dark"] .account-list button {
-    background: none;
-  }
-
-  :root[data-color-scheme="dark"] .account-list button:not(.ghost),
-  body[data-color-scheme="dark"] .account-list button:not(.ghost) {
-    color: inherit;
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-summary,
-  body[data-color-scheme="dark"] .account-selector-summary {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-dropdown,
-  body[data-color-scheme="dark"] .account-selector-dropdown {
-    background: rgba(23, 21, 18, 0.88);
-    border: 1px solid #3b342d;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"] .account-selector-placeholder,
-  body[data-color-scheme="dark"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"] .account-selector-caret,
-  body[data-color-scheme="dark"] .account-selector-caret {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .account-handle,
-  body[data-color-scheme="dark"] .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-summary {
-    background: #1a100f;
-    border: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-dropdown {
-    background: rgba(26, 16, 15, 0.88);
-    border: 1px solid #3b2624;
-    box-shadow: 0 18px 40px rgba(64, 20, 20, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-summary {
-    background: #181e2a;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-dropdown {
-    background: rgba(24, 30, 42, 0.9);
-    border: 1px solid #2e3b50;
-    box-shadow: 0 18px 40px rgba(12, 18, 28, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary {
-    background: #101010;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown {
-    background: rgba(16, 16, 16, 0.88);
-    border: 1px solid #3a3a3a;
-    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-handle {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-handle {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-handle {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="christmas"] .account-selector-caret {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .account-selector-caret {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary .account-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-summary .account-text,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown .account-text,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-dropdown .account-text {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-placeholder,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-placeholder,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-caret,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-selector-caret {
-    color: #cfcfcf;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-description,
-  body[data-color-scheme="dark"] .sidebar-description,
-  :root[data-color-scheme="dark"] .oss-list,
-  body[data-color-scheme="dark"] .oss-list {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .brand-text p,
-  body[data-color-scheme="dark"] .brand-text p {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-description a,
-  body[data-color-scheme="dark"] .sidebar-description a {
-    color: #8fa6cf;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-links a,
-  body[data-color-scheme="dark"] .sidebar-links a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .oss-list,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .oss-list {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .brand-text p,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .brand-text p {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .brand-text p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .brand-text p {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .oss-list,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .oss-list {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-description a,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .sidebar-links a {
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="christmas"] .sidebar-links a {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description a,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-description a {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-links a,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-links a {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"] .sidebar-divider,
-  body[data-color-scheme="dark"] .sidebar-divider {
-    background: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .sidebar-divider,
-  body[data-color-scheme="dark"][data-theme="christmas"] .sidebar-divider {
-    background: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-divider,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .sidebar-divider {
-    background: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"] .settings-item,
-  body[data-color-scheme="dark"] .settings-item {
-    border-top: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .settings-item p,
-  body[data-color-scheme="dark"] .settings-item p {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .settings-item,
-  body[data-color-scheme="dark"][data-theme="christmas"] .settings-item {
-    border-top: 1px solid #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item {
-    border-top: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item p,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .settings-item p {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .settings-item p,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .settings-item p {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .settings-modal-backdrop,
-  body[data-color-scheme="dark"] .settings-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-backdrop,
-  body[data-color-scheme="dark"] .status-modal-backdrop {
-    background: rgba(8, 7, 6, 0.7);
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-content,
-  body[data-color-scheme="dark"] .status-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-header,
-  body[data-color-scheme="dark"] .status-modal-header {
-    border-bottom: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-modal-title,
-  body[data-color-scheme="dark"] .status-modal-title {
-    color: #f0e7dc;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"] .back-link,
-  body[data-color-scheme="dark"] .back-link {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .boosted-by,
-  body[data-color-scheme="dark"] .boosted-by,
-  :root[data-color-scheme="dark"] .notification-actor,
-  body[data-color-scheme="dark"] .notification-actor {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="christmas"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="christmas"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="christmas"] .notification-actor {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-backdrop {
-    background: rgba(32, 16, 15, 0.7);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-content {
-    background: #201412;
-    border: 1px solid #4a2f2c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-header {
-    border-bottom: 1px solid #4a2f2c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-modal-title {
-    color: #f7e7df;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .notification-actor {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-backdrop {
-    background: rgba(29, 51, 74, 0.7);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-content {
-    background: #1a202d;
-    border: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-header {
-    border-bottom: 1px solid #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-modal-title {
-    color: #eff1f7;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .boosted-by,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .notification-actor,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .notification-actor {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-backdrop {
-    background: rgba(10, 10, 10, 0.5);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-content {
-    background: #121212;
-    border: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-header {
-    border-bottom: 1px solid #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-modal-title {
-    color: #f5f5f5;
-  }
-
-  
-
-  
-
-  :root[data-color-scheme="dark"] .reply-info,
-  body[data-color-scheme="dark"] .reply-info {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="christmas"] .reply-info {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .reply-info {
-    color: #f0a6c8;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .reply-info,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .reply-info {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .status-reaction,
-  body[data-color-scheme="dark"] .status-reaction {
-    color: #e9dfd2;
-    border-color: #5a4f45;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-reaction {
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction {
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction {
-    color: #d6d6d6;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .status-reaction.is-active,
-  body[data-color-scheme="dark"] .status-reaction.is-active {
-    background: #2c2722;
-    border-color: #6f5c47;
-    color: #fff7ec;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="christmas"] .status-reaction.is-active {
-    background: #2a1b19;
-    border-color: #3b2624;
-    color: #fff1f1;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .status-reaction.is-active {
-    background: #212a3a;
-    border-color: #2e3b50;
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction.is-active,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .status-reaction.is-active {
-    background: #1a1a1a;
-    border-color: #4a4a4a;
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"] .status-header,
-  body[data-color-scheme="dark"] .status-header {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .account-handle,
-  body[data-color-scheme="dark"] .account-handle {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .account-handle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .account-handle {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .account-avatar,
-  body[data-color-scheme="dark"] .account-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .status-avatar,
-  body[data-color-scheme="dark"] .status-avatar {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .account-avatar-fallback,
-  body[data-color-scheme="dark"] .account-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root[data-color-scheme="dark"] .status-avatar-fallback,
-  body[data-color-scheme="dark"] .status-avatar-fallback {
-    background: #6c5c4b;
-  }
-
-  :root[data-color-scheme="dark"] .attachment-thumb,
-  body[data-color-scheme="dark"] .attachment-thumb {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root[data-color-scheme="dark"] .file-button,
-  body[data-color-scheme="dark"] .file-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"] .compose-icon-button,
-  body[data-color-scheme="dark"] .compose-icon-button {
-    background: #2c3b59;
-    color: #e1e7f4;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .file-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .file-button {
-    background: #2a1b19;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-icon-button {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .file-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .file-button {
-    background: #223047;
-    color: #d7e7fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-icon-button {
-    background: #223047;
-    color: #d7e7fb;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .file-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .file-button,
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-icon-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-icon-button {
-    background: #2a2a2a;
-    color: #f0f0f0;
-    border-color: #4a4a4a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-panel,
-  body[data-color-scheme="dark"] .compose-emoji-panel {
-    background: #1b1916;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-panel {
-    background: #201412;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-panel {
-    background: #181e2a;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-panel,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-panel {
-    background: #101010;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"] .compose-emoji-category-toggle {
-    background: #2a2622;
-    color: #f0e7dc;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-category-toggle {
-    background: #2a1b19;
-    color: #f7e7df;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-category-toggle {
-    background: #223047;
-    color: #eff1f7;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-category-toggle,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-category-toggle {
-    background: #1a1a1a;
-    color: #f5f5f5;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-count,
-  body[data-color-scheme="dark"] .compose-emoji-count {
-    background: #2c3b59;
-    color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-count {
-    background: #3b2624;
-    color: #f7e7df;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-count {
-    background: #344760;
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-count,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-count {
-    background: #2a2a2a;
-    color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-button,
-  body[data-color-scheme="dark"] .compose-emoji-button {
-    background: #221f1b;
-    border-color: #3b342d;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-button {
-    background: #1a100f;
-    border-color: #3b2624;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-button {
-    background: #223047;
-    border-color: #2e3b50;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-button {
-    background: #1a1a1a;
-    border-color: #3a3a3a;
-  }
-
-  :root[data-color-scheme="dark"] .compose-emoji-empty,
-  body[data-color-scheme="dark"] .compose-emoji-empty {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-emoji-empty {
-    color: #cf8c8c;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-emoji-empty {
-    color: #b7c2d2;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-empty,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-emoji-empty {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"] .compose-busy-backdrop {
-    background: rgba(8, 7, 6, 0.6);
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-content,
-  body[data-color-scheme="dark"] .compose-busy-content {
-    background: #1b1916;
-    border-color: #3b342d;
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .compose-busy-spinner,
-  body[data-color-scheme="dark"] .compose-busy-spinner {
-    border-color: #3b342d;
-    border-top-color: #e1e7f4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-backdrop {
-    background: rgba(32, 16, 15, 0.6);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-content {
-    background: #201412;
-    border-color: #3b2624;
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="christmas"] .compose-busy-spinner {
-    border-color: #3b2624;
-    border-top-color: #e4b46b;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-backdrop {
-    background: rgba(24, 30, 42, 0.6);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-content {
-    background: #181e2a;
-    border-color: #2e3b50;
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .compose-busy-spinner {
-    border-color: #2e3b50;
-    border-top-color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-backdrop,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-backdrop {
-    background: rgba(0, 0, 0, 0.65);
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-content,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-content {
-    background: #101010;
-    border-color: #3a3a3a;
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-spinner,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .compose-busy-spinner {
-    border-color: #3a3a3a;
-    border-top-color: #f0f0f0;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview,
-  body[data-color-scheme="dark"] .link-preview {
-    border: 1px solid #3b342d;
-    background: #171512;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview {
-    border: 1px solid #3b2624;
-    background: #1a100f;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview {
-    border: 1px solid #2e3b50;
-    background: #181e2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview {
-    border: 1px solid #3a3a3a;
-    background: #101010;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-body,
-  body[data-color-scheme="dark"] .link-preview-body {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body {
-    color: #e4b9b9;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body {
-    color: #d7ddea;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body {
-    color: #d6d6d6;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-body strong,
-  body[data-color-scheme="dark"] .link-preview-body strong {
-    color: #f0e7dc;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-body strong {
-    color: #f4d7d7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-body strong {
-    color: #f2f5fb;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body strong,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-body strong {
-    color: #f5f5f5;
-  }
-
-  :root[data-color-scheme="dark"] .link-preview-url,
-  body[data-color-scheme="dark"] .link-preview-url {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="christmas"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="christmas"] .link-preview-url {
-    color: #9cc7ab;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="sky-pink"] .link-preview-url {
-    color: #9dbef4;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-url,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .link-preview-url {
-    color: #bdbdbd;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text,
-  body[data-color-scheme="dark"] .readme-text {
-    color: #c4b6a6;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text a,
-  body[data-color-scheme="dark"] .readme-text a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .readme-text code,
-  body[data-color-scheme="dark"] .readme-text code,
-  :root[data-color-scheme="dark"] .readme-text pre,
-  body[data-color-scheme="dark"] .readme-text pre {
-    background: #221f1b;
-  }
-
-  :root[data-color-scheme="dark"] .status-text a,
-  body[data-color-scheme="dark"] .status-text a {
-    color: #d7cbbd;
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-backdrop,
-  body[data-color-scheme="dark"] .image-modal-backdrop {
-    background: rgba(8, 7, 6, 0.8);
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-content img,
-  body[data-color-scheme="dark"] .image-modal-content img {
-    border: 1px solid #2f2923;
-    background: #0b0a09;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-modal-content,
-  body[data-color-scheme="dark"] .confirm-modal-content {
-    background: #171512;
-    border: 1px solid #3b342d;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-actions .delete-button,
-  body[data-color-scheme="dark"] .confirm-actions .delete-button {
-    color: #fffaf2;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .confirm-actions .delete-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .confirm-actions .delete-button {
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] .confirm-status,
-  body[data-color-scheme="dark"] .confirm-status {
-    background: #171512;
-    border: 1px solid #302822;
-  }
-
-  :root[data-color-scheme="dark"] .image-modal-delete,
-  body[data-color-scheme="dark"] .image-modal-delete {
-    background: #7a3a2a;
-    color: #f5efe7;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .image-modal-delete,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .image-modal-delete {
-    background: #c62828;
-    color: #fff5f5;
-  }
-
-  :root[data-color-scheme="dark"] .delete-button,
-  body[data-color-scheme="dark"] .delete-button {
-    background: #7a3a2a;
-  }
-
-  :root[data-color-scheme="dark"][data-theme="monochrome"] .delete-button,
-  body[data-color-scheme="dark"][data-theme="monochrome"] .delete-button {
-    background: #c62828;
-  }
-
-  :root[data-color-scheme="dark"] .license,
-  body[data-color-scheme="dark"] .license {
-    background: #221f1b;
-    border: 1px solid #3b342d;
-    color: #f0e7dc;
-  }
-
-  /* Character count dark theme styles */
-  :root:not([data-color-scheme="light"]) .compose-character-count-normal,
-  body:not([data-color-scheme="light"]) .compose-character-count-normal {
-    color: #9ca3af;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-character-count-warning,
-  body:not([data-color-scheme="light"]) .compose-character-count-warning {
-    color: #fbbf24;
-  }
-
-  :root:not([data-color-scheme="light"]) .compose-character-count-limit,
-  body:not([data-color-scheme="light"]) .compose-character-count-limit {
-    color: #f87171;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="christmas"] .compose-character-count-normal,
-  body:not([data-color-scheme="light"])[data-theme="christmas"] .compose-character-count-normal {
-    color: #cf8c8c;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-character-count-normal,
-  body:not([data-color-scheme="light"])[data-theme="sky-pink"] .compose-character-count-normal {
-    color: #d7ddea;
-  }
-
-  :root:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-character-count-normal,
-  body:not([data-color-scheme="light"])[data-theme="monochrome"] .compose-character-count-normal {
-    color: #d6d6d6;
-  }
+@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;
+}

From 757bf71cdf1722f3b73ef49c718539ee7c3d8937 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 8 Jan 2026 14:44:27 +0900
Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=ED=8C=9D=EC=97=85=EC=97=90=20=EC=9D=B4=EC=A0=84/=EB=8B=A4?=
 =?UTF-8?q?=EC=9D=8C=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 이미지 2개 이상일 때 좌우 화살표 버튼 표시
- 키보드 네비게이션 지원 (← → 화살표, ESC 닫기)
- 현재 이미지 위치 카운터 표시 (1 / 3)
- 순환 네비게이션 (마지막에서 다음 → 첫 번째)

Closes #95

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/ui/components/TimelineItem.tsx | 81 +++++++++++++++++++++++++++---
 src/ui/styles/components.css       | 43 ++++++++++++++++
 2 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index 02631a2..dd9134a 100644
--- a/src/ui/components/TimelineItem.tsx
+++ b/src/ui/components/TimelineItem.tsx
@@ -37,7 +37,7 @@ 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 });
@@ -52,6 +52,44 @@ export const TimelineItem = ({
   );
   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) {
@@ -770,7 +808,7 @@ export const TimelineItem = ({
               </>
             ) : null}
             {showContent
-              ? attachments.map((item) => (
+              ? attachments.map((item, index) => (
                   <button
                     key={item.id}
                     type="button"
@@ -778,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}` : "이미지 보기"}
                   >
@@ -851,27 +889,51 @@ export const TimelineItem = ({
               return;
             }
             if (!event.target.closest(".image-modal-content")) {
-              setActiveImageUrl(null);
+              setActiveImageIndex(null);
             }
           }}
         >
-          <div className="image-modal-backdrop" onClick={() => setActiveImageUrl(null)} />
+          <div className="image-modal-backdrop" onClick={() => setActiveImageIndex(null)} />
           <div
             className="image-modal-content"
             ref={imageContainerRef}
             onClick={(event) => {
               if (event.target === event.currentTarget) {
-                setActiveImageUrl(null);
+                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="첨부 이미지 원본"
@@ -911,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/components.css b/src/ui/styles/components.css
index 87d13a3..9f19f18 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1529,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;