:root {
  --bg-primary: #282828;
  --bg-secondary: #282828;
  --bg-tertiary: #404040;
  --text-primary: #ebdbb2;
  --text-secondary: #bdae93;
  --text-link: #d65d0e;
  --accent: #d65d0e;
  --accent-hover: #d65d0e;
  --accent-secondary: #8ec07c;
  --accent-tertiary: #83a598;
  --accent-video: #fb4934;
  --border: #d65d0e;
  --menu-bg: #282828;
  --menu-text: #ebdbb2;
  --dropdown-bg: #404040;
  --logo-primary: #fbf1c7;
  --logo-secondary: #d65d0e;
  --logo-hover-primary: #d65d0e;
  --logo-hover-secondary: #fbf1c7;
  --hamburger-color: #ebdbb2;
}

[data-theme-family="gruvbox"][data-theme-variant="light"] {
  --bg-primary: #fbf1c7;
  --bg-secondary: #f2e5bc;
  --bg-tertiary: #ebdbb2;
  --text-primary: #3c3836;
  --text-secondary: #504945;
  --text-link: #fb6a16;
  --accent: #fb6a16;
  --accent-hover: #f73028;
  --accent-secondary: #aab01e;
  --accent-tertiary: #719586;
  --accent-video: #f73028;
  --border: #fb6a16;
  --menu-bg: #ebdbb2;
  --menu-text: #3c3836;
  --dropdown-bg: #d5c4a1;
  --logo-primary: #3c3836;
  --logo-secondary: #fb6a16;
  --logo-hover-primary: #f73028;
  --logo-hover-secondary: #3c3836;
  --hamburger-color: #3c3836;
}

[data-theme-family="everforest"][data-theme-variant="dark"] {
  --bg-primary: #2d353b;
  --bg-secondary: #343f44;
  --bg-tertiary: #475258;
  --text-primary: #d3c6aa;
  --text-secondary: #859289;
  --text-link: #a7c080;
  --accent: #a7c080;
  --accent-hover: #83c092;
  --accent-secondary: #dbbc7f;
  --accent-tertiary: #7fbbb3;
  --accent-video: #e67e80;
  --border: #a7c080;
  --menu-bg: #2d353b;
  --menu-text: #d3c6aa;
  --dropdown-bg: #475258;
  --logo-primary: #d3c6aa;
  --logo-secondary: #a7c080;
  --logo-hover-primary: #a7c080;
  --logo-hover-secondary: #d3c6aa;
  --hamburger-color: #d3c6aa;
}

[data-theme-family="everforest"][data-theme-variant="light"] {
  --bg-primary: #fdf6e3;
  --bg-secondary: #f4f0d9;
  --bg-tertiary: #efebd4;
  --text-primary: #5c6a72;
  --text-secondary: #7a8478;
  --text-link: #8da101;
  --accent: #8da101;
  --accent-hover: #35a77c;
  --accent-secondary: #dfa000;
  --accent-tertiary: #3a94c5;
  --accent-video: #f85552;
  --border: #8da101;
  --menu-bg: #efebd4;
  --menu-text: #5c6a72;
  --dropdown-bg: #e6e2cc;
  --logo-primary: #5c6a72;
  --logo-secondary: #8da101;
  --logo-hover-primary: #35a77c;
  --logo-hover-secondary: #5c6a72;
  --hamburger-color: #5c6a72;
}

[data-theme-family="catppuccin"][data-theme-variant="dark"] {
  --bg-primary: #1e1e2e;
  --bg-secondary: #181825;
  --bg-tertiary: #313244;
  --text-primary: #cdd6f4;
  --text-secondary: #bac2de;
  --text-link: #89b4fa;
  --accent: #89b4fa;
  --accent-hover: #74c7ec;
  --accent-secondary: #a6e3a1;
  --accent-tertiary: #fab387;
  --accent-video: #f38ba8;
  --border: #89b4fa;
  --menu-bg: #1e1e2e;
  --menu-text: #cdd6f4;
  --dropdown-bg: #313244;
  --logo-primary: #cdd6f4;
  --logo-secondary: #89b4fa;
  --logo-hover-primary: #89b4fa;
  --logo-hover-secondary: #cdd6f4;
  --hamburger-color: #cdd6f4;
}

[data-theme-family="catppuccin"][data-theme-variant="light"] {
  --bg-primary: #eff1f5;
  --bg-secondary: #e6e9ef;
  --bg-tertiary: #dce0e8;
  --text-primary: #4c4f69;
  --text-secondary: #5c5f77;
  --text-link: #1e66f5;
  --accent: #1e66f5;
  --accent-hover: #04a5e5;
  --accent-secondary: #40a02b;
  --accent-tertiary: #fe640b;
  --accent-video: #d20f39;
  --border: #1e66f5;
  --menu-bg: #dce0e8;
  --menu-text: #4c4f69;
  --dropdown-bg: #bcc0cc;
  --logo-primary: #4c4f69;
  --logo-secondary: #1e66f5;
  --logo-hover-primary: #04a5e5;
  --logo-hover-secondary: #4c4f69;
  --hamburger-color: #4c4f69;
}

[data-theme-family="high-contrast"][data-theme-variant="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #111111;
  --bg-tertiary: #333333;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-link: #00ffff;
  --accent: #00ffff;
  --accent-hover: #ffff00;
  --accent-secondary: #00ff00;
  --accent-tertiary: #ff00ff;
  --accent-video: #ff0000;
  --border: #00ffff;
  --menu-bg: #000000;
  --menu-text: #ffffff;
  --dropdown-bg: #333333;
  --logo-primary: #ffffff;
  --logo-secondary: #00ffff;
  --logo-hover-primary: #00ffff;
  --logo-hover-secondary: #ffffff;
  --hamburger-color: #ffffff;
}

[data-theme-family="high-contrast"][data-theme-variant="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  --bg-tertiary: #e0e0e0;
  --text-primary: #000000;
  --text-secondary: #333333;
  --text-link: #0000ff;
  --accent: #0000ff;
  --accent-hover: #ff0000;
  --accent-secondary: #008000;
  --accent-tertiary: #ff00ff;
  --accent-video: #cc0000;
  --border: #0000ff;
  --menu-bg: #e0e0e0;
  --menu-text: #000000;
  --dropdown-bg: #d0d0d0;
  --logo-primary: #000000;
  --logo-secondary: #0000ff;
  --logo-hover-primary: #0000ff;
  --logo-hover-secondary: #000000;
  --hamburger-color: #000000;
}

[data-theme-family="oxocarbon"][data-theme-variant="dark"] {
  --bg-primary: #161616;
  --bg-secondary: #262626;
  --bg-tertiary: #393939;
  --text-primary: #f4f4f4;
  --text-secondary: #c6c6c6;
  --text-link: #33b1ff;
  --accent: #33b1ff;
  --accent-hover: #42be65;
  --accent-secondary: #42be65;
  --accent-tertiary: #be95ff;
  --accent-video: #ff7eb6;
  --border: #33b1ff;
  --menu-bg: #161616;
  --menu-text: #f4f4f4;
  --dropdown-bg: #393939;
  --logo-primary: #f4f4f4;
  --logo-secondary: #33b1ff;
  --logo-hover-primary: #33b1ff;
  --logo-hover-secondary: #f4f4f4;
  --hamburger-color: #f4f4f4;
}

