/* RSS Reader Stylesheet */

/* ===== Theme Definitions ===== */

:root,
[data-theme="default"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #ffffff;
  --text-color: #1a1a1a;
  --text-meta: #666;
  --text-secondary: #555;
  --text-muted: #444;

  --header-bg: #222;
  --header-text: #eee;
  --header-link: #9cf;

  --dropdown-bg: #333;
  --dropdown-hover: #444;
  --dropdown-divider: #555;
  --dropdown-text: #eee;
  --dropdown-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #fff;
  --card-border: #e5e7eb;
  --card-border-accent: #cbd5e1;
  --card-shadow: rgba(0, 0, 0, 0.08);
  --card-shadow-hover: rgba(0, 0, 0, 0.12);

  --border-color: #ddd;

  --btn-bg: #f5f5f5;
  --btn-border: #ccc;
  --btn-hover: #e8e8e8;
  --btn-text: #1a1a1a;
  --btn-primary: #2563eb;
  --btn-primary-hover: #1d4ed8;
  --btn-primary-text: #fff;
  --btn-danger: #dc2626;
  --btn-danger-hover: #b91c1c;
  --btn-refresh: #3b82f6;
  --btn-refresh-hover: #2563eb;
  --btn-read-bg: #9ca3af;
  --btn-read-hover: #6b7280;

  --link-color: #2563eb;
  --link-active: #1e293b;

  --surface-muted: #fafafa;

  --input-bg: #fff;
  --input-border: #ccc;
  --input-text: #1a1a1a;

  --select-bg: transparent;
  --select-text: #eee;
  --select-border: rgba(255, 255, 255, 0.3);
}

[data-theme="amber-crt"] {
  --font-family: "Courier New", Courier, monospace;
  --bg-body: #0a0a00;
  --text-color: #ffb000;
  --text-meta: #cc8d00;
  --text-secondary: #b87e00;
  --text-muted: #cc8d00;

  --header-bg: #1a1200;
  --header-text: #ffb000;
  --header-link: #ffc840;

  --dropdown-bg: #1a1200;
  --dropdown-hover: #2a1f00;
  --dropdown-divider: #3d2e00;
  --dropdown-text: #ffb000;
  --dropdown-shadow: rgba(255, 176, 0, 0.15);

  --card-bg: #111000;
  --card-border: #3d2e00;
  --card-border-accent: #ffb000;
  --card-shadow: rgba(255, 176, 0, 0.05);
  --card-shadow-hover: rgba(255, 176, 0, 0.1);

  --border-color: #3d2e00;

  --btn-bg: #1a1200;
  --btn-border: #3d2e00;
  --btn-hover: #2a1f00;
  --btn-text: #ffb000;
  --btn-primary: #ffb000;
  --btn-primary-hover: #ffc840;
  --btn-primary-text: #0a0a00;
  --btn-danger: #ff6600;
  --btn-danger-hover: #ff8533;
  --btn-refresh: #ffb000;
  --btn-refresh-hover: #ffc840;
  --btn-read-bg: #5c4400;
  --btn-read-hover: #3d2e00;

  --link-color: #ffc840;
  --link-active: #ffb000;

  --surface-muted: #111000;

  --input-bg: #111000;
  --input-border: #3d2e00;
  --input-text: #ffb000;

  --select-bg: #1a1200;
  --select-text: #ffb000;
  --select-border: #3d2e00;

  --crt-glow: 0 0 4px rgba(255, 176, 0, 0.4);
}

