/* =================================================================
   ANISOTA THEME SYSTEM - CSS VARIABLES
   ================================================================= */

/* These CSS variables are automatically set by the theme system in theme.js
   DO NOT modify these values directly - they are overridden by JavaScript */

:root {
  /* =================================================================
     BASE COLORS
     ================================================================= */
  --color-background: #000000;
  --color-background-secondary: #0a0a0a;
  --color-background-tertiary: #111111;
  
  /* =================================================================
     CARD COLORS
     ================================================================= */
  --color-card-background: #1a1a1a;
  --color-card-background-hover: #222222;
  --color-card-background-active: #2a2a2a;
  --color-modal-background: rgba(26, 26, 26, 0.65);
  
  /* =================================================================
     TEXT COLORS
     ================================================================= */
  --color-text: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-muted: #888888;
  --color-text-bright: #ffffff;
  --color-text-inverse: #000000;
  
  /* =================================================================
     BORDER COLORS
     ================================================================= */
  --color-border: #333333;
  --color-border-light: #444444;
  --color-border-dark: #222222;
  --color-border-focus: #555555;
  
  /* =================================================================
     BUTTON COLORS
     ================================================================= */
  --color-button-background: #333333;
  --color-button-text: #ffffff;
  --color-button-hover: #444444;
  --color-button-active: #555555;
  --color-button-disabled: rgba(51, 51, 51, 0.3);
  
  /* =================================================================
     INPUT COLORS
     ================================================================= */
  --color-input-background: #222222;
  --color-input-text: #ffffff;
  --color-input-border: #333333;
  --color-input-focus: #555555;
  --color-input-placeholder: #666666;
  
  /* =================================================================
     LINK COLORS
     ================================================================= */
  --color-link: #4A9EFF;
  --color-link-hover: #6BB6FF;
  --color-link-visited: #4A9EFF;
  
  /* =================================================================
     STATUS COLORS
     ================================================================= */
  --color-success: #4CAF50;
  --color-error: #ff4444;
  --color-warning: #ff9800;
  --color-warning-background: #fff8e1;
  --color-warning-text: #f57c00;
  --color-warning-border: #ffa500;
  --color-warning-border-light: #ffb74d;
  --color-warning-hover: #ffecb3;
  --color-warning-active: #ffe082;
  --color-info: #2196F3;
  
  /* =================================================================
     ACCENT COLORS
     ================================================================= */
  --color-accent: #666666;
  --color-accent-hover: #777777;
  --color-accent-light: #999999;
  --color-accent-dark: #333333;
  
  /* =================================================================
     SPECIAL UI COLORS
     ================================================================= */
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.3);
  --color-overlay-dark: rgba(0, 0, 0, 0.8);
  
  /* =================================================================
     SHADOW COLORS
     ================================================================= */
  --color-shadow: rgba(0, 0, 0, 0.6);
  --color-shadow-light: rgba(0, 0, 0, 0.3);
  --color-shadow-dark: rgba(0, 0, 0, 0.8);
  
  /* =================================================================
     GRADIENT COLORS
     ================================================================= */
  --color-gradient-start: #000000;
  --color-gradient-end: rgba(0, 0, 0, 0.4);
  
  /* =================================================================
     NOTIFICATION COLORS
     ================================================================= */
  --color-notification-like: #ff44bf;
  --color-notification-repost: #22c55e;
  --color-notification-reply: #4a9eff;
  --color-notification-quote: #888888;
  --color-notification-mention: #ff9500;
  --color-notification-follow: #888888;
  
  /* =================================================================
     GLOW EFFECTS
     ================================================================= */
  --color-glow-like: rgba(255, 68, 191, 0.75);
  --color-glow-repost: rgba(34, 197, 94, 0.75);
  --color-glow-bluesky: rgba(74, 158, 255, 0.75);
  --color-glow-anisota: rgba(255, 149, 0, 0.75);
  --color-glow-both: linear-gradient(45deg, rgba(74, 158, 255, 0.75), rgba(255, 149, 0, 0.75));
  
  /* =================================================================
     HEADER/FOOTER GRADIENTS
     ================================================================= */
  --color-header-gradient: linear-gradient(to bottom, #000000 0%, rgb(0, 0, 0.3) 60%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
  --color-footer-gradient: linear-gradient(to top, #000000 0%, rgb(0, 0, 0.3) 60%, rgba(0, 0, 0, 0.2) 90%, rgba(0, 0, 0, 0.2) 70%, transparent 100%)
}

/* =================================================================
   THEME-AWARE STYLES - Uses CSS variables
   ================================================================= */

/* =================================================================
   BASE LAYOUT STYLES
   ================================================================= */

html {
  background: var(--color-background);
}

body {
  background: var(--color-background);
  color: var(--color-text);
}

#root {
  background: var(--color-background);
}