[data-theme-family="oxocarbon"][data-theme-variant="light"] {
  --bg-primary: #f2f4f8;
  --bg-secondary: #dde1e6;
  --bg-tertiary: #525252;
  --text-primary: #161616;
  --text-secondary: #393939;
  --text-link: #0f62fe;
  --accent: #0f62fe;
  --accent-hover: #ee5396;
  --accent-secondary: #42be65;
  --accent-tertiary: #be95ff;
  --accent-video: #ee5396;
  --border: #0f62fe;
  --menu-bg: #dde1e6;
  --menu-text: #161616;
  --dropdown-bg: #c1c7cd;
  --logo-primary: #161616;
  --logo-secondary: #0f62fe;
  --logo-hover-primary: #ee5396;
  --logo-hover-secondary: #161616;
  --hamburger-color: #161616;
}

[data-theme-family="dracula"][data-theme-variant="dark"] {
  --bg-primary: #282a36;
  --bg-secondary: #44475a;
  --bg-tertiary: #6272a4;
  --text-primary: #f8f8f2;
  --text-secondary: #6272a4;
  --text-link: #ff79c6;
  --accent: #ff79c6;
  --accent-hover: #bd93f9;
  --accent-secondary: #50fa7b;
  --accent-tertiary: #8be9fd;
  --accent-video: #ff5555;
  --border: #ff79c6;
  --menu-bg: #282a36;
  --menu-text: #f8f8f2;
  --dropdown-bg: #44475a;
  --logo-primary: #f8f8f2;
  --logo-secondary: #ff79c6;
  --logo-hover-primary: #ff79c6;
  --logo-hover-secondary: #f8f8f2;
  --hamburger-color: #f8f8f2;
}

[data-theme-family="dracula"][data-theme-variant="light"] {
  --bg-primary: #f8f8f2;
  --bg-secondary: #e6e6fa;
  --bg-tertiary: #d1d5db;
  --text-primary: #282a36;
  --text-secondary: #44475a;
  --text-link: #bd1550;
  --accent: #bd1550;
  --accent-hover: #8b2635;
  --accent-secondary: #287c3e;
  --accent-tertiary: #14b8a6;
  --accent-video: #e63946;
  --border: #bd1550;
  --menu-bg: #d1d5db;
  --menu-text: #282a36;
  --dropdown-bg: #c4c9d0;
  --logo-primary: #282a36;
  --logo-secondary: #bd1550;
  --logo-hover-primary: #bd1550;
  --logo-hover-secondary: #282a36;
  --hamburger-color: #282a36;
}

[data-theme-family="nord"][data-theme-variant="dark"] {
  --bg-primary: #2e3440;
  --bg-secondary: #3b4252;
  --bg-tertiary: #434c5e;
  --text-primary: #eceff4;
  --text-secondary: #d8dee9;
  --text-link: #88c0d0;
  --accent: #88c0d0;
  --accent-hover: #81a1c1;
  --accent-secondary: #a3be8c;
  --accent-tertiary: #b48ead;
  --accent-video: #bf616a;
  --border: #88c0d0;
  --menu-bg: #2e3440;
  --menu-text: #eceff4;
  --dropdown-bg: #434c5e;
  --logo-primary: #eceff4;
  --logo-secondary: #88c0d0;
  --logo-hover-primary: #88c0d0;
  --logo-hover-secondary: #eceff4;
  --hamburger-color: #eceff4;
}

[data-theme-family="nord"][data-theme-variant="light"] {
  --bg-primary: #eceff4;
  --bg-secondary: #e5e9f0;
  --bg-tertiary: #d8dee9;
  --text-primary: #2e3440;
  --text-secondary: #3b4252;
  --text-link: #5e81ac;
  --accent: #5e81ac;
  --accent-hover: #81a1c1;
  --accent-secondary: #a3be8c;
  --accent-tertiary: #b48ead;
  --accent-video: #bf616a;
  --border: #5e81ac;
  --menu-bg: #d8dee9;
  --menu-text: #2e3440;
  --dropdown-bg: #cbd2d9;
  --logo-primary: #2e3440;
  --logo-secondary: #5e81ac;
  --logo-hover-primary: #81a1c1;
  --logo-hover-secondary: #2e3440;
  --hamburger-color: #2e3440;
}

[data-theme-family="rosepine"][data-theme-variant="dark"] {
  --bg-primary: #191724;
  --bg-secondary: #1f1d2e;
  --bg-tertiary: #26233a;
  --text-primary: #e0def4;
  --text-secondary: #908caa;
  --text-link: #ebbcba;
  --accent: #ebbcba;
  --accent-hover: #f6c177;
  --accent-secondary: #9ccfd8;
  --accent-tertiary: #c4a7e7;
  --accent-video: #eb6f92;
  --border: #ebbcba;
  --menu-bg: #191724;
  --menu-text: #e0def4;
  --dropdown-bg: #26233a;
  --logo-primary: #e0def4;
  --logo-secondary: #ebbcba;
  --logo-hover-primary: #ebbcba;
  --logo-hover-secondary: #e0def4;
  --hamburger-color: #e0def4;
}

[data-theme-family="rosepine"][data-theme-variant="light"] {
  --bg-primary: #faf4ed;
  --bg-secondary: #fffaf3;
  --bg-tertiary: #f2e9e1;
  --text-primary: #575279;
  --text-secondary: #797593;
  --text-link: #d7827e;
  --accent: #d7827e;
  --accent-hover: #ea9d34;
  --accent-secondary: #56949f;
  --accent-tertiary: #907aa9;
  --accent-video: #b4637a;
  --border: #d7827e;
  --menu-bg: #f2e9e1;
  --menu-text: #575279;
  --dropdown-bg: #f4ede8;
  --logo-primary: #575279;
  --logo-secondary: #d7827e;
  --logo-hover-primary: #ea9d34;
  --logo-hover-secondary: #575279;
  --hamburger-color: #575279;
}

[data-theme-family="tokyonight"][data-theme-variant="dark"] {
  --bg-primary: #1a1b26;
  --bg-secondary: #16161e;
  --bg-tertiary: #24283b;
  --text-primary: #c0caf5;
  --text-secondary: #9aa5ce;
  --text-link: #7aa2f7;
  --accent: #7aa2f7;
  --accent-hover: #bb9af7;
  --accent-secondary: #9ece6a;
  --accent-tertiary: #7dcfff;
  --accent-video: #f7768e;
  --border: #7aa2f7;
  --menu-bg: #1a1b26;
  --menu-text: #c0caf5;
  --dropdown-bg: #24283b;
  --logo-primary: #c0caf5;
  --logo-secondary: #7aa2f7;
  --logo-hover-primary: #7aa2f7;
  --logo-hover-secondary: #c0caf5;
  --hamburger-color: #c0caf5;
}

[data-theme-family="tokyonight"][data-theme-variant="light"] {
  --bg-primary: #e1e2e7;
  --bg-secondary: #e9e9ec;
  --bg-tertiary: #c4c8da;
  --text-primary: #3760bf;
  --text-secondary: #6172b0;
  --text-link: #2e7de9;
  --accent: #2e7de9;
  --accent-hover: #188092;
  --accent-secondary: #587539;
  --accent-tertiary: #9854f1;
  --accent-video: #f52a65;
  --border: #2e7de9;
  --menu-bg: #c4c8da;
  --menu-text: #3760bf;
  --dropdown-bg: #b6bbd1;
  --logo-primary: #3760bf;
  --logo-secondary: #2e7de9;
  --logo-hover-primary: #188092;
  --logo-hover-secondary: #3760bf;
  --hamburger-color: #3760bf;
}