[data-theme="green-crt"] {
  --font-family: "Courier New", Courier, monospace;
  --bg-body: #000a00;
  --text-color: #33ff00;
  --text-meta: #22aa00;
  --text-secondary: #1a8800;
  --text-muted: #22aa00;

  --header-bg: #001a00;
  --header-text: #33ff00;
  --header-link: #66ff44;

  --dropdown-bg: #001a00;
  --dropdown-hover: #002a00;
  --dropdown-divider: #003d00;
  --dropdown-text: #33ff00;
  --dropdown-shadow: rgba(51, 255, 0, 0.15);

  --card-bg: #001100;
  --card-border: #003d00;
  --card-border-accent: #33ff00;
  --card-shadow: rgba(51, 255, 0, 0.05);
  --card-shadow-hover: rgba(51, 255, 0, 0.1);

  --border-color: #003d00;

  --btn-bg: #001a00;
  --btn-border: #003d00;
  --btn-hover: #002a00;
  --btn-text: #33ff00;
  --btn-primary: #33ff00;
  --btn-primary-hover: #66ff44;
  --btn-primary-text: #000a00;
  --btn-danger: #ff3333;
  --btn-danger-hover: #ff6666;
  --btn-refresh: #33ff00;
  --btn-refresh-hover: #66ff44;
  --btn-read-bg: #0a5500;
  --btn-read-hover: #003d00;

  --link-color: #66ff44;
  --link-active: #33ff00;

  --surface-muted: #001100;

  --input-bg: #001100;
  --input-border: #003d00;
  --input-text: #33ff00;

  --select-bg: #001a00;
  --select-text: #33ff00;
  --select-border: #003d00;

  --crt-glow: 0 0 4px rgba(51, 255, 0, 0.4);
}

[data-theme="cyberpunk"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #0d0221;
  --text-color: #e0d0ff;
  --text-meta: #8a7ab5;
  --text-secondary: #7a6aa5;
  --text-muted: #8a7ab5;

  --header-bg: #1a0533;
  --header-text: #05d9e8;
  --header-link: #05d9e8;

  --dropdown-bg: #1a0533;
  --dropdown-hover: #2a0f4a;
  --dropdown-divider: #3d1a66;
  --dropdown-text: #e0d0ff;
  --dropdown-shadow: rgba(5, 217, 232, 0.15);

  --card-bg: #150430;
  --card-border: #3d1a66;
  --card-border-accent: #ff2a6d;
  --card-shadow: rgba(255, 42, 109, 0.08);
  --card-shadow-hover: rgba(255, 42, 109, 0.15);

  --border-color: #3d1a66;

  --btn-bg: #1a0533;
  --btn-border: #3d1a66;
  --btn-hover: #2a0f4a;
  --btn-text: #e0d0ff;
  --btn-primary: #ff2a6d;
  --btn-primary-hover: #ff5a8d;
  --btn-primary-text: #fff;
  --btn-danger: #ff2a6d;
  --btn-danger-hover: #ff5a8d;
  --btn-refresh: #05d9e8;
  --btn-refresh-hover: #40e8f0;
  --btn-read-bg: #3d1a66;
  --btn-read-hover: #2a0f4a;

  --link-color: #05d9e8;
  --link-active: #ff2a6d;

  --surface-muted: #150430;

  --input-bg: #150430;
  --input-border: #3d1a66;
  --input-text: #e0d0ff;

  --select-bg: #1a0533;
  --select-text: #05d9e8;
  --select-border: #3d1a66;
}

[data-theme="solarized-dark"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #002b36;
  --text-color: #839496;
  --text-meta: #657b83;
  --text-secondary: #586e75;
  --text-muted: #657b83;

  --header-bg: #073642;
  --header-text: #93a1a1;
  --header-link: #268bd2;

  --dropdown-bg: #073642;
  --dropdown-hover: #0a4a5c;
  --dropdown-divider: #586e75;
  --dropdown-text: #93a1a1;
  --dropdown-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #073642;
  --card-border: #586e75;
  --card-border-accent: #b58900;
  --card-shadow: rgba(0, 0, 0, 0.15);
  --card-shadow-hover: rgba(0, 0, 0, 0.25);

  --border-color: #586e75;

  --btn-bg: #073642;
  --btn-border: #586e75;
  --btn-hover: #0a4a5c;
  --btn-text: #93a1a1;
  --btn-primary: #268bd2;
  --btn-primary-hover: #2aa0f0;
  --btn-primary-text: #fdf6e3;
  --btn-danger: #dc322f;
  --btn-danger-hover: #e35553;
  --btn-refresh: #2aa198;
  --btn-refresh-hover: #35bdb3;
  --btn-read-bg: #586e75;
  --btn-read-hover: #475b61;

  --link-color: #268bd2;
  --link-active: #b58900;

  --surface-muted: #073642;

  --input-bg: #073642;
  --input-border: #586e75;
  --input-text: #93a1a1;

  --select-bg: #073642;
  --select-text: #268bd2;
  --select-border: #586e75;
}