.warning {
  font-family: adobe-jenson-pro, serif;
}

/* =================================================================
   TYPOGRAPHY STYLES
   ================================================================= */

h1 {
  font-family: adobe-jenson-pro, serif;
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--color-text);
  text-align: center;
}

/* =================================================================
   CARD STYLES
   ================================================================= */

.post-card {
  background: var(--color-card-background);
  color: var(--color-text);
  border: 2px solid var(--color-border);
  box-shadow: 0 4px 24px var(--color-shadow);
}

.post-card:has(.card-inner) {
  background: transparent;
  border: none;
  box-shadow: none;
}

.card-front,
.card-back {
  background: var(--color-card-background);
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.post-card-header,
.post-card-body,
.post-card-footer {
  background: var(--color-card-background);
  color: var(--color-text);
  border-color: var(--color-border);
}

.login-section,
.login-card-header,
.login-card-body,
.login-card-footer {
  background: var(--color-card-background);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* =================================================================
   HEADER AND FOOTER
   ================================================================= */

.stamina-level-bar {
  background: var(--color-header-gradient);
  color: var(--color-text);
}

.anisota-footer {
  background: var(--color-footer-gradient);
  color: var(--color-text);
}

/* =================================================================
   BUTTON STYLES
   ================================================================= */

button,
.nav-control,
.post-card-button,
.reset-button,
.login-button,
.create-button,
.add-account-btn,
.add-account-confirm,
.load-more-button,
.retry-button,
.tags-toggle-button,
.post-button {
  background: var(--color-button-background);
  color: var(--color-button-text);
  border: 1px solid var(--color-border);
}

button:hover:not(:disabled),
.nav-control:hover:not(:disabled),
.post-card-button:hover,
.reset-button:hover,
.login-button:hover,
.create-button:hover:not(:disabled),
.add-account-btn:hover:not(:disabled),
.add-account-confirm:hover:not(:disabled),
.load-more-button:hover:not(:disabled),
.retry-button:hover,
.tags-toggle-button:hover:not(:disabled),
.post-button:hover:not(:disabled) {
  background: var(--color-button-hover);
  border-color: var(--color-border-light);
}

button:active:not(:disabled),
.nav-control:active:not(:disabled) {
  background: var(--color-button-active);
}

button:disabled,
.nav-control:disabled,
.create-button:disabled,
.add-account-btn:disabled,
.add-account-confirm:disabled,
.load-more-button:disabled,
.tags-toggle-button:disabled,
.post-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Special button colors */
.login-card-button-secondary,
.create-new-list-button,
.create-list-button {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--color-accent) !important;
}

.login-card-button-secondary:hover,
.create-new-list-button:hover,
.create-list-button:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

.cancel-button,
.add-account-cancel,
.login-card-button-back {
  background: var(--color-card-background);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.cancel-button:hover:not(:disabled),
.add-account-cancel:hover:not(:disabled),
.login-card-button-back:hover {
  background: var(--color-card-background-hover);
  color: var(--color-text);
}

/* =================================================================
   INPUT STYLES
   ================================================================= */

input,
textarea,
select,
.login-card-input,
.post-composer-textarea,
.tags-input,
.follower-input,
.add-account-input {
  background: var(--color-input-background);
  color: var(--color-input-text);
  border: 1px solid var(--color-input-border);
}

input:focus,
textarea:focus,
select:focus,
.login-card-input:focus,
.tags-input:focus,
.follower-input:focus,
.add-account-input:focus {
  border-color: var(--color-input-focus);
  background: var(--color-card-background-hover);
}

input::placeholder,
textarea::placeholder,
.login-card-input::placeholder,
.post-composer-textarea::placeholder,
.tags-input::placeholder,
.follower-input::placeholder,
.add-account-input::placeholder {
  color: var(--color-input-placeholder);
}

input:disabled,
textarea:disabled,
select:disabled,
.tags-input:disabled,
.follower-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =================================================================
   LINK STYLES
   ================================================================= */

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

a:visited {
  color: var(--color-link-visited);
}

.post-card-time-link {
  color: var(--color-text-muted);
  text-decoration: none;
}

.post-card-time-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* =================================================================
   TEXT STYLES
   ================================================================= */

.post-card-time,
.post-card-delta,
.character-count,
.range-label,
.follower-label,
.notification-time,
.profile-creation-date,
.profile-did,
.profile-service-endpoint,
.post-card-did {
  color: var(--color-text-muted);
}

.post-card-username,
.post-card-text,
.brand-title,
.settings-header h1,
.modal-title,
.profile-display-name,
.account-name {
  color: var(--color-text);
}

.brand-subtitle,
.login-card-subtitle,
.settings-description,
.section-description,
.modal-subtitle,
.profile-handle,
.account-handle,
.account-last-used,
.ui-toggle-description,
.theme-description,
.control-button-description,
.notification-type,
.list-description {
  color: var(--color-text-secondary);
}

.post-read-indicator {
  color: inherit;
}

/* =================================================================
   BORDER UTILITIES
   ================================================================= */

.border {
  border: 1px solid var(--color-border);
}

.border-light {
  border: 1px solid var(--color-border-light);
}

.border-dark {
  border: 1px solid var(--color-border-dark);
}

/* =================================================================
   STATUS MESSAGE STYLES
   ================================================================= */

.success,
.success-text,
.success-message {
  color: var(--color-success);
}

.error,
.login-card-error,
.add-account-error,
.stamina-error {
  color: var(--color-error);
}

.warning {
  color: var(--color-warning);
}

.info {
  color: var(--color-info);
}

/* =================================================================
   SPECIAL CARD EFFECTS
   ================================================================= */

.post-card.liked .card-front,
.post-card.liked .card-back {
  border: 2px solid var(--color-notification-like);
  box-shadow: 0 0 25px var(--color-glow-like);
}

.post-card.reposted .card-front,
.post-card.reposted .card-back {
  border: 2px solid var(--color-notification-repost);
  box-shadow: 0 0 25px var(--color-glow-repost);
}

/* =================================================================
   SHADOW UTILITIES
   ================================================================= */

.shadow {
  box-shadow: 0 4px 24px var(--color-shadow);
}

.shadow-sm {
  box-shadow: 0 2px 8px var(--color-shadow-light);
}

/* =================================================================
   OVERLAY STYLES
   ================================================================= */

.overlay,
.modal-backdrop {
  background: var(--color-overlay);
}

.theme-lock-overlay {
  background: var(--color-overlay-dark);
}

/* =================================================================
   THREAD POST STYLES
   ================================================================= */

.post-card.thread-post {
  border: 1px dashed var(--color-border-light);
}

.post-card.thread-post:has(.card-inner) {
  border: none;
}

.post-card.thread-post:has(.card-inner) .card-front,
.post-card.thread-post:has(.card-inner) .card-back {
  border: 1px dashed var(--color-border);
}

/* Advanced thread post border styling */
.post-card.thread-post:has(.card-inner) .card-front,
.post-card.thread-post:has(.card-inner) .card-back {
  /* Default: solid top/bottom, dashed left/right */
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  border-left: 1px dashed var(--color-border);
  border-right: 1px dashed var(--color-border);
}

/* First child in thread: solid right border */
.post-card.thread-post[data-thread-position="0"]:has(.card-inner) .card-front,
.post-card.thread-post[data-thread-position="0"]:has(.card-inner) .card-back {
  border-right: 2px solid var(--color-border);
}

/* Last child in thread: solid left border */
.post-card.thread-post[data-thread-last="true"]:has(.card-inner) .card-front,
.post-card.thread-post[data-thread-last="true"]:has(.card-inner) .card-back {
  border-left: 2px solid var(--color-border);
}

/* For thread posts without flip structure */
.post-card.thread-post:not(:has(.card-inner)) {
  /* Default: solid top/bottom, dashed left/right */
  border-top: 2px solid var(--color-border-light);
  border-bottom: 2px solid var(--color-border-light);
  border-left: 1px dashed var(--color-border-light);
  border-right: 1px dashed var(--color-border-light);
}

/* First child in thread: solid right border (no flip structure) */
.post-card.thread-post[data-thread-position="0"]:not(:has(.card-inner)) {
  border-right: 2px solid var(--color-border-light);
}

/* Last child in thread: solid left border (no flip structure) */
.post-card.thread-post[data-thread-last="true"]:not(:has(.card-inner)) {
  border-left: 2px solid var(--color-border-light);
}

.post-card.liked.thread-post .card-front,
.post-card.liked.thread-post .card-back {
  border-top: 2px solid var(--color-notification-like) !important;
  border-bottom: 2px solid var(--color-notification-like) !important;
  border-left: 1px dashed var(--color-notification-like) !important;
  border-right: 1px dashed var(--color-notification-like) !important;
}

/* First child in liked thread: solid right border */
.post-card.liked.thread-post[data-thread-position="0"] .card-front,
.post-card.liked.thread-post[data-thread-position="0"] .card-back {
  border-right: 2px solid var(--color-notification-like) !important;
}

/* Last child in liked thread: solid left border */
.post-card.liked.thread-post[data-thread-last="true"] .card-front,
.post-card.liked.thread-post[data-thread-last="true"] .card-back {
  border-left: 2px solid var(--color-notification-like) !important;
}

.post-card.reposted.thread-post .card-front,
.post-card.reposted.thread-post .card-back {
  border-top: 2px solid var(--color-notification-repost) !important;
  border-bottom: 2px solid var(--color-notification-repost) !important;
  border-left: 1px dashed var(--color-notification-repost) !important;
  border-right: 1px dashed var(--color-notification-repost) !important;
}

/* First child in reposted thread: solid right border */
.post-card.reposted.thread-post[data-thread-position="0"] .card-front,
.post-card.reposted.thread-post[data-thread-position="0"] .card-back {
  border-right: 2px solid var(--color-notification-repost) !important;
}

/* Last child in reposted thread: solid left border */
.post-card.reposted.thread-post[data-thread-last="true"] .card-front,
.post-card.reposted.thread-post[data-thread-last="true"] .card-back {
  border-left: 2px solid var(--color-notification-repost) !important;
}

/* Flipped card backs need reversed left/right borders */
/* First child in thread: when flipped, back should have solid left, dashed right */
.post-card.thread-post[data-thread-position="0"].flipped .card-back {
  border-left: 2px solid var(--color-border) !important;
  border-right: 1px dashed var(--color-border) !important;
}

/* Last child in thread: when flipped, back should have dashed left, solid right */
.post-card.thread-post[data-thread-last="true"].flipped .card-back {
  border-left: 1px dashed var(--color-border) !important;
  border-right: 2px solid var(--color-border) !important;
}

/* Flipped liked thread posts need reversed left/right borders */
/* First child in liked thread: when flipped, back should have solid left, dashed right */
.post-card.liked.thread-post[data-thread-position="0"].flipped .card-back {
  border-left: 2px solid var(--color-notification-like) !important;
  border-right: 1px dashed var(--color-notification-like) !important;
}

/* Last child in liked thread: when flipped, back should have dashed left, solid right */
.post-card.liked.thread-post[data-thread-last="true"].flipped .card-back {
  border-left: 1px dashed var(--color-notification-like) !important;
  border-right: 2px solid var(--color-notification-like) !important;
}

/* Flipped reposted thread posts need reversed left/right borders */
/* First child in reposted thread: when flipped, back should have solid left, dashed right */
.post-card.reposted.thread-post[data-thread-position="0"].flipped .card-back {
  border-left: 2px solid var(--color-notification-repost) !important;
  border-right: 1px dashed var(--color-notification-repost) !important;
}

/* Last child in reposted thread: when flipped, back should have dashed left, solid right */
.post-card.reposted.thread-post[data-thread-last="true"].flipped .card-back {
  border-left: 1px dashed var(--color-notification-repost) !important;
  border-right: 2px solid var(--color-notification-repost) !important;
}

/* =================================================================
   EMPTY STATE STYLES
   ================================================================= */

.empty-state,
.empty-state-card {
  border: 1px dashed var(--color-border-light);
  color: var(--color-text-muted);
  background: transparent;
}

.loading,
.loading-message,
.empty-message,
.no-notifications,
.no-accounts,
.auth-required-message {
  color: var(--color-text-muted);
}

/* =================================================================
   NOTIFICATION STYLES
   ================================================================= */

.notification-like {
  border-left-color: var(--color-notification-like) !important;
  background: rgba(255, 68, 191, 0.08) !important;
}

.notification-like:hover {
  background: rgba(255, 68, 191, 0.12) !important;
}

.notification-like .notification-type {
  color: var(--color-notification-like);
}

.notification-repost {
  border-left-color: var(--color-notification-repost) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

.notification-repost .notification-type {
  color: var(--color-notification-repost);
}

.notification-like-via-repost {
  border-left-color: var(--color-notification-like) !important;
  background: rgba(255, 68, 191, 0.08) !important;
}

.notification-like-via-repost:hover {
  background: rgba(255, 68, 191, 0.12) !important;
}

.notification-like-via-repost .notification-type {
  color: var(--color-notification-like);
}

.notification-repost-via-repost {
  border-left-color: var(--color-notification-repost) !important;
  background: rgba(34, 197, 94, 0.08) !important;
}

.notification-repost-via-repost .notification-type {
  color: var(--color-notification-repost);
}

.notification-reply,
.batched-notification {
  border-left-color: var(--color-notification-reply) !important;
  background: rgba(74, 158, 255, 0.08) !important;
}

.notification-reply .notification-type,
.batched-notification .notification-type {
  color: var(--color-notification-reply);
}

.notification-quote {
  border-left-color: var(--color-notification-quote) !important;
  background: rgba(136, 136, 136, 0.08) !important;
}

.notification-quote .notification-type {
  color: var(--color-notification-quote);
}

.notification-mention {
  border-left-color: var(--color-notification-mention) !important;
  background: rgba(255, 149, 0, 0.08) !important;
}

.notification-mention .notification-type {
  color: var(--color-notification-mention);
}

/* =================================================================
   SETTINGS STYLES
   ================================================================= */

.settings-menu-item:hover,
.lists-menu-item:hover,
.theme-option:hover,
.ui-toggle,
.control-button-setting,
.list-item,
.list-card:hover {
  background: var(--color-card-background-hover);
  border-color: var(--color-border-light);
}

.control-button-setting.enabled {
  border-color: var(--color-link);
  background: rgba(74, 158, 255, 0.25);
}

.control-button-setting.disabled {
  opacity: 0.5;
  background: var(--color-background-secondary);
}

.theme-option.selected {
  border-color: var(--color-text);
  background: var(--color-card-background-hover);
}

.control-button-symbol {
  background: var(--color-button-background);
  border: 1px solid var(--color-border-light);
  color: var(--color-button-text);
}

.control-button-setting.enabled .control-button-symbol {
  background: var(--color-link);
  border-color: var(--color-link);
  color: var(--color-text-inverse);
}

/* =================================================================
   FEED SWITCHER STYLES
   ================================================================= */

.feed-switcher-button {
  background: var(--color-card-background);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
}

.feed-switcher-button:hover:not(:disabled) {
  background: var(--color-button-hover);
  border-color: var(--color-border-light);
  color: var(--color-text-secondary);
}

.feed-switcher-dropdown {
  background: var(--color-card-background);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 4px 24px var(--color-shadow-dark);
}

.feed-switcher-option {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.feed-switcher-option:hover:not(:disabled) {
  background: var(--color-button-hover);
  color: var(--color-text);
}

.feed-switcher-option.active {
  background: var(--color-button-hover);
  color: var(--color-text);
}

/* Feed Switcher Modal Theme Styles */
.feed-switcher-modal .loading-message {
  color: var(--color-text-muted);
}

.feed-switcher-modal .empty-state {
  color: var(--color-text-muted);
}

.feed-switcher-modal .feed-option {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.feed-switcher-modal .feed-option:hover:not(:disabled) {
  background: var(--color-button-hover);
  color: var(--color-text);
}

.feed-switcher-modal .feed-option.active {
  background: var(--color-button-hover);
  color: var(--color-text);
}

.feed-switcher-modal .feed-option-description {
  color: var(--color-text-muted);
}

/* =================================================================
   MODAL STYLES
   ================================================================= */

.modal-content {
  background: var(--color-modal-background);
  border: 2px solid var(--color-border);
  color: var(--color-text);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--color-text);
}

.modal-close:hover {
  opacity: 0.7;
}

.modal-body {
  border-top: 1px solid var(--color-border);
}

/* =================================================================
   ACCOUNT SWITCHER STYLES
   ================================================================= */

.account-switcher-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
}

.account-switcher-close:hover {
  color: var(--color-text);
}

.account-item {
  border: 1px solid var(--color-border);
  background: var(--color-card-background);
}

.account-item:hover {
  border-color: var(--color-border-light);
  background: var(--color-card-background-hover);
}

.account-item.active {
  border-color: var(--color-link);
  background: rgba(74, 158, 255, 0.1);
}

.current-indicator {
  color: var(--color-link);
}

.remove-account-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
}

.remove-account-btn:hover {
  background: rgba(255, 68, 191, 0.2);
  color: var(--color-notification-like);
}

/* =================================================================
   TOUCH MENU STYLES
   ================================================================= */

.touch-menu-user-header {
  border-bottom: 2px solid var(--color-border);
}

.touch-menu-username {
  color: var(--color-text);
}

.touch-menu-did {
  color: var(--color-text-muted);
}

.touch-menu-item {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.touch-menu-item:hover {
  background: var(--color-card-background-hover);
}

.touch-menu-item-logout {
  color: var(--color-error);
}

.touch-menu-item-logout:hover {
  background: var(--color-card-background-hover);
  color: #ff6666;
}

/* =================================================================
   STATS AND INFO DISPLAYS
   ================================================================= */

.stats-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}

.stats-section h4 {
  border-bottom: 1px solid var(--color-border);
}

.stat-item {
  border-bottom: 1px solid var(--color-border);
}

.stat-label,
.profile-stat-number {
  color: var(--color-text);
}

.stat-value,
.profile-stat-label {
  color: var(--color-text-secondary);
}

/* =================================================================
   TAGS AND FILTERS
   ================================================================= */

.tags-section {
  background: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.tags-label {
  color: var(--color-text-secondary);
}

.tag-item {
  color: var(--color-link);
}

.tag-item.default-tag {
  color: var(--color-warning);
}

.filter-button {
  background: transparent;
  border: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}

.filter-button:hover {
  background: var(--color-button-background);
  border-color: var(--color-border);
  color: var(--color-text);
}

.filter-button.active {
  background: var(--color-button-hover);
  border-color: var(--color-border-light);
  color: var(--color-text);
}

/* =================================================================
   LIST STYLES
   ================================================================= */

.list-tags .tag-item {
  background: var(--color-button-background);
  color: var(--color-text);
}

.add-to-list-button {
  background: var(--color-button-background);
  color: var(--color-text);
  border: 1px solid var(--color-border-light);
}

.add-to-list-button:hover {
  background: var(--color-link);
  border-color: var(--color-link);
}

/* =================================================================
   THEME-SPECIFIC ADJUSTMENTS
   ================================================================= */

/* Day theme specific adjustments */
[data-theme="day"] .notification-item .notification-enhanced-content {
  border-top-color: rgba(0, 0, 0, 0.15);
}

[data-theme="day"] .notification-item .notification-original-post,
[data-theme="day"] .notification-item .notification-reply-content {
  border-left-color: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="day"] .notification-item .notification-original-post:hover,
[data-theme="day"] .notification-item .notification-reply-content:hover {
  border-left-color: rgba(0, 0, 0, 0.4) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}

[data-theme="day"] .notification-item .notification-original-post {
  color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="day"] .notification-item .notification-reply-content {
  color: rgba(0, 0, 0, 0.75) !important;
}

/* Night theme specific adjustments */
[data-theme="night"] .notification-item .notification-enhanced-content {
  border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="night"] .notification-item .notification-original-post,
[data-theme="night"] .notification-item .notification-reply-content {
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="night"] .notification-item .notification-original-post:hover,
[data-theme="night"] .notification-item .notification-reply-content:hover {
  border-left-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}

[data-theme="night"] .notification-item .notification-original-post {
  color: rgba(255, 255, 255, 0.6) !important;
}

[data-theme="night"] .notification-item .notification-reply-content {
  color: rgba(255, 255, 255, 0.85) !important;
}