[data-theme-family="solarized"][data-theme-variant="dark"] {
  --bg-primary: #002b36;
  --bg-secondary: #073642;
  --bg-tertiary: #586e75;
  --text-primary: #839496;
  --text-secondary: #657b83;
  --text-link: #268bd2;
  --accent: #268bd2;
  --accent-hover: #2aa198;
  --accent-secondary: #859900;
  --accent-tertiary: #6c71c4;
  --accent-video: #dc322f;
  --border: #268bd2;
  --menu-bg: #002b36;
  --menu-text: #839496;
  --dropdown-bg: #073642;
  --logo-primary: #839496;
  --logo-secondary: #268bd2;
  --logo-hover-primary: #268bd2;
  --logo-hover-secondary: #839496;
  --hamburger-color: #839496;
}

[data-theme-family="solarized"][data-theme-variant="light"] {
  --bg-primary: #fdf6e3;
  --bg-secondary: #eee8d5;
  --bg-tertiary: #93a1a1;
  --text-primary: #657b83;
  --text-secondary: #839496;
  --text-link: #268bd2;
  --accent: #268bd2;
  --accent-hover: #2aa198;
  --accent-secondary: #859900;
  --accent-tertiary: #6c71c4;
  --accent-video: #dc322f;
  --border: #268bd2;
  --menu-bg: #eee8d5;
  --menu-text: #657b83;
  --dropdown-bg: #e4ddc7;
  --logo-primary: #657b83;
  --logo-secondary: #268bd2;
  --logo-hover-primary: #2aa198;
  --logo-hover-secondary: #657b83;
  --hamburger-color: #657b83;
}

[data-theme-family="monokai"][data-theme-variant="dark"] {
  --bg-primary: #272822;
  --bg-secondary: #383830;
  --bg-tertiary: #49483e;
  --text-primary: #f8f8f2;
  --text-secondary: #75715e;
  --text-link: #a6e22e;
  --accent: #a6e22e;
  --accent-hover: #f92672;
  --accent-secondary: #fd971f;
  --accent-tertiary: #ae81ff;
  --accent-video: #f92672;
  --border: #a6e22e;
  --menu-bg: #272822;
  --menu-text: #f8f8f2;
  --dropdown-bg: #49483e;
  --logo-primary: #f8f8f2;
  --logo-secondary: #a6e22e;
  --logo-hover-primary: #a6e22e;
  --logo-hover-secondary: #f8f8f2;
  --hamburger-color: #f8f8f2;
}

[data-theme-family="monokai"][data-theme-variant="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e8e8e8;
  --text-primary: #272822;
  --text-secondary: #75715e;
  --text-link: #669900;
  --accent: #669900;
  --accent-hover: #cc1f5a;
  --accent-secondary: #ff6600;
  --accent-tertiary: #8e24aa;
  --accent-video: #cc1f5a;
  --border: #669900;
  --menu-bg: #e8e8e8;
  --menu-text: #272822;
  --dropdown-bg: #dcdcdc;
  --logo-primary: #272822;
  --logo-secondary: #669900;
  --logo-hover-primary: #669900;
  --logo-hover-secondary: #272822;
  --hamburger-color: #272822;
}

[data-theme-family="ayu"][data-theme-variant="dark"] {
  --bg-primary: #0f1419;
  --bg-secondary: #0d1016;
  --bg-tertiary: #272d38;
  --text-primary: #bfbdb6;
  --text-secondary: #828997;
  --text-link: #e6b450;
  --accent: #e6b450;
  --accent-hover: #ff8f40;
  --accent-secondary: #39bae6;
  --accent-tertiary: #8b5cf6;
  --accent-video: #f07178;
  --border: #e6b450;
  --menu-bg: #0f1419;
  --menu-text: #bfbdb6;
  --dropdown-bg: #272d38;
  --logo-primary: #bfbdb6;
  --logo-secondary: #e6b450;
  --logo-hover-primary: #e6b450;
  --logo-hover-secondary: #bfbdb6;
  --hamburger-color: #bfbdb6;
}

[data-theme-family="ayu"][data-theme-variant="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f3f3;
  --text-primary: #5c6773;
  --text-secondary: #828c99;
  --text-link: #f29718;
  --accent: #ff6a00;
  --accent-hover: #ff7733;
  --accent-secondary: #86b300;
  --accent-tertiary: #4cbf99;
  --accent-video: #ff3333;
  --border: #ff6a00;
  --menu-bg: #f3f3f3;
  --menu-text: #5c6773;
  --dropdown-bg: #e8e8e8;
  --logo-primary: #5c6773;
  --logo-secondary: #ff6a00;
  --logo-hover-primary: #f29718;
  --logo-hover-secondary: #5c6773;
  --hamburger-color: #5c6773;
}

[data-theme-family="onedark"][data-theme-variant="dark"] {
  --bg-primary: #282c34;
  --bg-secondary: #21252b;
  --bg-tertiary: #2c313a;
  --text-primary: #abb2bf;
  --text-secondary: #5c6370;
  --text-link: #61afef;
  --accent: #61afef;
  --accent-hover: #56b6c2;
  --accent-secondary: #98c379;
  --accent-tertiary: #c678dd;
  --accent-video: #e06c75;
  --border: #61afef;
  --menu-bg: #282c34;
  --menu-text: #abb2bf;
  --dropdown-bg: #2c313a;
  --logo-primary: #abb2bf;
  --logo-secondary: #61afef;
  --logo-hover-primary: #61afef;
  --logo-hover-secondary: #abb2bf;
  --hamburger-color: #abb2bf;
}

[data-theme-family="onedark"][data-theme-variant="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f0f0f0;
  --bg-tertiary: #e5e5e5;
  --text-primary: #383a42;
  --text-secondary: #696c77;
  --text-link: #4078f2;
  --accent: #4078f2;
  --accent-hover: #0184bc;
  --accent-secondary: #50a14f;
  --accent-tertiary: #a626a4;
  --accent-video: #e45649;
  --border: #4078f2;
  --menu-bg: #e5e5e5;
  --menu-text: #383a42;
  --dropdown-bg: #d0d0d0;
  --logo-primary: #383a42;
  --logo-secondary: #4078f2;
  --logo-hover-primary: #0184bc;
  --logo-hover-secondary: #383a42;
  --hamburger-color: #383a42;
}

[data-theme-family="nightowl"][data-theme-variant="dark"] {
  --bg-primary: #011627;
  --bg-secondary: #001122;
  --bg-tertiary: #0b2942;
  --text-primary: #d6deeb;
  --text-secondary: #637777;
  --text-link: #82aaff;
  --accent: #82aaff;
  --accent-hover: #7fdbca;
  --accent-secondary: #c792ea;
  --accent-tertiary: #addb67;
  --accent-video: #ef5350;
  --border: #82aaff;
  --menu-bg: #011627;
  --menu-text: #d6deeb;
  --dropdown-bg: #0b2942;
  --logo-primary: #d6deeb;
  --logo-secondary: #82aaff;
  --logo-hover-primary: #82aaff;
  --logo-hover-secondary: #d6deeb;
  --hamburger-color: #d6deeb;
}