[data-theme="dracula"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #282a36;
  --text-color: #f8f8f2;
  --text-meta: #6272a4;
  --text-secondary: #6272a4;
  --text-muted: #6272a4;

  --header-bg: #21222c;
  --header-text: #f8f8f2;
  --header-link: #bd93f9;

  --dropdown-bg: #21222c;
  --dropdown-hover: #343746;
  --dropdown-divider: #44475a;
  --dropdown-text: #f8f8f2;
  --dropdown-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #21222c;
  --card-border: #44475a;
  --card-border-accent: #ff79c6;
  --card-shadow: rgba(0, 0, 0, 0.15);
  --card-shadow-hover: rgba(0, 0, 0, 0.25);

  --border-color: #44475a;

  --btn-bg: #44475a;
  --btn-border: #6272a4;
  --btn-hover: #525568;
  --btn-text: #f8f8f2;
  --btn-primary: #bd93f9;
  --btn-primary-hover: #caa8fc;
  --btn-primary-text: #282a36;
  --btn-danger: #ff5555;
  --btn-danger-hover: #ff7777;
  --btn-refresh: #8be9fd;
  --btn-refresh-hover: #a4eefe;
  --btn-read-bg: #44475a;
  --btn-read-hover: #363848;

  --link-color: #8be9fd;
  --link-active: #ff79c6;

  --surface-muted: #21222c;

  --input-bg: #21222c;
  --input-border: #44475a;
  --input-text: #f8f8f2;

  --select-bg: #21222c;
  --select-text: #bd93f9;
  --select-border: #44475a;
}

[data-theme="paper"] {
  --font-family: Georgia, "Times New Roman", serif;
  --bg-body: #f5f0e8;
  --text-color: #3b2e1e;
  --text-meta: #7a6b5a;
  --text-secondary: #6b5c4b;
  --text-muted: #7a6b5a;

  --header-bg: #4a3b2a;
  --header-text: #f0e8d8;
  --header-link: #d4c4a0;

  --dropdown-bg: #4a3b2a;
  --dropdown-hover: #5c4c3a;
  --dropdown-divider: #6b5c4b;
  --dropdown-text: #f0e8d8;
  --dropdown-shadow: rgba(59, 46, 30, 0.2);

  --card-bg: #faf6ee;
  --card-border: #d8cdb8;
  --card-border-accent: #8b7355;
  --card-shadow: rgba(59, 46, 30, 0.08);
  --card-shadow-hover: rgba(59, 46, 30, 0.14);

  --border-color: #d8cdb8;

  --btn-bg: #ebe4d4;
  --btn-border: #c8bca6;
  --btn-hover: #ddd5c4;
  --btn-text: #3b2e1e;
  --btn-primary: #8b7355;
  --btn-primary-hover: #7a6348;
  --btn-primary-text: #faf6ee;
  --btn-danger: #a0522d;
  --btn-danger-hover: #8b4726;
  --btn-refresh: #6b8e6b;
  --btn-refresh-hover: #5a7a5a;
  --btn-read-bg: #b8ad98;
  --btn-read-hover: #a0957e;

  --link-color: #6b5038;
  --link-active: #3b2e1e;

  --surface-muted: #f0eadf;

  --input-bg: #faf6ee;
  --input-border: #c8bca6;
  --input-text: #3b2e1e;

  --select-bg: transparent;
  --select-text: #f0e8d8;
  --select-border: rgba(240, 232, 216, 0.3);
}

[data-theme="high-contrast"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #000000;
  --text-color: #ffffff;
  --text-meta: #cccccc;
  --text-secondary: #bbbbbb;
  --text-muted: #cccccc;

  --header-bg: #1a1a1a;
  --header-text: #ffffff;
  --header-link: #00ccff;

  --dropdown-bg: #1a1a1a;
  --dropdown-hover: #333333;
  --dropdown-divider: #666666;
  --dropdown-text: #ffffff;
  --dropdown-shadow: rgba(255, 255, 255, 0.1);

  --card-bg: #0d0d0d;
  --card-border: #666666;
  --card-border-accent: #ffcc00;
  --card-shadow: rgba(255, 255, 255, 0.05);
  --card-shadow-hover: rgba(255, 255, 255, 0.1);

  --border-color: #666666;

  --btn-bg: #1a1a1a;
  --btn-border: #888888;
  --btn-hover: #333333;
  --btn-text: #ffffff;
  --btn-primary: #0066ff;
  --btn-primary-hover: #0055dd;
  --btn-primary-text: #ffffff;
  --btn-danger: #ff0000;
  --btn-danger-hover: #cc0000;
  --btn-refresh: #00cc00;
  --btn-refresh-hover: #00aa00;
  --btn-read-bg: #555555;
  --btn-read-hover: #444444;

  --link-color: #00ccff;
  --link-active: #ffcc00;

  --surface-muted: #0d0d0d;

  --input-bg: #0d0d0d;
  --input-border: #888888;
  --input-text: #ffffff;

  --select-bg: #1a1a1a;
  --select-text: #00ccff;
  --select-border: #888888;
}