[data-theme-family="nightowl"][data-theme-variant="light"] {
  --bg-primary: #fbfbfb;
  --bg-secondary: #f0f0f0;
  --bg-tertiary: #e0e0e0;
  --text-primary: #403f53;
  --text-secondary: #989fb1;
  --text-link: #4876d6;
  --accent: #4876d6;
  --accent-hover: #0c969b;
  --accent-secondary: #994cc3;
  --accent-tertiary: #697098;
  --accent-video: #de3d3b;
  --border: #4876d6;
  --menu-bg: #e0e0e0;
  --menu-text: #403f53;
  --dropdown-bg: #d0d0d0;
  --logo-primary: #403f53;
  --logo-secondary: #4876d6;
  --logo-hover-primary: #0c969b;
  --logo-hover-secondary: #403f53;
  --hamburger-color: #403f53;
}

[data-theme-family="palenight"][data-theme-variant="dark"] {
  --bg-primary: #292d3e;
  --bg-secondary: #232635;
  --bg-tertiary: #34324a;
  --text-primary: #a6accd;
  --text-secondary: #676e95;
  --text-link: #82aaff;
  --accent: #82aaff;
  --accent-hover: #89ddff;
  --accent-secondary: #c3e88d;
  --accent-tertiary: #c792ea;
  --accent-video: #f07178;
  --border: #82aaff;
  --menu-bg: #292d3e;
  --menu-text: #a6accd;
  --dropdown-bg: #34324a;
  --logo-primary: #a6accd;
  --logo-secondary: #82aaff;
  --logo-hover-primary: #82aaff;
  --logo-hover-secondary: #a6accd;
  --hamburger-color: #a6accd;
}

[data-theme-family="palenight"][data-theme-variant="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #e7e7e7;
  --text-primary: #272727;
  --text-secondary: #676e95;
  --text-link: #6182b8;
  --accent: #6182b8;
  --accent-hover: #39adb5;
  --accent-secondary: #91b859;
  --accent-tertiary: #7c4dff;
  --accent-video: #e53935;
  --border: #6182b8;
  --menu-bg: #e7e7e7;
  --menu-text: #272727;
  --dropdown-bg: #d0d0d0;
  --logo-primary: #272727;
  --logo-secondary: #6182b8;
  --logo-hover-primary: #39adb5;
  --logo-hover-secondary: #272727;
  --hamburger-color: #272727;
}

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

::selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

::-moz-selection {
  background-color: var(--accent);
  color: var(--bg-primary);
}

.link-post ::selection {
  background-color: var(--accent-secondary);
  color: var(--bg-primary);
}

.link-post ::-moz-selection {
  background-color: var(--accent-secondary);
  color: var(--bg-primary);
}

.image-post ::selection {
  background-color: var(--accent-tertiary);
  color: var(--bg-primary);
}

.image-post ::-moz-selection {
  background-color: var(--accent-tertiary);
  color: var(--bg-primary);
}

.video-post ::selection {
  background-color: var(--accent-video);
  color: var(--bg-primary);
}

.video-post ::-moz-selection {
  background-color: var(--accent-video);
  color: var(--bg-primary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-secondary);
}

.post-title a {
  color: var(--text-primary);
}

.post-title a:hover {
  color: var(--text-link);
}

.post-meta a {
  color: var(--text-primary);
}

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

.post-content a {
  color: var(--text-link);
}

.post-content a:hover {
  color: var(--accent-hover);
}

.calls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
  margin: 2rem 0;
}

.calls a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.calls a:hover {
  color: var(--accent);
}

.calls img {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  object-fit: contain;
  vertical-align: middle;
}

.calls h5 {
  display: inline-block !important;
  height: 1.5em !important;
  line-height: 1.5em !important;
  margin: 3px !important;
  font-size: 1rem;
  font-weight: 500;
}

.calls img.rss-icon {
  height: 0.8em !important;
  width: auto !important;
}

.calls img.email-icon {
  height: 0.9em !important;
  width: auto !important;
}

@media (max-width: 768px) {
  .calls {
    flex-direction: column;
    gap: 1rem;
  }

  .calls h5 {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .calls {
    gap: 0.75rem;
  }

  .calls h5 {
    font-size: 0.85rem;
  }

  .calls img {
    width: 1.2em;
    height: 1.2em;
  }
}

.navigation-menu ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-menu li {
  background-color: var(--accent);
  margin-left: 1rem;
}

.navigation-menu li a {
  display: block;
  padding: 0.3rem 0.8rem;
  color: var(--bg-primary);
  text-decoration: none;
}

.navigation-menu li a:hover {
  color: var(--text-primary);
}

.logo {
    font-weight: bold;
    margin: 0 !important;
    background-color: var(--bg-primary);
    font-family: "Anton", sans-serif;
    padding: 1.5em 0 0 0;
    text-align: center;
    width: 100%;
    line-height: 0.5;
    margin-top: 0;
    margin-bottom: -0.2em;
}

.logo .matts {
    color: var(--logo-primary);
    font-size: 6em;
    letter-spacing: 0.12em;
    display: inline-block;
    line-height: 0.8;
    margin: 0;
    padding: 0;
}

.logo .blog {
    color: var(--logo-secondary);
    font-size: 6em;
    letter-spacing: 0.12em;
    display: inline-block;
    line-height: 0.8;
    margin: 0;
    padding: 0;
}

a:hover .logo .matts {
    color: var(--logo-hover-primary);
    font-size: 6em;
    letter-spacing: 0.12em;
}

a:hover .logo .blog {
    color: var(--logo-hover-secondary);
    font-size: 6em;
    letter-spacing: 0.12em;
}

@media (max-width: 1200px) {
    .logo .matts, .logo .blog, a:hover .logo .matts, a:hover .logo .blog {
        font-size: 5em;
    }
}

@media (max-width: 992px) {
    .logo .matts, .logo .blog, a:hover .logo .matts, a:hover .logo .blog {
        font-size: 4em;
    }
}

@media (max-width: 768px) {
    .logo .matts, .logo .blog, a:hover .logo .matts, a:hover .logo .blog {
        font-size: 3em;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 576px) {
    .logo .matts, .logo .blog, a:hover .logo .matts, a:hover .logo .blog {
        font-size: 2.5em;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 400px) {
    .logo .matts, .logo .blog, a:hover .logo .matts, a:hover .logo .blog {
        font-size: 2em;
        letter-spacing: 0.04em;
    }
}

details {
  margin-bottom: 1em;
}

details summary {
  font-size: 1.4em;
  font-weight: bold;
  margin: 1em 0;
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  display: none;
}

details summary::before {
  content: "► ";
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.3s ease;
  transform-origin: center;
}

details[open] summary::before {
  transform: rotate(90deg);
}

details .content {
  padding: 0.5em 1em;
  margin-bottom: 1em;
}

/* Smooth animation for all collapsible details elements */
details > *:not(summary) {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
}

details[open] > *:not(summary) {
  max-height: 5000px;
  opacity: 1;
  transform: translateY(0);
}

/* Override max-height for archives year sections to accommodate large lists */
.year-section[open] > *:not(summary) {
  max-height: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAST.FM DASHBOARD STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.lastfm-dashboard {
  --lfm-accent: var(--accent);
  --lfm-bg-card: color-mix(in srgb, var(--background) 90%, var(--color) 10%);
  --lfm-border: color-mix(in srgb, var(--background) 70%, var(--color) 30%);
  max-width: 100%;
}

/* Now Playing Card */
.lfm-now-playing {
  margin-bottom: 1.5rem;
}

.lfm-np-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--lfm-bg-card);
  border: 1px solid var(--lfm-border);
  border-radius: 8px;
}

.lfm-np-art {
  position: relative;
  flex-shrink: 0;
}

.lfm-np-art img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.lfm-playing-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
  padding: 3px;
  background: rgba(0,0,0,0.7);
  border-radius: 3px;
}

.lfm-bar {
  width: 3px;
  background: var(--lfm-accent);
  animation: lfm-bounce 0.5s ease-in-out infinite alternate;
}

.lfm-bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.lfm-bar:nth-child(2) { height: 100%; animation-delay: 0.1s; }
.lfm-bar:nth-child(3) { height: 40%; animation-delay: 0.2s; }

@keyframes lfm-bounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

.lfm-np-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lfm-np-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  margin-bottom: 0.25rem;
}