[data-theme="firefox-dark"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #1c1b22;
  --text-color: #fbfbfe;
  --text-meta: #b1b1b3;
  --text-secondary: #9a9a9d;
  --text-muted: #b1b1b3;

  --header-bg: #23222b;
  --header-text: #fbfbfe;
  --header-link: #00ddff;

  --dropdown-bg: #2b2a33;
  --dropdown-hover: #3a3944;
  --dropdown-divider: #4a4a4f;
  --dropdown-text: #fbfbfe;
  --dropdown-shadow: rgba(0, 0, 0, 0.4);

  --card-bg: #2b2a33;
  --card-border: #3a3944;
  --card-border-accent: #ff8a00;
  --card-shadow: rgba(0, 0, 0, 0.2);
  --card-shadow-hover: rgba(0, 0, 0, 0.3);

  --border-color: #3a3944;

  --btn-bg: #2b2a33;
  --btn-border: #4a4a4f;
  --btn-hover: #3a3944;
  --btn-text: #fbfbfe;
  --btn-primary: #0060df;
  --btn-primary-hover: #0250bb;
  --btn-primary-text: #fbfbfe;
  --btn-danger: #ff6b6b;
  --btn-danger-hover: #ff4f4f;
  --btn-refresh: #30e60b;
  --btn-refresh-hover: #28c709;
  --btn-read-bg: #4a4a4f;
  --btn-read-hover: #3a3944;

  --link-color: #00ddff;
  --link-active: #ff8a00;

  --surface-muted: #23222b;

  --input-bg: #1c1b22;
  --input-border: #4a4a4f;
  --input-text: #fbfbfe;

  --select-bg: #2b2a33;
  --select-text: #00ddff;
  --select-border: #4a4a4f;
}

[data-theme="nord"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #2e3440;
  --text-color: #eceff4;
  --text-meta: #d8dee9;
  --text-secondary: #c2c9d6;
  --text-muted: #d8dee9;

  --header-bg: #3b4252;
  --header-text: #eceff4;
  --header-link: #88c0d0;

  --dropdown-bg: #3b4252;
  --dropdown-hover: #434c5e;
  --dropdown-divider: #4c566a;
  --dropdown-text: #eceff4;
  --dropdown-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #3b4252;
  --card-border: #434c5e;
  --card-border-accent: #ebcb8b;
  --card-shadow: rgba(0, 0, 0, 0.15);
  --card-shadow-hover: rgba(0, 0, 0, 0.25);

  --border-color: #434c5e;

  --btn-bg: #3b4252;
  --btn-border: #4c566a;
  --btn-hover: #434c5e;
  --btn-text: #eceff4;
  --btn-primary: #5e81ac;
  --btn-primary-hover: #81a1c1;
  --btn-primary-text: #eceff4;
  --btn-danger: #bf616a;
  --btn-danger-hover: #a9545c;
  --btn-refresh: #a3be8c;
  --btn-refresh-hover: #8faa78;
  --btn-read-bg: #4c566a;
  --btn-read-hover: #434c5e;

  --link-color: #88c0d0;
  --link-active: #ebcb8b;

  --surface-muted: #3b4252;

  --input-bg: #2e3440;
  --input-border: #4c566a;
  --input-text: #eceff4;

  --select-bg: #3b4252;
  --select-text: #88c0d0;
  --select-border: #4c566a;
}

[data-theme="catppuccin"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #1e1e2e;
  --text-color: #cdd6f4;
  --text-meta: #a6adc8;
  --text-secondary: #9399b2;
  --text-muted: #a6adc8;

  --header-bg: #181825;
  --header-text: #cdd6f4;
  --header-link: #cba6f7;

  --dropdown-bg: #313244;
  --dropdown-hover: #45475a;
  --dropdown-divider: #585b70;
  --dropdown-text: #cdd6f4;
  --dropdown-shadow: rgba(0, 0, 0, 0.4);

  --card-bg: #313244;
  --card-border: #45475a;
  --card-border-accent: #cba6f7;
  --card-shadow: rgba(0, 0, 0, 0.2);
  --card-shadow-hover: rgba(0, 0, 0, 0.3);

  --border-color: #45475a;

  --btn-bg: #313244;
  --btn-border: #585b70;
  --btn-hover: #45475a;
  --btn-text: #cdd6f4;
  --btn-primary: #cba6f7;
  --btn-primary-hover: #b48ef0;
  --btn-primary-text: #1e1e2e;
  --btn-danger: #f38ba8;
  --btn-danger-hover: #e66d8e;
  --btn-refresh: #a6e3a1;
  --btn-refresh-hover: #8fd88a;
  --btn-read-bg: #585b70;
  --btn-read-hover: #45475a;

  --link-color: #89b4fa;
  --link-active: #f9e2af;

  --surface-muted: #181825;

  --input-bg: #1e1e2e;
  --input-border: #585b70;
  --input-text: #cdd6f4;

  --select-bg: #313244;
  --select-text: #cba6f7;
  --select-border: #585b70;
}

[data-theme="gruvbox"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #282828;
  --text-color: #ebdbb2;
  --text-meta: #bdae93;
  --text-secondary: #a89984;
  --text-muted: #bdae93;

  --header-bg: #1d2021;
  --header-text: #ebdbb2;
  --header-link: #fabd2f;

  --dropdown-bg: #3c3836;
  --dropdown-hover: #504945;
  --dropdown-divider: #665c54;
  --dropdown-text: #ebdbb2;
  --dropdown-shadow: rgba(0, 0, 0, 0.3);

  --card-bg: #3c3836;
  --card-border: #504945;
  --card-border-accent: #fabd2f;
  --card-shadow: rgba(0, 0, 0, 0.15);
  --card-shadow-hover: rgba(0, 0, 0, 0.25);

  --border-color: #504945;

  --btn-bg: #3c3836;
  --btn-border: #665c54;
  --btn-hover: #504945;
  --btn-text: #ebdbb2;
  --btn-primary: #fabd2f;
  --btn-primary-hover: #e5ac24;
  --btn-primary-text: #282828;
  --btn-danger: #fb4934;
  --btn-danger-hover: #cc241d;
  --btn-refresh: #8ec07c;
  --btn-refresh-hover: #7db36e;
  --btn-read-bg: #665c54;
  --btn-read-hover: #504945;

  --link-color: #83a598;
  --link-active: #ebdbb2;

  --surface-muted: #1d2021;

  --input-bg: #282828;
  --input-border: #665c54;
  --input-text: #ebdbb2;

  --select-bg: #3c3836;
  --select-text: #fabd2f;
  --select-border: #665c54;
}

[data-theme="tokyo-night"] {
  --font-family: system-ui, sans-serif;
  --bg-body: #1a1b26;
  --text-color: #c0caf5;
  --text-meta: #9aa5ce;
  --text-secondary: #787c99;
  --text-muted: #9aa5ce;

  --header-bg: #16161e;
  --header-text: #c0caf5;
  --header-link: #7aa2f7;

  --dropdown-bg: #24283b;
  --dropdown-hover: #2f3549;
  --dropdown-divider: #3b4261;
  --dropdown-text: #c0caf5;
  --dropdown-shadow: rgba(0, 0, 0, 0.4);

  --card-bg: #24283b;
  --card-border: #3b4261;
  --card-border-accent: #e0af68;
  --card-shadow: rgba(0, 0, 0, 0.2);
  --card-shadow-hover: rgba(0, 0, 0, 0.3);

  --border-color: #3b4261;

  --btn-bg: #24283b;
  --btn-border: #3b4261;
  --btn-hover: #2f3549;
  --btn-text: #c0caf5;
  --btn-primary: #7aa2f7;
  --btn-primary-hover: #6890e0;
  --btn-primary-text: #1a1b26;
  --btn-danger: #f7768e;
  --btn-danger-hover: #e0607a;
  --btn-refresh: #9ece6a;
  --btn-refresh-hover: #89b85a;
  --btn-read-bg: #3b4261;
  --btn-read-hover: #2f3549;

  --link-color: #7dcfff;
  --link-active: #e0af68;

  --surface-muted: #16161e;

  --input-bg: #1a1b26;
  --input-border: #3b4261;
  --input-text: #c0caf5;

  --select-bg: #24283b;
  --select-text: #7aa2f7;
  --select-border: #3b4261;
}