.lfm-np-track {
  font-size: 1.25rem;
  margin: 0 0 0.25rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lfm-np-track a {
  color: inherit;
  text-decoration: none;
  border: none;
}

.lfm-np-track a:hover {
  color: var(--lfm-accent);
}

.lfm-np-artist {
  margin: 0;
  font-size: 1rem;
  opacity: 0.9;
}

.lfm-np-album {
  margin: 0.25rem 0 0 0;
  font-size: 0.875rem;
  opacity: 0.7;
  font-style: italic;
}

.lfm-np-time {
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 0.5rem;
}

/* Quick Stats Grid */
.lfm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.lfm-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: var(--lfm-bg-card);
  border: 1px solid var(--lfm-border);
  border-radius: 8px;
  text-align: center;
}

.lfm-stat-value {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1;
  color: var(--lfm-accent);
}

.lfm-stat-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Section Styles */
.lfm-section {
  margin-bottom: 2rem;
}

.lfm-section-title {
  font-size: 1rem;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--lfm-border);
}

/* Daily Activity Bar Chart */
.lfm-daily-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 120px;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--lfm-bg-card);
  border: 1px solid var(--lfm-border);
  border-radius: 8px;
}

.lfm-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.lfm-day-bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lfm-day-bar {
  width: 80%;
  max-width: 40px;
  background: var(--lfm-accent);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.lfm-day-label {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.lfm-day-count {
  font-size: 0.65rem;
  opacity: 0.5;
}

/* Hourly Listening Clock */
.lfm-hourly-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: 0.5rem;
  background: var(--lfm-bg-card);
  border: 1px solid var(--lfm-border);
  border-radius: 8px;
}

.lfm-hour {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lfm-accent);
  border-radius: 3px;
  font-size: 0.65rem;
  cursor: default;
}

.lfm-hour-label {
  color: var(--background);
  font-weight: bold;
}

/* Featured Item (Top #1) */
.lfm-featured {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--lfm-bg-card);
  border: 1px solid var(--lfm-border);
  border-radius: 8px;
}

.lfm-featured-art {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.lfm-artist-img {
  border-radius: 50%;
}

.lfm-featured-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lfm-rank {
  font-size: 0.7rem;
  font-weight: bold;
  opacity: 0.5;
  text-transform: uppercase;
}

.lfm-featured-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
  border: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lfm-featured-title:hover {
  color: var(--lfm-accent);
}

.lfm-featured-artist {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* List Items (#2-10) */
.lfm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: lfm-counter 1;
}

.lfm-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--lfm-border);
  counter-increment: lfm-counter;
}

.lfm-list-item::before {
  content: counter(lfm-counter);
  font-size: 0.75rem;
  opacity: 0.5;
  min-width: 1.5em;
  text-align: right;
}

.lfm-list-item:last-child {
  border-bottom: none;
}

.lfm-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.lfm-thumb-round {
  border-radius: 50%;
}

.lfm-list-item a {
  color: inherit;
  text-decoration: none;
  border: none;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lfm-list-item a:hover {
  color: var(--lfm-accent);
}

.lfm-artist {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.lfm-badge {
  font-size: 0.75rem;
  padding: 0.15em 0.5em;
  background: var(--lfm-accent);
  color: var(--background);
  border-radius: 1em;
  white-space: nowrap;
  margin-left: auto;
}

/* Footer */
.lfm-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--lfm-border);
  text-align: center;
}

.lfm-updated {
  font-size: 0.75rem;
  opacity: 0.5;
  margin: 0;
}

.lfm-profile {
  font-size: 0.85rem;
  margin: 0.5rem 0 0 0;
}

.lfm-profile a {
  color: var(--lfm-accent);
  text-decoration: none;
  border: none;
}

.lfm-profile a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 500px) {
  .lfm-np-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lfm-np-art img {
    width: 160px;
    height: 160px;
  }

  .lfm-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .lfm-hourly-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .lfm-featured {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lfm-featured-art {
    width: 120px;
    height: 120px;
  }

  .lfm-artist {
    display: none;
  }
}

/* Legacy support for old .lastfm class */
.lastfm h3 { margin-top: 1.25rem; }
.lastfm ol { padding-left: 1.25rem; }
.lastfm li { margin: .15rem 0; display: list-item; }
.lastfm .badge { display:inline-block; margin-left:.35rem; padding:0 .5em; border-radius:.75em; font-size:.85em; opacity:.9; border:1px solid currentColor; }
.lastfm .lastfm-updated { opacity:.7; font-size:.9em; margin-bottom:.25rem; }
.lastfm em { opacity:.8; }

/* ═══════════════════════════════════════════════════════════════════════════
   LISTENBRAINZ DASHBOARD STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.lb-dashboard {
  --lb-accent: var(--accent);
  --lb-bg-card: var(--bg-tertiary);
  --lb-border: var(--border);
  max-width: 100%;
  margin-top: 0;
}

/* Styled Tooltips */
.lb-tooltip {
  position: relative;
  cursor: default;
}

.lb-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 0.6rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--lb-border);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.lb-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--lb-border);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 101;
}

.lb-tooltip:hover::after,
.lb-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Tooltip positioning for hourly grid (show below) */
.lb-hourly-grid .lb-tooltip::after {
  bottom: auto;
  top: calc(100% + 6px);
  z-index: 200;
  filter: none;
}

.lb-hourly-grid .lb-tooltip::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: var(--lb-border);
  z-index: 201;
  filter: none;
}

/* Reset filter on hover so tooltip is fully visible */
.lb-hour:hover {
  filter: opacity(1);
}

/* Now Playing Card */
.lb-now-playing {
  margin-bottom: 1rem;
}

.lb-np-card {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-np-art {
  position: relative;
  flex-shrink: 0;
}

.lb-np-art img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.lb-playing-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 16px;
  padding: 3px;
  background: rgba(0,0,0,0.7);
  border-radius: 3px;
}

.lb-bar {
  width: 3px;
  background: var(--lb-accent);
  animation: lb-bounce 0.5s ease-in-out infinite alternate;
}

.lb-bar:nth-child(1) { height: 60%; animation-delay: 0s; }
.lb-bar:nth-child(2) { height: 100%; animation-delay: 0.1s; }
.lb-bar:nth-child(3) { height: 40%; animation-delay: 0.2s; }