/* ===== Base styles ===== */

body {
  font-family: var(--font-family);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: var(--bg-body);
  color: var(--text-color);
}

/* CRT text glow for CRT themes */
[data-theme="amber-crt"] body,
[data-theme="green-crt"] body {
  text-shadow: var(--crt-glow);
}

/* Header styles */
header {
  background: var(--header-bg);
  color: var(--header-text);
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.font-size-group {
  display: inline-flex;
  border: 1px solid var(--select-border);
  border-radius: 4px;
  overflow: hidden;
}

.font-size-group .font-size-btn {
  border: none;
  border-radius: 0;
  min-height: 2rem;
  min-width: 1.75rem;
  padding: 0.25rem 0.4rem;
}

.font-size-group .font-size-btn:first-child {
  border-right: 1px solid var(--select-border);
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem 1rem;
  font-size: 0.8rem;
}

.site-footer a {
  color: var(--text-meta);
  text-decoration: none;
  opacity: 0.6;
}

.site-footer a:hover {
  opacity: 1;
}

.btn-logout {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--text-meta);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--btn-read-bg);
  color: var(--btn-primary-text);
}

.btn-logout:hover {
  background: var(--btn-read-hover);
  transform: scale(1.05);
}

/* Dropdown styles */
.dropdown {
  position: relative;
  display: inline;
}

.dropdown-toggle {
  color: var(--header-link);
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
  background: none;
  border: 1px solid var(--select-border);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-family: inherit;
  line-height: inherit;
}

.dropdown-toggle:hover {
  text-decoration: underline;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--dropdown-bg);
  min-width: 200px;
  box-shadow: 0px 8px 16px var(--dropdown-shadow);
  z-index: 1000;
  border-radius: 4px;
  max-height: 400px;
  overflow-y: auto;
  top: 100%;
  margin-top: 0.5rem;
  left: 0;
}

.dropdown-content.show {
  display: block;
}

.dropdown-content a {
  color: var(--dropdown-text);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  display: block;
  font-size: 0.85rem;
}

.dropdown-content a:hover {
  background-color: var(--dropdown-hover);
}

.dropdown-divider {
  border-top: 1px solid var(--dropdown-divider);
  margin: 0.25rem 0;
}

/* Main content area */
main {
  padding: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Legacy item styles */
.item {
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 0;
}

.item.read {
  opacity: 0.6;
}

.item h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

/* Meta information */
.meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Form styles */
form.inline {
  display: inline;
}

/* Feed list */
.feed-list {
  margin: 0;
  padding: 0;
}

.feed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  gap: 0.5rem;
}

.feed-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* Action buttons (shared styles) */
.btn-action {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s;
}

/* Refresh button */
.btn-refresh {
  background: var(--btn-refresh);
  color: var(--btn-primary-text);
}

.btn-refresh:hover {
  background: var(--btn-refresh-hover);
}

/* Delete button */
.btn-delete {
  background: var(--btn-danger);
  color: var(--btn-primary-text);
}

.btn-delete:hover {
  background: var(--btn-danger-hover);
}

/* Buttons */
button {
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid var(--btn-border);
  padding: 0.25rem 0.6rem;
  background: var(--btn-bg);
  color: var(--btn-text);
}

button:hover {
  background: var(--btn-hover);
}

/* Feed item cards */
.feed-item-card {
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--card-border-accent);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  background: var(--card-bg);
  box-shadow: 0 1px 3px var(--card-shadow);
  transition: box-shadow 0.2s ease;
}

.feed-item-card:hover {
  box-shadow: 0 2px 6px var(--card-shadow-hover);
}

.feed-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.feed-item-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.feed-favicon {
  flex-shrink: 0;
  vertical-align: middle;
  background: #fff;
  border-radius: 2px;
  padding: 1px;
}

.feed-item-meta {
  font-size: 0.8rem;
  color: var(--text-meta);
}

.feed-item-summary {
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* Mark read button */
.btn-mark-read {
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  white-space: nowrap;
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}

.btn-mark-read:hover {
  background: var(--btn-primary-hover);
  transform: scale(1.05);
}

.btn-mark-read.unread {
  background: var(--btn-primary);
  color: var(--btn-primary-text);
}

.btn-mark-read.unread:hover {
  background: var(--btn-primary-hover);
  transform: scale(1.05);
}

.btn-mark-read.read {
  background: var(--btn-read-bg);
  color: var(--btn-primary-text);
}

.btn-mark-read.read:hover {
  background: var(--btn-read-hover);
  transform: scale(1.05);
}

/* Images */
img {
  max-width: 100%;
  height: auto !important;
  border: 2px solid var(--border-color);
}

/* Filter bar */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.filter-bar form {
  margin: 0;
}

/* Filter links */
.filter-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

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

.filter-link:hover {
  text-decoration: underline;
}

.filter-link.filter-active {
  font-weight: 700;
  color: var(--link-active);
  text-decoration: none;
  cursor: default;
}

/* Links in body text */
a {
  color: var(--link-color);
}

/* Feed management form inputs */
.feed-url-input {
  width: 300px;
}

.bulk-urls-textarea {
  width: 500px;
  display: block;
  margin-top: 5px;
}

/* Text inputs and textareas */
input[type="text"],
input[type="url"],
textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-family: var(--font-family);
}

/* Export/Import section */
.export-section {
  margin: 1rem 0;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--surface-muted);
}

.export-section summary {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.export-section-body {
  padding: 0.5rem 0.75rem 0.75rem;
}

.export-section-body h4 {
  margin: 0.75rem 0 0.25rem;
}

.copy-urls-btn {
  margin-top: 0.25rem;
}

/* Header controls (theme + font size) - overrides in header section above */

.header-controls select {
  background: var(--select-bg);
  color: var(--select-text);
  border: 1px solid var(--select-border);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  font-family: var(--font-family);
  cursor: pointer;
  min-height: 2rem;
}

.font-size-btn {
  background: none;
  border: 1px solid var(--select-border);
  color: var(--header-link);
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-family);
  min-height: 2rem;
  min-width: 2rem;
}

.font-size-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.pagination-btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--link-color);
  text-decoration: none;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.pagination-btn:hover:not(.disabled) {
  background: var(--btn-hover);
}

.pagination-btn.disabled {
  color: var(--text-meta);
  opacity: 0.4;
  cursor: default;
}

.pagination-page {
  font-size: 0.85rem;
  color: var(--text-meta);
}

/* Page header with ASCII logo */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ascii-logo {
  font-size: 0.55rem;
  line-height: 1.1;
  color: var(--text-meta);
  margin: 0;
  user-select: none;
}

.bottom-mark-read {
  text-align: center;
  margin: 1rem 0;
}

/* Login page */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 1rem;
}

.login-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 2rem;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 2px 8px var(--card-shadow);
  text-align: center;
}

.login-card .ascii-logo {
  margin-bottom: 1.5rem;
  display: inline-block;
  text-align: left;
}

.login-form {
  text-align: left;
}

.login-field {
  margin-bottom: 1rem;
}

.login-field label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-meta);
  margin-bottom: 0.25rem;
}

.login-field input {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font-size: 1rem;
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-family: var(--font-family);
  box-sizing: border-box;
}

.login-field input:focus {
  outline: none;
  border-color: var(--btn-primary);
}

.login-submit {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  background: var(--btn-primary);
  color: var(--btn-primary-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-family);
  margin-top: 0.5rem;
}

.login-submit:hover {
  background: var(--btn-primary-hover);
}

.login-error {
  color: var(--btn-danger);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Responsive styles */
@media (max-width: 600px) {
  .ascii-logo {
    display: none;
  }
  main {
    padding: 0.5rem;
  }

  .item {
    padding: 0.5rem 0;
  }

  header {
    padding: 0.4rem 0.5rem;
  }

  .meta {
    flex-direction: row;
  }
}