@keyframes lb-bounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

.lb-np-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0;
}

.lb-np-info > * {
  margin: 0;
  padding: 0;
}

.lb-np-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  line-height: 1.2;
}

.lb-np-track {
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.lb-np-artist {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.2;
}

.lb-np-album {
  font-size: 0.8rem;
  opacity: 0.65;
  font-style: italic;
  line-height: 1.2;
}

.lb-np-time {
  font-size: 0.7rem;
  opacity: 0.5;
  line-height: 1.2;
}

/* Quick Stats Grid */
.lb-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lb-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.35rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
  text-align: center;
}

.lb-stat-value {
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
  color: var(--lb-accent);
}

.lb-stat-label {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Section Styles */
.lb-section {
  margin-bottom: 1.5rem;
}

.lb-section-title {
  font-size: 1rem;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--lb-border);
}

/* Daily Activity Bar Chart */
.lb-daily-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100px;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.lb-day-bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lb-day-bar {
  width: 80%;
  max-width: 40px;
  background: var(--lb-accent);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}

.lb-day-label {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.lb-day-count {
  font-size: 0.65rem;
  opacity: 0.5;
}

/* Yearly Activity Chart */
.lb-yearly-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 80px;
  gap: 0.2rem;
  padding: 0.5rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
  overflow-x: auto;
}

.lb-month {
  flex: 1;
  min-width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.lb-month-bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.lb-month-bar {
  width: 90%;
  background: var(--lb-accent);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.lb-month-label {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-top: 0.3rem;
}

/* Hourly Listening Clock */
.lb-hourly-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  padding: 0.5rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-hour {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lb-accent);
  border-radius: 3px;
  font-size: 0.65rem;
  cursor: default;
  position: relative;
  filter: opacity(var(--hour-opacity, 1));
}

.lb-hour-label {
  color: var(--bg-primary);
  font-weight: bold;
}

.lb-chart-note {
  font-size: 0.7rem;
  opacity: 0.5;
  margin: 0.5rem 0 0 0;
  text-align: center;
}

/* Day of Week Horizontal Bar Chart */
.lb-dow-chart {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-dow-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.5rem;
}

.lb-dow-label {
  font-size: 0.75rem;
  opacity: 0.7;
  text-align: right;
}

.lb-dow-bar-container {
  height: 1rem;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.lb-dow-bar {
  height: 100%;
  background: var(--lb-accent);
  border-radius: 3px;
  min-width: 2px;
}

.lb-dow-count {
  font-size: 0.7rem;
  opacity: 0.6;
  text-align: left;
}

/* Peak Insights */
.lb-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}

.lb-insight-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-insight-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.lb-insight-info {
  display: flex;
  flex-direction: column;
}

.lb-insight-value {
  font-size: 1rem;
  font-weight: bold;
  color: var(--lb-accent);
  line-height: 1.2;
}

.lb-insight-label {
  font-size: 0.65rem;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Featured Item (Top #1) */
.lb-featured {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem;
  background: var(--lb-bg-card);
  border: 1px solid var(--lb-border);
  border-radius: 6px;
}

.lb-featured-art {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.lb-featured-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.lb-featured-info .lb-badge {
  align-self: flex-start;
  margin-top: 0.25rem;
}

/* Override grid for artist cards (no image) */
.lb-featured-no-art,
.lb-featured:has(.lb-artist-featured) {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.lb-artist-featured {
  padding: 0.25rem 0;
}

.lb-artist-featured .lb-featured-title {
  font-size: 1rem;
}

.lb-featured-no-art .lb-badge {
  align-self: center;
  margin: 0;
  justify-self: end;
}

.lb-rank {
  font-size: 0.6rem;
  font-weight: bold;
  color: var(--lb-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lb-featured-title {
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.lb-featured-artist {
  font-size: 0.8rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* List Items (#2-10) */
.lb-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: lb-counter 1;
}

.lb-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--lb-border);
  counter-increment: lb-counter;
}

.lb-list-item::before {
  content: counter(lb-counter);
  font-size: 0.75rem;
  opacity: 0.5;
  min-width: 1.5em;
  text-align: right;
}

.lb-list-item:last-child {
  border-bottom: none;
}

.lb-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.lb-track-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-artist {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.lb-badge {
  font-size: 0.75rem;
  padding: 0.15em 0.5em;
  background: var(--lb-accent);
  color: var(--background);
  border-radius: 1em;
  white-space: nowrap;
  margin-left: auto;
}

/* Footer */
.lb-footer {
  margin-top: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--lb-border);
  text-align: center;
}

.lb-updated {
  font-size: 0.75rem;
  opacity: 0.5;
  margin: 0;
}

.lb-profile {
  font-size: 0.85rem;
  margin: 0.5rem 0 0 0;
}

.lb-profile a {
  color: var(--lb-accent);
  text-decoration: none;
  border: none;
}

.lb-profile a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 500px) {
  .lb-np-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .lb-np-art img {
    width: 100px;
    height: 100px;
  }

  .lb-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .lb-hourly-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .lb-featured {
    grid-template-columns: 40px 1fr auto;
    gap: 0.35rem;
  }

  .lb-featured-art {
    width: 40px;
    height: 40px;
  }

  .lb-artist {
    display: none;
  }

  .lb-yearly-chart {
    height: 60px;
  }

  .lb-insights {
    grid-template-columns: 1fr;
  }

  .lb-insight-card {
    padding: 0.4rem;
  }
}

a.read-more,
a.read-more:hover,
a.read-more:active {
  display: inline-flex;
  border: none;
  color: var(--accent);
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 20px 0;
  max-width: 100%;
  text-align: right;
}

.new-menu .menu-items {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.new-menu li {
  background-color: var(--menu-bg);
  margin-left: 1rem;
  font-family: "Anton", sans-serif;
  font-size: 1.3em;
}

.new-menu li a {
  display: block;
  padding: 0.3rem 0.8rem;
  color: var(--menu-text);
  text-decoration: none;
}

.new-menu li a:hover {
  background-color: var(--accent);
  color: var(--bg-primary);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 30px;
}

.hamburger {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--hamburger-color);
  transition: all 0.3s ease;
}

/* Sticky menu on desktop - applies to both top and bottom positions */
@media (min-width: 769px) {
  .menu-position-top,
  .menu-position-bottom {
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--bg-primary);
  }

  .menu-position-top {
    padding: 10px 0 0 0;
    margin-bottom: 5px;
  }

  .menu-position-bottom {
    padding: 10px 0;
    margin-bottom: 40px;
  }

  /* Non-sticky menu when position is "none" */
  .menu-position-none {
    padding: 10px 0;
    margin-bottom: 40px;
  }
}

@media (max-width: 768px) {
  .menu-toggle {
    display: flex;
  }

  .new-menu .menu-items {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--menu-bg);
    border-top: 1px solid var(--accent);
    z-index: 1000;
  }

  .new-menu .menu-items.active {
    display: flex;
  }

  .new-menu {
    position: relative;
  }

  .new-menu li {
    margin: 0;
    border-bottom: 1px solid var(--bg-tertiary);
  }

  .new-menu li:last-child {
    border-bottom: none;
  }

  .new-menu li a {
    padding: 1rem;
    text-align: center;
  }

  .dropdown {
    margin: 0;
  }

  .dropdown-content {
    position: static;
    box-shadow: none;
    border: none;
    width: 100%;
    background-color: var(--menu-bg);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    visibility: hidden;
  }

  .dropdown-content a {
    padding: 0.8rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--bg-tertiary);
    font-size: 0.9em;
    display: block;
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }

  .dropdown-content a:last-child {
    border-bottom: none;
  }

  .dropdown.show .dropdown-content {
    max-height: none;
    opacity: 1;
    visibility: visible;
  }
}

.myfoot ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.myfoot li {
  background-color: var(--menu-bg);
  margin-left: 1rem;
  font-family: "Anton", sans-serif;
  font-size: 1.3em;
}

.myfoot li a {
  display: block;
  padding: 0.3rem 0.8rem;
  color: var(--menu-text);
  text-decoration: none;
}

.myfoot li a:hover {
  background-color: var(--accent);
  color: var(--bg-primary);
}

@media (max-width: 768px) {
  .myfoot li {
    font-size: 1.1em;
    margin: 0.5rem 0.5rem;
  }

  .myfoot li a {
    padding: 0.4rem 0.6rem;
  }
}

@media (max-width: 480px) {
  .myfoot ul {
    gap: 0.5rem;
  }

  .myfoot li {
    font-size: 0.95em;
    margin: 0.25rem 0.25rem;
  }

  .myfoot li a {
    padding: 0.3rem 0.5rem;
  }
}

.dropdown {
  position: relative;
  background-color: var(--menu-bg);
  margin-left: 1rem;
  font-family: "Anton", sans-serif;
  font-size: 1.3em;
}

.dropdown-content {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background-color: var(--dropdown-bg);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  top: 100%;
  left: 0;
  border: 1px solid var(--border);
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.dropdown-content a {
  color: var(--menu-text);
  padding: 0.3rem 0.8rem;
  text-decoration: none;
  display: block;
  font-family: "Anton", sans-serif;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

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

.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--accent);
  color: var(--bg-primary);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 1001;
  outline: none;
}

.theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-icon {
  transition: transform 0.3s ease;
}

.theme-toggle.light .theme-icon {
  transform: rotate(180deg);
}

@media (max-width: 768px) {
  .theme-toggle {
    display: none;
  }
}

.theme-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.theme-toggle-button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.theme-toggle-button:hover {
  color: var(--accent);
  background: none !important;
}

.theme-options {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 8px;
  margin-bottom: 4px;
  min-width: 120px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.theme-switcher.open .theme-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-option {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  padding: 4px 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s ease;
}

.theme-options .theme-option:hover {
  background: var(--accent);
  color: var(--bg-primary);
}

.theme-options .theme-option.active {
  background: var(--accent);
  color: var(--bg-primary);
}

@media (max-width: 768px) {
  .theme-switcher {
    display: none;
  }
}

.link-post .post-title:after {
  border-bottom-color: var(--accent-secondary) !important;
}

.link-post .post-meta {
  color: var(--accent-secondary) !important;
}

.link-post .read-more {
  color: var(--accent-secondary) !important;
}

.link-description-callout {
  background-color: var(--bg-tertiary);
  border-left: 4px solid var(--accent-secondary);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 4px;
  font-style: italic;
  color: var(--text-primary);
}

[data-theme-family="solarized"] .link-description-callout {
  color: var(--bg-primary);
}

.link-description-callout p:last-child {
  margin-bottom: 0;
}

.link-attribution {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--text-secondary);
}

.link-attribution a {
  color: var(--accent-secondary);
  text-decoration: none;
  font-weight: 500;
}

.link-attribution a:hover {
  text-decoration: underline;
}

.link-post-button a {
  background-color: var(--accent-secondary) !important;
  color: var(--bg-primary) !important;
  border-color: var(--accent-secondary) !important;
}

.link-post .post-title a:hover {
  color: var(--accent-secondary) !important;
}

.image-post .post-title:after {
  border-bottom-color: var(--accent-tertiary) !important;
}

.image-post .post-meta {
  color: var(--accent-tertiary) !important;
}

.image-post .read-more {
  color: var(--accent-tertiary) !important;
}

.image-post .post-title a:hover {
  color: var(--accent-tertiary) !important;
}

.image-post .image-preview {
  margin: 1.5rem 0;
}

.image-post .preview-image {
  width: 100%;
  max-width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.image-post .image-caption-preview {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-tertiary);
}

.image-post .image-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-tertiary);
  background-color: var(--bg-primary) !important;
  text-align: center;
}

.image-post figcaption {
  background-color: var(--bg-primary) !important;
}

.image-post-preview .image-caption-preview {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-tertiary);
  background-color: var(--bg-primary) !important;
}

.image-post-preview figcaption,
.image-post-preview .image-caption {
  background-color: var(--bg-primary) !important;
}

.video-post .post-title:after {
  border-bottom-color: var(--accent-video) !important;
}

.video-post .post-meta {
  color: var(--accent-video) !important;
}

.video-post .read-more {
  color: var(--accent-video) !important;
}

.video-post .post-title a:hover {
  color: var(--accent-video) !important;
}

.video-post .video-embed {
  margin: 1.5rem 0;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-post .video-embed iframe,
.video-post .video-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.video-post .video-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-video);
  background-color: var(--bg-primary) !important;
  text-align: center;
}

.video-post figcaption {
  background-color: var(--bg-primary) !important;
}

.video-post-preview .video-caption-preview {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--accent-video);
  background-color: var(--bg-primary) !important;
}

.video-post-preview figcaption,
.video-post-preview .video-caption {
  background-color: var(--bg-primary) !important;
}

.video-post .video-container {
  width: 100%;
  margin: 2rem 0;
}

.video-post .video-figure {
  width: 100%;
  max-width: 100%;
  display: block !important;
  margin: 0;
}

.video-post .featured-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.video-post .featured-video iframe,
.video-post .featured-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

/* Archives styling for link and image posts */
.archives .post-list li.link-post .post-link {
  color: var(--accent-secondary);
}

.archives .post-list li.link-post .post-link:hover {
  color: var(--accent-secondary);
  text-decoration: underline;
}

.archives .post-list li.image-post .post-link {
  color: var(--accent-tertiary);
}

.archives .post-list li.image-post .post-link:hover {
  color: var(--accent-tertiary);
  text-decoration: underline;
}

.archives .post-list li.video-post .post-link {
  color: var(--accent-video);
}

.archives .post-list li.video-post .post-link:hover {
  color: var(--accent-video);
  text-decoration: underline;
}

/* FediComment theming - replaces Hyvor comments */
.fedicomment-load-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: var(--accent);
  color: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.fedicomment-load-btn:hover:not(:disabled) {
  background-color: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.fedicomment-load-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.fedicomment-wrapper {
  margin-top: 20px;
}

.fedicomment-reply-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  transition: all 0.2s ease;
}

.fedicomment-reply-btn:hover {
  background-color: var(--accent);
  color: var(--bg-primary);
}

.fedicomment-no-comments {
  color: var(--text-secondary);
  font-style: italic;
  margin: 20px 0;
}

.fedicomment-comments {
  margin-top: 20px;
}

.fedicomment-comment {
  margin-bottom: 20px;
  padding: 16px;
  background-color: var(--bg-secondary);
  border-radius: 4px;
  border-left: 3px solid var(--border);
  transition: all 0.2s ease;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

.fedicomment-comment:hover {
  background-color: var(--bg-tertiary);
}

.fedicomment-comment[data-depth="0"] {
  border-left-color: var(--accent);
}

.fedicomment-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.fedicomment-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.fedicomment-avatar {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  display: block;
}

.fedicomment-collapse-btn {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent);
  color: var(--bg-primary);
  border: 2px solid var(--bg-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  font-weight: bold;
}

.fedicomment-collapse-btn:hover {
  background-color: var(--accent-hover);
  transform: scale(1.1);
}

.fedicomment-collapsed .fedicomment-body {
  display: none;
}

.fedicomment-collapsed {
  opacity: 0.7;
}

.fedicomment-author-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

.fedicomment-display-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.fedicomment-username {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
  flex-shrink: 1;
  min-width: 0;
}

.fedicomment-username:hover {
  color: var(--accent);
  text-decoration: underline;
}

.fedicomment-timestamp {
  font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  margin-left: auto;
}

.fedicomment-timestamp:hover {
  color: var(--accent);
  text-decoration: underline;
}

.fedicomment-content {
  margin-left: 60px;
  line-height: 1.6;
  color: var(--text-primary);
  word-wrap: break-word;
}

.fedicomment-content p {
  margin: 0 0 12px 0;
}

.fedicomment-content p:last-child {
  margin-bottom: 0;
}

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

.fedicomment-content a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.fedicomment-emoji {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 2px;
}

.fedicomment-footer {
  margin-left: 60px;
  margin-top: 8px;
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fedicomment-favs,
.fedicomment-boosts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fedicomment-replies {
  margin-left: 40px;
  margin-top: 12px;
  padding-left: 16px;
  border-left: 2px solid var(--border);
}

/* Limit indentation after depth 3 to prevent comments becoming too narrow */
.fedicomment-comment[data-depth="4"] .fedicomment-replies,
.fedicomment-comment[data-depth="5"] .fedicomment-replies,
.fedicomment-comment[data-depth="6"] .fedicomment-replies,
.fedicomment-comment[data-depth="7"] .fedicomment-replies,
.fedicomment-comment[data-depth="8"] .fedicomment-replies,
.fedicomment-comment[data-depth="9"] .fedicomment-replies,
.fedicomment-comment[data-depth="10"] .fedicomment-replies {
  margin-left: 0;
  padding-left: 16px;
}

@media (max-width: 768px) {
  .fedicomment-comment {
    padding: 12px;
  }

  .fedicomment-avatar {
    width: 40px;
    height: 40px;
  }

  .fedicomment-content {
    margin-left: 52px;
  }

  .fedicomment-footer {
    margin-left: 52px;
  }

  .fedicomment-replies {
    margin-left: 20px;
    padding-left: 12px;
  }

  /* Even more aggressive indentation limiting on mobile */
  .fedicomment-comment[data-depth="3"] .fedicomment-replies,
  .fedicomment-comment[data-depth="4"] .fedicomment-replies,
  .fedicomment-comment[data-depth="5"] .fedicomment-replies,
  .fedicomment-comment[data-depth="6"] .fedicomment-replies,
  .fedicomment-comment[data-depth="7"] .fedicomment-replies,
  .fedicomment-comment[data-depth="8"] .fedicomment-replies,
  .fedicomment-comment[data-depth="9"] .fedicomment-replies,
  .fedicomment-comment[data-depth="10"] .fedicomment-replies {
    margin-left: 0;
    padding-left: 12px;
  }
}

/* Series Navigation */
.series-container {
  margin: 2rem 0;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.series-details {
  margin: 0;
}

.series-summary {
  cursor: pointer;
  list-style: none;
  padding-bottom: 0.5rem;
  margin: 0 0 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.series-summary::-webkit-details-marker {
  display: none;
}

.series-summary::marker {
  display: none;
}

.series-summary::before {
  display: none !important;
}

.series-title {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: bold;
  display: block;
  margin-bottom: 0.25rem;
}

.series-title::before {
  content: "► ";
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.2s ease;
  transform-origin: 0.35em 0.5em;
}

.series-details[open] .series-title::before {
  transform: rotate(90deg);
}

.series-count {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: normal;
  display: block;
  margin-left: 1.6em;
}

.series-list {
  list-style: none;
  counter-reset: series-counter;
  padding: 0;
  margin: 0;
}

.series-item {
  counter-increment: series-counter;
  margin: 0.4rem 0;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  border-radius: 3px;
  position: relative;
  transition: all 0.2s ease;
}

.series-item::before {
  content: counter(series-counter) ".";
  position: absolute;
  left: -1.2rem;
  color: var(--text-secondary);
  font-weight: bold;
  font-size: 0.85rem;
}

.series-item.series-current {
  background: var(--bg-primary);
  border: 1px solid var(--accent);
  padding: 0.5rem 0.75rem;
}

.series-link {
  color: var(--accent);
  text-decoration: none;
  display: block;
  transition: all 0.2s ease;
  font-size: 0.95rem;
}

.series-link:hover {
  color: var(--accent-hover);
  transform: translateX(3px);
}

.series-link-current {
  color: var(--text-primary);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
}

.series-indicator {
  color: var(--accent);
  font-weight: bold;
  margin-right: 0.2rem;
}

.series-badge {
  margin-left: auto;
  padding: 0.2rem 0.5rem;
  background: var(--accent);
  color: var(--bg-primary);
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.series-hidden {
  display: none;
}

.series-list.series-expanded .series-hidden {
  display: list-item;
}

.series-expand-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  background: var(--accent);
  color: var(--bg-primary);
  border: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  text-align: center;
}

.series-expand-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.series-expand-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .series-container {
    padding: 0.75rem;
    margin: 1.5rem 0;
  }

  .series-summary {
    font-size: 1rem;
  }

  .series-title {
    font-size: 1rem;
  }

  .series-badge {
    display: block;
    margin-left: 0;
    margin-top: 0.4rem;
    text-align: center;
    width: fit-content;
  }

  .series-link-current {
    flex-wrap: wrap;
  }

  .series-expand-btn {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }
}

/* Series List Shortcode */
.series-list-container {
  margin: 2rem 0;
}

.series-list-heading {
  margin-bottom: 2rem;
  color: var(--text-primary);
  font-size: 2rem;
  text-align: center;
}

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.series-card {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.series-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.series-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.series-card-title {
  margin: 0 0 0.5rem 0;
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: bold;
  transition: color 0.2s ease;
}

.series-card:hover .series-card-title {
  color: var(--accent-hover);
}

.series-card-count {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
}

.series-card-posts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.series-card-post {
  color: var(--text-primary);
  font-size: 0.95rem;
  padding-left: 1rem;
  position: relative;
}

.series-card-post::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.series-card-more {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-style: italic;
  padding-left: 1rem;
}

.series-list-empty {
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
  padding: 2rem;
}

@media (max-width: 768px) {
  .series-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .series-list-heading {
    font-size: 1.5rem;
  }

  .series-card {
    padding: 1rem;
  }

  .series-card-title {
    font-size: 1.2rem;
  }
}

/* FediComment counter link styling - blend with metadata */
.fedicomment-counter-link {
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer;
}

.fedicomment-counter-link:hover {
  text-decoration: underline !important;
}