/* ===== Reset & Base ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Surfaces — Everforest Light (default) */
    --bg: #f3ead3;
    --bg-card: #fdf6e3;
    --bg-sidebar: #f3ead3;

    /* Borders */
    --border: #d5c4a1;
    --border-light: #e6ddc6;
    --border-hover: #c4b393;

    /* Typography */
    --text: #5c6a72;
    --text-secondary: #829181;
    --text-muted: #a6b0a0;

    /* Accent */
    --accent: #8da101;
    --accent-hover: #93b259;
    --bg-on-accent: #fdf6e3;

    /* Tags */
    --tag-bg: #eae2cc;
    --tag-bg-hover: #ddd5bf;
    --tag-active-bg: #8da101;
    --tag-active-text: #fdf6e3;
    --tag-hover-brightness: 0.92;

    /* Semantic colors */
    --red: #f85552;
    --red-hover: #e66868;
    --red-bg: rgba(248,85,82,0.1);
    --green: #8da101;
    --blue: #3a94c5;

    /* Code */
    --code-text: #5c6a72;
    --codeblock-bg: #eae2cc;
    --codeblock-text: #5c6a72;

    /* Search highlight */
    --mark-bg: rgba(223,174,73,0.3);
    --mark-text: #dfa44a;

    /* Status badges */
    --badge-unreviewed-bg: rgba(223,174,73,0.2);
    --badge-unreviewed-text: #dfa44a;
    --badge-approved-bg: rgba(141,161,1,0.15);
    --badge-approved-text: #8da101;

    /* Action button hovers */
    --action-approve-bg: rgba(141,161,1,0.15);
    --action-approve-text: #8da101;
    --action-rename-bg: rgba(58,148,197,0.15);
    --action-rename-text: #3a94c5;
    --action-delete-bg: rgba(248,85,82,0.1);
    --action-delete-text: #f85552;

    /* Install hint */
    --install-btn-bg: #fdf6e3;
    --install-btn-bg-hover: #eae2cc;
    --install-btn-text: #5c6a72;
    --install-dismiss: rgba(92,106,114,0.5);
    --install-dismiss-hover: #5c6a72;

    /* Overlay */
    --overlay-bg: rgba(0,0,0,0.3);

    /* CodeMirror */
    --cm-bg: #fdf6e3;
    --cm-text: #5c6a72;
    --cm-cursor: #5c6a72;
    --cm-selection: rgba(141,161,1,0.2);

    /* Layout */
    --sidebar-width: 280px;
    --feed-max: 640px;

    /* Design tokens */
    --radius: 8px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --transition: 150ms ease;
}

/* Per-note color swatches. Theme-independent: each card mixes its swatch with
   the active theme's --bg-card, so these hues read well on light and dark
   cards. Keys match NOTE_COLORS in app.js and .note-card[data-color="..."]. */
:root {
    --swatch-red: #e06c75;
    --swatch-orange: #d19a66;
    --swatch-yellow: #e5c07b;
    --swatch-green: #98c379;
    --swatch-blue: #61afef;
    --swatch-purple: #c678dd;
}

/* ===== Everforest Light (alias for stored value) ===== */
html[data-theme="everforest-light"] {
    --bg: #f3ead3;
    --bg-card: #fdf6e3;
    --bg-sidebar: #f3ead3;
    --border: #d5c4a1;
    --border-light: #e6ddc6;
    --border-hover: #c4b393;
    --text: #5c6a72;
    --text-secondary: #829181;
    --text-muted: #a6b0a0;
    --accent: #8da101;
    --accent-hover: #93b259;
    --bg-on-accent: #fdf6e3;
    --tag-bg: #eae2cc;
    --tag-bg-hover: #ddd5bf;
    --tag-active-bg: #8da101;
    --tag-active-text: #fdf6e3;
    --tag-hover-brightness: 0.92;
    --red: #f85552;
    --red-hover: #e66868;
    --red-bg: rgba(248,85,82,0.1);
    --green: #8da101;
    --blue: #3a94c5;
    --code-text: #5c6a72;
    --codeblock-bg: #eae2cc;
    --codeblock-text: #5c6a72;
    --mark-bg: rgba(223,174,73,0.3);
    --mark-text: #dfa44a;
    --badge-unreviewed-bg: rgba(223,174,73,0.2);
    --badge-unreviewed-text: #dfa44a;
    --badge-approved-bg: rgba(141,161,1,0.15);
    --badge-approved-text: #8da101;
    --action-approve-bg: rgba(141,161,1,0.15);
    --action-approve-text: #8da101;
    --action-rename-bg: rgba(58,148,197,0.15);
    --action-rename-text: #3a94c5;
    --action-delete-bg: rgba(248,85,82,0.1);
    --action-delete-text: #f85552;
    --install-btn-bg: #fdf6e3;
    --install-btn-bg-hover: #eae2cc;
    --install-btn-text: #5c6a72;
    --install-dismiss: rgba(92,106,114,0.5);
    --install-dismiss-hover: #5c6a72;
    --overlay-bg: rgba(0,0,0,0.3);
    --cm-bg: #fdf6e3;
    --cm-text: #5c6a72;
    --cm-cursor: #5c6a72;
    --cm-selection: rgba(141,161,1,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== Everforest Dark ===== */
html[data-theme="everforest-dark"] {
    --bg: #272e33;
    --bg-card: #2d353b;
    --bg-sidebar: #272e33;
    --border: #374145;
    --border-light: #2d353b;
    --border-hover: #4a555b;
    --text: #d3c6aa;
    --text-secondary: #9da9a0;
    --text-muted: #7a8478;
    --accent: #a7c080;
    --accent-hover: #83c092;
    --bg-on-accent: #272e33;
    --tag-bg: #374145;
    --tag-bg-hover: #4a555b;
    --tag-active-bg: #a7c080;
    --tag-active-text: #272e33;
    --tag-hover-brightness: 1.15;
    --red: #e67e80;
    --red-hover: #e06c6e;
    --red-bg: rgba(230,126,128,0.12);
    --green: #a7c080;
    --blue: #7fbbb3;
    --code-text: #d3c6aa;
    --codeblock-bg: #272e33;
    --codeblock-text: #9da9a0;
    --mark-bg: rgba(219,188,127,0.25);
    --mark-text: #dbbc7f;
    --badge-unreviewed-bg: rgba(219,188,127,0.15);
    --badge-unreviewed-text: #dbbc7f;
    --badge-approved-bg: rgba(167,192,128,0.15);
    --badge-approved-text: #a7c080;
    --action-approve-bg: rgba(167,192,128,0.15);
    --action-approve-text: #a7c080;
    --action-rename-bg: rgba(127,187,179,0.15);
    --action-rename-text: #7fbbb3;
    --action-delete-bg: rgba(230,126,128,0.12);
    --action-delete-text: #e67e80;
    --install-btn-bg: #374145;
    --install-btn-bg-hover: #4a555b;
    --install-btn-text: #d3c6aa;
    --install-dismiss: rgba(211,198,170,0.35);
    --install-dismiss-hover: #d3c6aa;
    --overlay-bg: rgba(0,0,0,0.5);
    --cm-bg: #2d353b;
    --cm-text: #d3c6aa;
    --cm-cursor: #d3c6aa;
    --cm-selection: rgba(167,192,128,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.45);
}

/* ===== Solarized Light ===== */
html[data-theme="solarized-light"] {
    --bg: #eee8d5;
    --bg-card: #fdf6e3;
    --bg-sidebar: #eee8d5;
    --border: #d3cbb7;
    --border-light: #e6dfcc;
    --border-hover: #c0b8a4;
    --text: #657b83;
    --text-secondary: #839496;
    --text-muted: #93a1a1;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --bg-on-accent: #fdf6e3;
    --tag-bg: #e6dfcc;
    --tag-bg-hover: #d3cbb7;
    --tag-active-bg: #268bd2;
    --tag-active-text: #fdf6e3;
    --tag-hover-brightness: 0.92;
    --red: #dc322f;
    --red-hover: #cb4b16;
    --red-bg: rgba(220,50,47,0.1);
    --green: #859900;
    --blue: #268bd2;
    --code-text: #657b83;
    --codeblock-bg: #e6dfcc;
    --codeblock-text: #657b83;
    --mark-bg: rgba(181,137,0,0.25);
    --mark-text: #b58900;
    --badge-unreviewed-bg: rgba(181,137,0,0.15);
    --badge-unreviewed-text: #b58900;
    --badge-approved-bg: rgba(133,153,0,0.15);
    --badge-approved-text: #859900;
    --action-approve-bg: rgba(133,153,0,0.15);
    --action-approve-text: #859900;
    --action-rename-bg: rgba(38,139,210,0.15);
    --action-rename-text: #268bd2;
    --action-delete-bg: rgba(220,50,47,0.1);
    --action-delete-text: #dc322f;
    --install-btn-bg: #fdf6e3;
    --install-btn-bg-hover: #e6dfcc;
    --install-btn-text: #657b83;
    --install-dismiss: rgba(101,123,131,0.5);
    --install-dismiss-hover: #657b83;
    --overlay-bg: rgba(0,0,0,0.3);
    --cm-bg: #fdf6e3;
    --cm-text: #657b83;
    --cm-cursor: #657b83;
    --cm-selection: rgba(38,139,210,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== Solarized Dark ===== */
html[data-theme="solarized-dark"] {
    --bg: #002b36;
    --bg-card: #073642;
    --bg-sidebar: #002b36;
    --border: #2a5460;
    --border-light: #0a404d;
    --border-hover: #3a6a78;
    --text: #eee8d5;
    --text-secondary: #93a1a1;
    --text-muted: #7a8f97;
    --accent: #268bd2;
    --accent-hover: #2aa198;
    --bg-on-accent: #fdf6e3;
    --tag-bg: #0a404d;
    --tag-bg-hover: #2a5460;
    --tag-active-bg: #268bd2;
    --tag-active-text: #fdf6e3;
    --tag-hover-brightness: 1.15;
    --red: #dc322f;
    --red-hover: #cb4b16;
    --red-bg: rgba(220,50,47,0.12);
    --green: #859900;
    --blue: #268bd2;
    --code-text: #eee8d5;
    --codeblock-bg: #002b36;
    --codeblock-text: #93a1a1;
    --mark-bg: rgba(181,137,0,0.3);
    --mark-text: #b58900;
    --badge-unreviewed-bg: rgba(181,137,0,0.2);
    --badge-unreviewed-text: #b58900;
    --badge-approved-bg: rgba(133,153,0,0.2);
    --badge-approved-text: #859900;
    --action-approve-bg: rgba(133,153,0,0.2);
    --action-approve-text: #859900;
    --action-rename-bg: rgba(38,139,210,0.2);
    --action-rename-text: #268bd2;
    --action-delete-bg: rgba(220,50,47,0.12);
    --action-delete-text: #dc322f;
    --install-btn-bg: #0a404d;
    --install-btn-bg-hover: #2a5460;
    --install-btn-text: #eee8d5;
    --install-dismiss: rgba(238,232,213,0.4);
    --install-dismiss-hover: #eee8d5;
    --overlay-bg: rgba(0,0,0,0.5);
    --cm-bg: #073642;
    --cm-text: #eee8d5;
    --cm-cursor: #eee8d5;
    --cm-selection: rgba(38,139,210,0.25);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.45);
}

/* ===== Gruvbox Light ===== */
html[data-theme="gruvbox-light"] {
    --bg: #f2e5bc;
    --bg-card: #fbf1c7;
    --bg-sidebar: #f2e5bc;
    --border: #d5c4a1;
    --border-light: #ebdbb2;
    --border-hover: #bdae93;
    --text: #3c3836;
    --text-secondary: #665c54;
    --text-muted: #928374;
    --accent: #79740e;
    --accent-hover: #98971a;
    --bg-on-accent: #fbf1c7;
    --tag-bg: #ebdbb2;
    --tag-bg-hover: #d5c4a1;
    --tag-active-bg: #79740e;
    --tag-active-text: #fbf1c7;
    --tag-hover-brightness: 0.92;
    --red: #cc241d;
    --red-hover: #9d0006;
    --red-bg: rgba(204,36,29,0.1);
    --green: #98971a;
    --blue: #458588;
    --code-text: #3c3836;
    --codeblock-bg: #ebdbb2;
    --codeblock-text: #3c3836;
    --mark-bg: rgba(215,153,33,0.25);
    --mark-text: #d79921;
    --badge-unreviewed-bg: rgba(215,153,33,0.15);
    --badge-unreviewed-text: #d79921;
    --badge-approved-bg: rgba(152,151,26,0.15);
    --badge-approved-text: #98971a;
    --action-approve-bg: rgba(152,151,26,0.15);
    --action-approve-text: #98971a;
    --action-rename-bg: rgba(69,133,136,0.15);
    --action-rename-text: #458588;
    --action-delete-bg: rgba(204,36,29,0.1);
    --action-delete-text: #cc241d;
    --install-btn-bg: #fbf1c7;
    --install-btn-bg-hover: #ebdbb2;
    --install-btn-text: #3c3836;
    --install-dismiss: rgba(60,56,54,0.5);
    --install-dismiss-hover: #3c3836;
    --overlay-bg: rgba(0,0,0,0.3);
    --cm-bg: #fbf1c7;
    --cm-text: #3c3836;
    --cm-cursor: #3c3836;
    --cm-selection: rgba(69,133,136,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
}

/* ===== Gruvbox Dark ===== */
html[data-theme="gruvbox-dark"] {
    --bg: #282828;
    --bg-card: #3c3836;
    --bg-sidebar: #282828;
    --border: #504945;
    --border-light: #3c3836;
    --border-hover: #665c54;
    --text: #ebdbb2;
    --text-secondary: #d5c4a1;
    --text-muted: #928374;
    --accent: #b8bb26;
    --accent-hover: #98971a;
    --bg-on-accent: #282828;
    --tag-bg: #504945;
    --tag-bg-hover: #665c54;
    --tag-active-bg: #b8bb26;
    --tag-active-text: #282828;
    --tag-hover-brightness: 1.15;
    --red: #fb4934;
    --red-hover: #cc241d;
    --red-bg: rgba(251,73,52,0.12);
    --green: #b8bb26;
    --blue: #83a598;
    --code-text: #ebdbb2;
    --codeblock-bg: #282828;
    --codeblock-text: #d5c4a1;
    --mark-bg: rgba(250,189,47,0.25);
    --mark-text: #fabd2f;
    --badge-unreviewed-bg: rgba(250,189,47,0.15);
    --badge-unreviewed-text: #fabd2f;
    --badge-approved-bg: rgba(184,187,38,0.15);
    --badge-approved-text: #b8bb26;
    --action-approve-bg: rgba(184,187,38,0.15);
    --action-approve-text: #b8bb26;
    --action-rename-bg: rgba(131,165,152,0.15);
    --action-rename-text: #83a598;
    --action-delete-bg: rgba(251,73,52,0.12);
    --action-delete-text: #fb4934;
    --install-btn-bg: #504945;
    --install-btn-bg-hover: #665c54;
    --install-btn-text: #ebdbb2;
    --install-dismiss: rgba(235,219,178,0.35);
    --install-dismiss-hover: #ebdbb2;
    --overlay-bg: rgba(0,0,0,0.5);
    --cm-bg: #3c3836;
    --cm-text: #ebdbb2;
    --cm-cursor: #ebdbb2;
    --cm-selection: rgba(184,187,38,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.45);
}

/* ===== Nord Light ===== */
html[data-theme="nord-light"] {
    --bg: #e5e9f0;
    --bg-card: #eceff4;
    --bg-sidebar: #e5e9f0;
    --border: #d8dee9;
    --border-light: #e5e9f0;
    --border-hover: #c7cdd8;
    --text: #2e3440;
    --text-secondary: #4c566a;
    --text-muted: #7b88a1;
    --accent: #5e81ac;
    --accent-hover: #81a1c1;
    --bg-on-accent: #eceff4;
    --tag-bg: #d8dee9;
    --tag-bg-hover: #c7cdd8;
    --tag-active-bg: #5e81ac;
    --tag-active-text: #eceff4;
    --tag-hover-brightness: 0.92;
    --red: #bf616a;
    --red-hover: #a5535b;
    --red-bg: rgba(191,97,106,0.1);
    --green: #a3be8c;
    --blue: #5e81ac;
    --code-text: #2e3440;
    --codeblock-bg: #d8dee9;
    --codeblock-text: #2e3440;
    --mark-bg: rgba(235,203,139,0.3);
    --mark-text: #d08770;
    --badge-unreviewed-bg: rgba(235,203,139,0.2);
    --badge-unreviewed-text: #d08770;
    --badge-approved-bg: rgba(163,190,140,0.2);
    --badge-approved-text: #698060;
    --action-approve-bg: rgba(163,190,140,0.2);
    --action-approve-text: #698060;
    --action-rename-bg: rgba(94,129,172,0.15);
    --action-rename-text: #5e81ac;
    --action-delete-bg: rgba(191,97,106,0.1);
    --action-delete-text: #bf616a;
    --install-btn-bg: #eceff4;
    --install-btn-bg-hover: #d8dee9;
    --install-btn-text: #2e3440;
    --install-dismiss: rgba(46,52,64,0.5);
    --install-dismiss-hover: #2e3440;
    --overlay-bg: rgba(0,0,0,0.3);
    --cm-bg: #eceff4;
    --cm-text: #2e3440;
    --cm-cursor: #2e3440;
    --cm-selection: rgba(94,129,172,0.2);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== Nord Dark ===== */
html[data-theme="nord-dark"] {
    --bg: #2e3440;
    --bg-card: #3b4252;
    --bg-sidebar: #2e3440;
    --border: #434c5e;
    --border-light: #3b4252;
    --border-hover: #4c566a;
    --text: #eceff4;
    --text-secondary: #d8dee9;
    --text-muted: #8fabc7;
    --accent: #88c0d0;
    --accent-hover: #8fbcbb;
    --bg-on-accent: #2e3440;
    --tag-bg: #434c5e;
    --tag-bg-hover: #4c566a;
    --tag-active-bg: #88c0d0;
    --tag-active-text: #2e3440;
    --tag-hover-brightness: 1.15;
    --red: #bf616a;
    --red-hover: #d08770;
    --red-bg: rgba(191,97,106,0.15);
    --green: #a3be8c;
    --blue: #81a1c1;
    --code-text: #eceff4;
    --codeblock-bg: #2e3440;
    --codeblock-text: #d8dee9;
    --mark-bg: rgba(235,203,139,0.3);
    --mark-text: #ebcb8b;
    --badge-unreviewed-bg: rgba(235,203,139,0.2);
    --badge-unreviewed-text: #ebcb8b;
    --badge-approved-bg: rgba(163,190,140,0.2);
    --badge-approved-text: #a3be8c;
    --action-approve-bg: rgba(163,190,140,0.2);
    --action-approve-text: #a3be8c;
    --action-rename-bg: rgba(129,161,193,0.2);
    --action-rename-text: #81a1c1;
    --action-delete-bg: rgba(191,97,106,0.15);
    --action-delete-text: #bf616a;
    --install-btn-bg: #434c5e;
    --install-btn-bg-hover: #4c566a;
    --install-btn-text: #eceff4;
    --install-dismiss: rgba(236,239,244,0.4);
    --install-dismiss-hover: #eceff4;
    --overlay-bg: rgba(0,0,0,0.45);
    --cm-bg: #3b4252;
    --cm-text: #eceff4;
    --cm-cursor: #d8dee9;
    --cm-selection: rgba(136,192,208,0.25);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
    --shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.4);
}

/* ===== Theme Transitions ===== */
body,
.sidebar,
.main-content,
.note-card,
.focus-overlay,
.focus-body,
.tags-panel,
.auth-form,
.mobile-header,
.btn,
.tag,
.tag-status,
.sidebar-input,
.CodeMirror {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ===== Auth View ===== */
.auth-container {
    max-width: 420px;
    margin: 80px auto;
    padding: 0 20px;
    text-align: center;
}

.auth-brand-icon {
    margin-bottom: 12px;
}

.auth-logo {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text);
}

.auth-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-top: 4px;
}

.auth-features {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.auth-features li {
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-form {
    margin-top: 28px;
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
}

/* Auth Tabs */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.auth-tab {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}

.auth-tab:hover {
    color: var(--text);
}

.auth-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Input Groups */
.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
}

.input-group input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
    background: var(--bg-card);
    color: var(--text);
}

.input-group input:focus {
    border-color: var(--accent);
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
}

.password-input-wrapper input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}

.password-toggle:hover {
    color: var(--text);
}

.auth-form .btn-block {
    width: 100%;
    margin-top: 8px;
}

/* Button Loading State */
.btn-loading {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
}

/* Auth Switch Links */
.auth-switch {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Auth Forgot Password Link */
.auth-forgot {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

.auth-forgot a {
    color: var(--text-secondary);
    text-decoration: none;
}

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

.auth-magic-link {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    text-align: center;
}

.auth-magic-link a {
    color: var(--text-secondary);
    text-decoration: none;
}

.auth-magic-link a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: var(--text-muted);
    font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.auth-divider span {
    padding: 0 12px;
}

/* Google Sign-in Button */
.btn-google {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-google:hover {
    background: var(--tag-bg);
    border-color: var(--border);
}

.btn-google svg {
    flex-shrink: 0;
}

.btn-apple {
    background: #000;
    border: 1px solid #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-apple:hover {
    background: #1a1a1a;
}

.btn-apple svg {
    flex-shrink: 0;
}

/* Auth Verify Pending View */
.auth-verify-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.auth-verify-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.auth-verify-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.auth-verify-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Auth Form Title */
.auth-form-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    text-align: center;
}

.auth-form-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
}

/* Success Message */
.success-msg {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 13px;
    padding: 8px 12px;
    color: var(--green);
    background: var(--green-bg);
    border-radius: var(--radius-sm);
}

/* Auth Form Error */
.auth-form .error-msg {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Auth Form Transitions */
.auth-form .input-group,
.auth-form .btn-block,
.auth-form .auth-switch {
    transition: opacity 0.15s ease;
}

/* Password Strength Indicator */
.password-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.strength-bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

.strength-label {
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    min-width: 40px;
}

.error-msg {
    margin-top: 12px;
    font-size: 13px;
    padding: 8px 12px;
    color: var(--red);
    background: var(--red-bg);
    border-radius: var(--radius-sm);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    white-space: nowrap;
}

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

.btn-secondary {
    background: var(--tag-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--tag-bg-hover); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}
.btn-ghost:hover { background: var(--tag-bg); color: var(--text); }

.btn-danger {
    background: var(--red);
    color: var(--bg-on-accent);
}
.btn-danger:hover { background: var(--red-hover); }

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }

/* ===== App Layout ===== */
.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--border);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.brand-icon {
    flex-shrink: 0;
    border-radius: 4px;
}

.brand-logo {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
}

.brand-tagline {
    font-size: 12px;
    color: var(--text-muted);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-name {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* ===== Sidebar Nav ===== */
.sidebar-nav {
    padding: 12px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    text-align: left;
}

.nav-item:hover {
    background: var(--tag-bg);
    color: var(--text);
}

.nav-item.active {
    background: var(--tag-bg);
    color: var(--text);
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: var(--bg-on-accent);
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    margin-left: auto;
}

.badge.badge-muted {
    background: var(--text-muted);
}

/* ===== Sidebar Sections ===== */
.sidebar-section {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.sidebar-input {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    outline: none;
    margin-bottom: 8px;
    transition: border-color var(--transition);
    background: var(--bg);
    color: var(--text);
}

.sidebar-input:focus {
    border-color: var(--accent);
    background: var(--bg-card);
}

/* Match the unified search box: the border is the focus indicator, so suppress
   the inner :focus-visible ring (no double highlight). */
.sidebar-input:focus-visible {
    outline: none;
}

#tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Sidebar install button */
.sidebar-install {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
}

.sidebar-install-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    color: var(--bg-on-accent);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
}

.sidebar-install-btn:hover {
    opacity: 0.9;
}

.tag {
    display: inline-block;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    background: var(--tag-bg);
    color: var(--text-secondary);
    border-radius: 9999px;
    transition: all var(--transition);
    border: none;
    letter-spacing: 0.01em;
}

.tag.clickable { cursor: pointer; }
.tag.clickable:hover {
    background: var(--tag-bg-hover);
    color: var(--text);
}

.tag.active {
    background: var(--tag-active-bg);
    color: var(--tag-active-text);
}

.tag.clickable[style]:hover {
    filter: brightness(var(--tag-hover-brightness));
}

/* Display-only `$default` tag: muted, non-interactive, no hover/remove. */
.tag-default {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    cursor: default;
    font-style: italic;
}
.chip.tag-default {
    opacity: 0.85;
}

.show-all-tags {
    display: inline-block;
    padding: 3px 10px;
    font-size: 12px;
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--transition);
}
.show-all-tags:hover {
    background: var(--tag-bg);
    color: var(--text-secondary);
    border-color: var(--text-muted);
}

/* ===== Main Content ===== */
.main-content {
    margin-left: var(--sidebar-width);
    width: calc(100vw - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}

#notes-tab {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

#tags-tab {
    width: 100%;
    max-width: var(--feed-max);
    margin: 0 auto;
}

/* ===== New Note Trigger ===== */
.new-note-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.new-note-trigger:hover {
    border-color: var(--border-hover);
    color: var(--text-secondary);
    box-shadow: var(--shadow);
}

.new-note-trigger svg {
    color: var(--text-muted);
}

/* ===== Focus Layout Overlay ===== */
.focus-overlay {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    bottom: 0;
    z-index: 150;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px 48px 24px;
    animation: focusFadeIn 0.15s ease;
}

@keyframes focusFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.focus-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.focus-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
    min-width: 0;
}

.focus-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
}

.focus-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.focus-save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(260px, 34vw);
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.focus-save-status:empty {
    display: none;
}

.focus-save-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex: 0 0 auto;
}

.focus-save-status[data-status="saved"] {
    background: color-mix(in srgb, var(--green) 12%, var(--bg-card));
    border-color: color-mix(in srgb, var(--green) 28%, var(--border));
    color: var(--green);
}

.focus-save-status[data-status="saved"]::before {
    background: var(--green);
}

.focus-save-status[data-status="unsaved"],
.focus-save-status[data-status="saving"] {
    background: color-mix(in srgb, var(--mark-text) 12%, var(--bg-card));
    border-color: color-mix(in srgb, var(--mark-text) 30%, var(--border));
    color: var(--mark-text);
}

.focus-save-status[data-status="saving"]::before {
    animation: statusPulse 1s ease-in-out infinite;
}

.focus-save-status[data-status="unsaved"]::before,
.focus-save-status[data-status="saving"]::before {
    background: var(--mark-text);
}

.focus-save-status[data-status="invalid"],
.focus-save-status[data-status="failed"] {
    background: color-mix(in srgb, var(--red) 10%, var(--bg-card));
    border-color: color-mix(in srgb, var(--red) 28%, var(--border));
    color: var(--red);
}

.focus-save-status[data-status="invalid"]::before,
.focus-save-status[data-status="failed"]::before {
    background: var(--red);
}

@keyframes statusPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

.focus-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.focus-close:hover {
    background: var(--tag-bg);
    color: var(--text);
}

.focus-meta {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.focus-tags {
    width: 100%;
    max-width: 400px;
}

/* Chip container - wraps chips and inline input */
.chip-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: text;
    transition: border-color var(--transition);
}

.chip-container:focus-within {
    border-color: var(--accent);
}

/* Sidebar variant of chip container. The primary search & filter control is the
   hero of the sidebar: a tall, two-row box so tag pills have room to wrap and the
   content/cursor starts at the top-left like a multi-line field. */
.chip-container-sidebar {
    background: var(--bg);
    margin-bottom: 8px;
    min-height: 64px;
    padding: 10px 12px;
    align-items: flex-start;
}

.chip-container-sidebar:focus-within {
    background: var(--bg-card);
}

/* Inline text input inside chip container */
.chip-input {
    flex: 1;
    min-width: 80px;
    border: none !important;
    outline: none;
    padding: 3px 4px;
    font-size: 13px;
    font-family: inherit;
    background: transparent !important;
    color: var(--text);
    margin-bottom: 0 !important;
}

.chip-input::placeholder {
    color: var(--text-muted);
}

/* The chip container shows focus via its own :focus-within border, so suppress
   the inner input's :focus-visible ring — otherwise the box highlights twice
   (inner ring + outer border), which reads as jarring. The container border is
   the accessible focus indicator (ux_guidelines §4). */
.chip-input:focus-visible {
    outline: none;
}

/* Individual chip/pill */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.4;
    transition: all var(--transition);
    animation: chip-scale-in 150ms ease-out;
    background: var(--tag-bg);
    color: var(--text-secondary);
    border: 1px solid transparent;
    /* A long tag must not overflow the sidebar: cap to the container and let the
       label truncate so the × stays inside and clickable. */
    max-width: 100%;
    min-width: 0;
}

/* Truncate the tag text; the × button keeps its size. */
.chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.chip-remove,
.chip-new-icon {
    flex-shrink: 0;
}

/* Ghost style for new/unreviewed tags */
.chip.ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--border);
}

/* Highlight state for backspace pre-deletion */
.chip.highlighted {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
}

/* New tag "+" icon */
.chip-new-icon {
    font-size: 10px;
    opacity: 0.7;
}

/* Remove button inside chip */
.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
    color: inherit;
    opacity: 0.5;
    transition: opacity var(--transition), background var(--transition);
    font-size: 10px;
    line-height: 1;
}

.chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

/* Scale-in animation for new chips */
@keyframes chip-scale-in {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.focus-body {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.focus-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.focus-editor textarea {
    width: 100%;
    padding: 16px;
    font-size: 14px;
    font-family: inherit;
    border: none;
    outline: none;
    resize: none;
    flex: 1;
    min-height: 0;
    background: var(--bg-card);
    color: var(--text);
}

/* Focus EasyMDE overrides */
.focus-body .EasyMDEContainer {
    border: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.focus-body .EasyMDEContainer .CodeMirror {
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    flex: 1;
    height: auto;
    padding: 8px 16px;
}

.focus-body .EasyMDEContainer .CodeMirror-scroll {
    min-height: 0;
}

.focus-body .EasyMDEContainer .editor-toolbar {
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    padding: 4px 8px;
    background: var(--bg);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .focus-overlay {
        left: 0;
        padding: 16px;
    }

    .focus-tags {
        max-width: 100%;
    }
}

/* ===== Read Overlay ===== */
.read-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.read-body {
    overflow-y: auto;
    padding: 18px 22px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .read-body {
        padding: 14px 16px;
    }
}

/* ===== Autocomplete ===== */
.autocomplete-wrapper {
    position: relative;
}

.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--transition);
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--tag-bg);
}

/* Status text in autocomplete (e.g. "unreviewed") */
.autocomplete-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ===== Feed ===== */
.feed-sentinel {
    width: 100%;
    height: 1px;
}

.feed {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.feed-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    max-width: 480px;
}

.feed-empty {
    width: 100%;
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== Note Card ===== */
.note-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    transition: box-shadow var(--transition), border-color var(--transition);
    overflow: hidden;
}

.note-card:hover {
    box-shadow: var(--shadow);
    border-color: var(--border-hover);
}

.note-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.note-card-time {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.note-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}

.note-card:hover .note-card-actions {
    opacity: 1;
}

/* ===== Per-note color ===== */
/* A colored card gets a gentle full-card wash that adapts to the theme by
   mixing the chosen swatch with the theme's --bg-card. Setting --card-bg here
   keeps the collapsed "Read more" fade matched to the colored surface. */
.note-card[data-color="red"]    { --note-tint: var(--swatch-red); }
.note-card[data-color="orange"] { --note-tint: var(--swatch-orange); }
.note-card[data-color="yellow"] { --note-tint: var(--swatch-yellow); }
.note-card[data-color="green"]  { --note-tint: var(--swatch-green); }
.note-card[data-color="blue"]   { --note-tint: var(--swatch-blue); }
.note-card[data-color="purple"] { --note-tint: var(--swatch-purple); }
.note-card[data-color] {
    --card-bg: color-mix(in srgb, var(--note-tint) 14%, var(--bg-card));
    background: var(--card-bg);
    border-color: color-mix(in srgb, var(--note-tint) 40%, var(--border));
}

/* Color + Tags top row */
.note-card-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.note-card-top .note-card-tags {
    margin-bottom: 0;
}

/* Round color dot button in the card top row. */
.note-color {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

.note-color-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition);
}

.note-color-btn:hover {
    background: var(--tag-bg);
}

.note-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
}

/* None = a plain neutral ring (no slash — a slash reads as "disabled"). */
.note-color-btn[data-color=""] .note-color-dot,
.note-color-btn:not([data-color]) .note-color-dot {
    border: 1.5px solid var(--text-muted);
    background: transparent;
}

.note-color-btn[data-color="red"]    .note-color-dot { background: var(--swatch-red); }
.note-color-btn[data-color="orange"] .note-color-dot { background: var(--swatch-orange); }
.note-color-btn[data-color="yellow"] .note-color-dot { background: var(--swatch-yellow); }
.note-color-btn[data-color="green"]  .note-color-dot { background: var(--swatch-green); }
.note-color-btn[data-color="blue"]   .note-color-dot { background: var(--swatch-blue); }
.note-color-btn[data-color="purple"] .note-color-dot { background: var(--swatch-purple); }

/* Swatch popover (fixed-positioned in JS to escape card overflow clipping). */
.note-color-popover {
    position: fixed;
    z-index: 100;
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.note-color-swatch {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform var(--transition), box-shadow var(--transition);
}

.note-color-swatch:hover {
    transform: scale(1.12);
}

.note-color-swatch:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.note-color-swatch.selected {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--text);
}

.note-color-swatch[data-color=""] {
    background: var(--bg-card);
    border-color: var(--text-muted);
}

.note-color-swatch[data-color="red"]    { background: var(--swatch-red); }
.note-color-swatch[data-color="orange"] { background: var(--swatch-orange); }
.note-color-swatch[data-color="yellow"] { background: var(--swatch-yellow); }
.note-color-swatch[data-color="green"]  { background: var(--swatch-green); }
.note-color-swatch[data-color="blue"]   { background: var(--swatch-blue); }
.note-color-swatch[data-color="purple"] { background: var(--swatch-purple); }

.note-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: var(--tag-bg);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    font-size: 13px;
}

.note-card-actions button:hover {
    background: var(--tag-bg-hover);
    color: var(--text);
}

.note-card-actions .action-delete:hover {
    background: var(--action-delete-bg);
    color: var(--action-delete-text);
}

.note-card-body {
    position: relative;
}

.note-card-body.collapsed {
    max-height: 300px;
    overflow: hidden;
}

.note-card-body.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(transparent, var(--card-bg, var(--bg-card)));
    pointer-events: none;
}

.read-more-btn {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--blue);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
    font-weight: 500;
}
.read-more-btn:hover { text-decoration: underline; }

.note-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    padding-bottom: 0;
}

.note-card .tag {
    cursor: pointer;
}

.note-card .tag:hover {
    background: var(--tag-bg-hover);
    color: var(--text);
}

.note-card .tag[style]:hover {
    filter: brightness(var(--tag-hover-brightness));
}

/* ===== Markdown Rendering ===== */
.markdown {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.markdown h1, .markdown h2, .markdown h3 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: 600;
    line-height: 1.3;
}

.markdown h1 { font-size: 1.25em; }
.markdown h2 { font-size: 1.15em; }
.markdown h3 { font-size: 1.05em; }

.markdown p { margin-bottom: 8px; }
.markdown p:last-child { margin-bottom: 0; }

.markdown hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid var(--border);
}

.markdown code {
    background: var(--tag-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    color: var(--code-text);
}

.markdown pre {
    background: var(--codeblock-bg);
    color: var(--codeblock-text);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow-x: auto;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

.markdown pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
    border: none;
    white-space: pre;
}

.markdown ul, .markdown ol {
    margin: 8px 0;
    padding-left: 24px;
}

.markdown li { margin-bottom: 2px; }

.markdown blockquote {
    border-left: 3px solid var(--border);
    padding: 4px 12px;
    margin: 8px 0;
    color: var(--text-secondary);
}

.markdown img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 8px 0;
    cursor: zoom-in;
}

/* Linked images (e.g. share link cards) keep their link affordance. */
.markdown a img {
    cursor: pointer;
}

/* A run of 2+ standalone images shared at once renders as a responsive grid of
   square cells that fills the width (2–4+ columns depending on container width),
   instead of a stack of small centered thumbnails. */
.markdown .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 4px;
    margin: 8px 0;
}
.markdown .image-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin: 0;
}

/* ===== Image lightbox ===== */
/* Click any note image (including the cropped grid thumbnails) to view it full
   size. Backdrop / close button / Esc dismiss it. */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
    animation: fadeIn 120ms ease;
}

.image-lightbox.open {
    display: flex;
}

.image-lightbox-img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    cursor: default;
}

.image-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
}

.image-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.75);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.markdown a {
    color: var(--blue);
    text-decoration: none;
}
.markdown a:hover { text-decoration: underline; }

/* Rich link card (shared article links): a prominent preview image on top, with
   the domain, title, and description stacked below — like Apple Notes / WeChat
   link cards. Height grows to fit its content. */
.markdown a.link-card {
    display: flex;
    flex-direction: column;
    margin: 8px 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-card);
    color: var(--text);
    text-decoration: none;
}
.markdown a.link-card:hover {
    border-color: var(--border-hover);
    text-decoration: none;
}
.markdown a.link-card .link-card-image {
    /* Inset within the card's padding: the same horizontal margin as the
       title/description plus a matching bottom margin, so the image never
       touches a card edge. Its own rounded corners shape it inside the outer
       border. Shown at its natural aspect ratio (no crop); the feed's
       "Read more" collapse keeps a tall image from dominating the list. */
    width: auto;
    height: auto;
    max-width: calc(100% - 24px);
    margin: 8px 12px 12px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
}
.markdown a.link-card .link-card-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px 0;
}
.markdown a.link-card .link-card-globe {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--text-secondary);
    -webkit-mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
    mask: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}
.markdown a.link-card .link-card-domain {
    font-size: 0.85em;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.markdown a.link-card .link-card-title {
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    padding: 8px 12px 0;
}
.markdown a.link-card .link-card-desc {
    font-size: 0.9em;
    line-height: 1.35;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 6px 12px 0;
}
/* Bottom padding lives on the card's last text child so cards with/without a
   description close cleanly. When the image is the last child it carries its own
   12px bottom margin (see .link-card-image) for the same gap, so it is excluded
   here to avoid doubling the space. */
.markdown a.link-card > :last-child:not(.link-card-image) {
    padding-bottom: 12px;
}

.markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}

.markdown table th,
.markdown table td {
    padding: 6px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.markdown table th {
    background: var(--tag-bg);
    font-weight: 600;
}

mark {
    background: var(--mark-bg);
    color: var(--mark-text);
    padding: 1px 3px;
    border-radius: 2px;
}

/* ===== Inline Edit ===== */
.note-card-edit {
    margin-top: 12px;
}

.edit-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin-top: 12px;
}

.edit-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    outline: none;
    transition: border-color var(--transition);
    background: var(--bg-card);
    color: var(--text);
}

.edit-input:focus { border-color: var(--accent); }

.edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

/* ===== Tags Management ===== */
.tags-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
}

.tags-panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.tags-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* ===== Trash ===== */
.trash-card {
    opacity: 0.75;
}

.trash-card:hover {
    opacity: 1;
}

.trash-card-actions {
    display: flex;
    gap: 6px;
}

#trash-tab {
    width: 100%;
    max-width: none;
    align-self: stretch;
}

.tags-management-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Table header */
.tag-mgmt-header {
    display: grid;
    grid-template-columns: 2fr 1fr 0.6fr 1.2fr;
    gap: 12px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-card);
}

.tag-mgmt-header-cell {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.tag-mgmt-header-cell:nth-child(3) { text-align: center; }
.tag-mgmt-header-cell:nth-child(4) { text-align: right; }

.tag-mgmt-row {
    display: grid;
    grid-template-columns: 2fr 1fr 0.6fr 1.2fr;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition);
}

.tag-mgmt-row:last-child { border-bottom: none; }

.tag-mgmt-row:hover {
    background: var(--bg);
}

.tag-mgmt-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tag-mgmt-name .tag {
    margin: 0;
}

.tag-color-preview {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid transparent;
    flex-shrink: 0;
    transition: background 150ms ease, border-color 150ms ease;
}

.tag-mgmt-count {
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tag-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 10px;
}

.tag-status.unreviewed {
    background: var(--badge-unreviewed-bg);
    color: var(--badge-unreviewed-text);
}

.tag-status.approved {
    background: var(--badge-approved-bg);
    color: var(--badge-approved-text);
}

.tag-mgmt-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
    justify-content: flex-end;
}

.tag-mgmt-row:hover .tag-mgmt-actions {
    opacity: 1;
}

.tag-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition);
    background: transparent;
    color: var(--text-secondary);
}

.tag-action-btn svg {
    width: 14px;
    height: 14px;
}

.tag-action-btn:hover {
    background: var(--tag-bg);
    color: var(--text);
}

.approve-btn:hover { background: var(--action-approve-bg); color: var(--action-approve-text); }
.rename-btn:hover { background: var(--action-rename-bg); color: var(--action-rename-text); }
.tag-del-btn:hover { background: var(--action-delete-bg); color: var(--action-delete-text); }

/* Tag management toolbar */
.tag-mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* ===== EasyMDE Overrides ===== */
.note-card-edit .EasyMDEContainer {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.note-card-edit .EasyMDEContainer .CodeMirror {
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    min-height: 120px;
}

.note-card-edit .EasyMDEContainer .editor-toolbar {
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    padding: 4px 8px;
    background: var(--bg);
}

.EasyMDEContainer .editor-toolbar button {
    color: var(--text-secondary);
    background: transparent;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
    border: none;
    width: auto;
    height: auto;
    transition: all var(--transition);
}

.EasyMDEContainer .editor-toolbar button:hover {
    background: var(--tag-bg);
    color: var(--text);
}

.EasyMDEContainer .editor-toolbar button.active {
    background: var(--tag-bg-hover);
    color: var(--text);
}

.EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--border);
    border-right: none;
}

.EasyMDEContainer .editor-statusbar {
    display: none;
}

.EasyMDEContainer .editor-preview img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* ===== CodeMirror Theme Overrides ===== */
.CodeMirror {
    background: var(--cm-bg);
    color: var(--cm-text);
}

.CodeMirror-cursor {
    border-left-color: var(--cm-cursor);
}

.CodeMirror-focused .CodeMirror-selected,
.CodeMirror-selected {
    background: var(--cm-selection);
}

.CodeMirror-gutters {
    background-color: var(--bg);
    border-right-color: var(--border);
}

.CodeMirror-linenumber {
    color: var(--text-muted);
}

.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
    background-color: var(--cm-bg);
}

.editor-toolbar.fullscreen {
    background: var(--bg);
}

.editor-preview {
    background: var(--bg-card);
    color: var(--text);
}

.editor-preview pre {
    background: var(--codeblock-bg);
    color: var(--codeblock-text);
}

.editor-preview-side {
    border-color: var(--border);
    background: var(--bg-card);
    color: var(--text);
}

/* ===== Mobile Header ===== */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 0 16px;
    gap: 12px;
    z-index: 90;
}

.mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.mobile-menu-btn:hover { background: var(--tag-bg); }

/* ===== Install Hint ===== */
.install-hint {
    padding: 14px 20px;
    margin-bottom: 16px;
    background: var(--accent);
    color: var(--bg-on-accent);
    border-radius: var(--radius);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: var(--feed-max);
}

.install-hint-icon {
    flex-shrink: 0;
}

.install-hint-icon svg {
    display: block;
    border-radius: 6px;
}

.install-hint-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.install-hint-text strong {
    font-size: 14px;
    font-weight: 600;
}

.install-hint-sub {
    font-size: 12px;
    opacity: 0.75;
}

.install-hint-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.install-hint-actions .btn {
    font-size: 13px;
}

.install-hint-actions .btn:not(.btn-ghost) {
    background: var(--install-btn-bg);
    color: var(--install-btn-text);
}

.install-hint-actions .btn:not(.btn-ghost):hover {
    background: var(--install-btn-bg-hover);
}

/* The banner sits on --accent with light (--bg-on-accent) text, so Dismiss is a
   light translucent pill — clearly a button, readable against the green. */
.install-dismiss {
    color: var(--bg-on-accent) !important;
    background: rgba(255, 255, 255, 0.16);
}
.install-dismiss:hover {
    color: var(--bg-on-accent) !important;
    background: rgba(255, 255, 255, 0.30);
}

/* ===== Placeholder & Error ===== */
.placeholder {
    color: var(--text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

.error {
    color: var(--red);
    padding: 20px;
    text-align: center;
}

/* ===== Loading Spinner ===== */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px 20px;
    width: 100%;
}

.loading-spinner::after {
    content: '';
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn.btn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

.btn.btn-loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 6px;
}

/* ===== Sidebar Overlay (mobile) ===== */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: 99;
}

/* ===== Import Preview ===== */
.import-preview-content {
    padding: 24px;
}
.import-section {
    margin-bottom: 24px;
}
.import-section:last-child {
    margin-bottom: 0;
}
.import-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.import-section-new {
    color: var(--green);
    background: var(--badge-approved-bg);
}
.import-section-dup {
    color: var(--text-muted);
    background: var(--tag-bg);
}
.import-note-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.import-note-card {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition);
}
.import-note-card:hover {
    border-color: var(--border-hover);
}
.import-note-card.import-duplicate {
    opacity: 0.55;
}
.import-note-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.import-note-tags .tag {
    font-size: 11px;
    padding: 2px 8px;
}
.import-note-snippet {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.import-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.import-settings-info {
    padding: 10px 14px;
    background: var(--surface-1);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.import-setting-item {
    margin-right: 16px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: none;
    }

    .sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-lg);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .mobile-header {
        display: flex;
    }

    .main-content {
        margin-left: 0;
        width: 100vw;
        max-width: 100vw;
        padding: 64px 16px 24px;
    }

    #notes-tab {
        max-width: var(--feed-max);
        align-self: center;
    }

    /* Responsive tags management */
    .tag-mgmt-header {
        display: none;
    }

    .tag-mgmt-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0;
    }

    .tag-mgmt-row .tag-mgmt-name {
        flex: 1 1 100%;
        font-size: 15px;
    }

    .tag-mgmt-row .tag-status {
        flex: 0 0 auto;
    }

    .tag-mgmt-row .tag-mgmt-count {
        flex: 0 0 auto;
    }

    .tag-mgmt-row .tag-mgmt-actions {
        flex: 0 0 auto;
        opacity: 1;
    }

    .note-card-actions {
        opacity: 1;
    }
}

@media (min-width: 769px) {
    .mobile-header { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* Medium screens - simplified table */
@media (max-width: 900px) and (min-width: 769px) {
    .tag-mgmt-header,
    .tag-mgmt-row {
        grid-template-columns: 2fr 1fr 0.6fr 1.2fr;
        gap: 8px;
        padding: 8px 10px;
    }

    .tag-action-btn {
        width: 24px;
        height: 24px;
    }

    .tag-action-btn svg {
        width: 12px;
        height: 12px;
    }
}

/* ===== Toast Notifications ===== */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: toast-in 0.25s ease;
    max-width: 380px;
    word-break: break-word;
}

.toast-error {
    background: var(--red);
    color: #ffffff;
}

.toast-success {
    background: var(--green);
    color: #ffffff;
}

.toast-info {
    background: var(--accent);
    color: var(--bg-on-accent);
}

.toast-dismiss {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.toast-dismiss:hover {
    opacity: 1;
}

.toast-undo {
    background: rgba(255,255,255,0.2);
    border: none;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    padding: 3px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition);
}

.toast-undo:hover {
    background: rgba(255,255,255,0.35);
}

@keyframes toast-in {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes toast-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(16px); opacity: 0; }
}

/* ===== Modal Dialog ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: focusFadeIn 0.15s ease;
}

.modal-dialog {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
}

.modal-body {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 16px;
    line-height: 1.5;
}

.modal-input-wrap {
    margin-bottom: 16px;
}

.modal-input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    outline: none;
    background: var(--bg-card);
    color: var(--text);
    transition: border-color var(--transition);
}

.modal-input:focus {
    border-color: var(--accent);
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-actions .btn-danger {
    background: var(--red);
    color: #ffffff;
}

.modal-actions .btn-danger:hover {
    background: var(--red-hover);
}

@media (max-width: 768px) {
    #toast-container {
        bottom: 16px;
        right: 16px;
        left: 16px;
    }
    .toast {
        max-width: 100%;
    }
}

/* ===== Guest Mode ===== */

/* Guest Banner */
.guest-banner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    background: var(--accent);
    border-radius: 8px;
    margin: 12px;
    position: relative;
    animation: slideInUp 0.3s ease;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guest-banner-text {
    color: var(--bg-on-accent);
    font-size: 13px;
    line-height: 1.4;
    padding-right: 20px;
}

.guest-banner .btn-primary {
    background: var(--bg-card);
    color: var(--fg);
    border: none;
    font-size: 12px;
    padding: 8px 12px;
}

.guest-banner .btn-primary:hover {
    background: var(--bg);
}

.guest-banner-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--bg-on-accent);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 4px;
}

.guest-banner-dismiss:hover {
    opacity: 1;
}

/* Guest Limit Modal */
.guest-limit-dialog {
    text-align: center;
    max-width: 380px;
}

.guest-limit-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.guest-limit-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--fg);
    margin-bottom: 8px;
}

.guest-limit-body {
    font-size: 14px;
    color: var(--fg-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.guest-limit-dialog .modal-actions {
    justify-content: center;
}

/* Auth Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 16px 0;
    color: var(--fg-muted);
    font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    padding: 0 12px;
}

/* Guest Try Button */
.guest-try-btn {
    margin: 12px 0 16px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fg);
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--tag-bg) 0%, var(--bg-card) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.guest-try-btn::before {
    content: '✨';
    margin-right: 8px;
}

.guest-try-btn:hover {
    background: var(--accent);
    color: var(--bg-on-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.guest-try-btn:hover::before {
    content: '🚀';
}

/* Gradient Button */
.btn-gradient {
    background: var(--accent);
    color: var(--bg-on-accent);
    border: none;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    opacity: 0.85;
}

.btn-gradient:hover {
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Mobile responsive adjustments for guest banner */
@media (max-width: 768px) {
    .guest-banner {
        margin: 8px;
        padding: 12px;
    }

    .guest-banner-text {
        font-size: 12px;
    }
}

/* ===== Accessibility ===== */

/* Visible keyboard focus on every interactive element (ux_guidelines §4).
   Inputs that set outline:none get their ring back via :focus-visible, which
   only fires for keyboard focus, so pointer users see no change. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Card actions are hover-revealed; keyboard users tabbing into them must see
   them too. */
.note-card:focus-within .note-card-actions {
    opacity: 1;
}

/* Respect the OS reduced-motion setting (ux_guidelines §26): collapse
   movement-based animation to near-zero while keeping state changes. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Expand small controls to ~44px hit areas on touch devices without changing
   their visual size (ux_guidelines §33: never ship a touch target below 44dp). */
@media (pointer: coarse) {
    .note-card-actions button,
    .note-color-btn,
    .chip-remove {
        position: relative;
    }
    .note-card-actions button::after {
        content: '';
        position: absolute;
        inset: -8px;
    }
    .note-color-btn::after {
        content: '';
        position: absolute;
        inset: -10px;
    }
    .chip-remove::after {
        content: '';
        position: absolute;
        inset: -15px;
    }
}

/* ============================================================
   Community forum (/community). Theme-aware: every color comes
   from the same tokens the app uses, so all 8 themes hold up.
   Category color uses the per-note color wash mechanism, keyed
   on data-category instead of data-color.
   ============================================================ */
.community-body {
    background: var(--bg);
    color: var(--text);
    margin: 0;
}
.community-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
}
.community-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}
.community-header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
}
.community-header-nav a { color: var(--text-secondary); text-decoration: none; }
.community-header-nav a:hover { color: var(--text); }
.community-open-app {
    background: var(--accent);
    color: var(--bg-on-accent) !important;
    padding: 7px 16px;
    border-radius: var(--radius);
    font-weight: 600;
}
.community-auth-slot { position: relative; }
.community-user-chip {
    background: var(--tag-bg);
    color: var(--text);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-family: inherit;
    border: none;
    cursor: pointer;
}
.community-user-chip:hover { background: var(--tag-bg-hover); }
.community-signin { color: var(--accent) !important; font-weight: 600; }

/* Account dropdown menu */
.account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.account-menu-item {
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
}
.account-menu-item:hover { background: var(--bg-card); }

/* Profile dialog rows */
.profile-body { display: flex; flex-direction: column; gap: 10px; }
.profile-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.profile-key { color: var(--text-secondary); }
.profile-val { color: var(--text); font-weight: 500; text-align: right; }

.community-main {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 20px 80px;
}
.community-loading,
.community-empty,
.community-note { color: var(--text-secondary); padding: 24px 4px; }
.community-error { color: var(--text); padding: 24px 4px; }
.community-retry {
    background: none;
    border: none;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

/* Latest-announcement teaser */
.community-teaser {
    display: block;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
    text-decoration: none;
    color: var(--text);
}
.community-teaser .eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 4px;
}
.community-teaser-title { font-weight: 700; font-size: 16px; }

/* Toolbar: filter chips + sort + new topic */
.community-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tag-bg);
    color: var(--text);
    font-size: 13px;
    text-decoration: none;
    border: 1px solid transparent;
}
.filter-chip:hover { background: var(--tag-bg-hover); }
.filter-chip.active {
    background: var(--tag-active-bg);
    color: var(--tag-active-text);
}
.sort-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-left: auto;
}
.sort-option {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
}
.sort-option.active { background: var(--tag-bg); color: var(--text); }
.community-new-topic { padding: 8px 16px; }

/* Feed + topic cards */
.community-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.topic-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
}
.topic-card.pinned { border-top: 2px solid var(--accent); }
.topic-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.topic-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    margin-bottom: 6px;
}
.topic-title:hover { color: var(--accent); }
.topic-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-secondary); }
.topic-author { font-weight: 600; color: var(--text); }
.topic-stat, .topic-time { font-variant-numeric: tabular-nums; }

/* Category chips and per-category tint (data-category, like data-color) */
.cat-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.topic-card[data-category="announcement"], .topic-detail[data-category="announcement"] { --cat-tint: var(--accent); }
.topic-card[data-category="qa"], .topic-detail[data-category="qa"] { --cat-tint: var(--swatch-blue); }
.topic-card[data-category="idea"], .topic-detail[data-category="idea"] { --cat-tint: var(--swatch-orange); }
.topic-card[data-category="bug"], .topic-detail[data-category="bug"] { --cat-tint: var(--swatch-red); }
.topic-card[data-category] {
    background: color-mix(in srgb, var(--cat-tint) 8%, var(--bg-card));
    border-color: color-mix(in srgb, var(--cat-tint) 35%, var(--border));
}
.cat-chip {
    background: color-mix(in srgb, var(--cat-tint, var(--accent)) 18%, var(--bg-card));
    color: color-mix(in srgb, var(--cat-tint, var(--accent)) 75%, var(--text));
}
.topic-flag {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, var(--text-secondary));
}
.accepted-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--swatch-green, var(--accent));
}

/* Topic detail */
.community-back, .topic-detail-title { color: var(--text); }
.community-back { display: inline-block; margin-bottom: 16px; color: var(--accent); text-decoration: none; font-weight: 600; }
.topic-detail { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.topic-detail[data-category] { --cat-tint: var(--accent); }
.topic-detail-title { font-size: 24px; font-weight: 800; margin: 8px 0; }
.topic-detail-body { margin-top: 12px; }
.replies-head { font-size: 16px; margin: 20px 0 12px; }
.replies { display: flex; flex-direction: column; gap: 12px; }
.reply {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}
.reply-accepted { border-color: color-mix(in srgb, var(--swatch-green, var(--accent)) 50%, var(--border)); }
.reply .markdown { margin-top: 8px; }

/* Composers */
.composer { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.composer-field { display: flex; flex-direction: column; gap: 6px; }
.composer-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.composer-title, .composer-category, .composer-body {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
}
.composer-body { min-height: 120px; resize: vertical; }
.composer-actions { display: flex; align-items: center; gap: 12px; }
.composer-status { font-size: 13px; color: var(--text-secondary); }
.signin-cta { margin-top: 20px; color: var(--text-secondary); }

/* New-topic modal */
.community-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    z-index: 100;
    overflow-y: auto;
}
.community-modal-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 560px;
}
.community-modal-panel h2 { margin: 0 0 16px; }

@media (max-width: 560px) {
    .sort-toggle { margin-left: 0; }
    .community-new-topic { width: 100%; }
}

/* Engagement controls: votes, reactions, accept-answer */
.community-notice {
    background: color-mix(in srgb, var(--swatch-red, var(--accent)) 12%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--swatch-red, var(--accent)) 35%, var(--border));
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.topic-engage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; position: relative; }
.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.vote-btn:hover { border-color: var(--accent); }
.vote-btn.voted { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); color: var(--accent); border-color: var(--accent); }
.vote-icon { font-size: 11px; }
.vote-count { font-variant-numeric: tabular-nums; }

.reactions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reaction, .reaction-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    padding: 3px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.reaction.mine { background: color-mix(in srgb, var(--accent) 16%, var(--bg-card)); border-color: var(--accent); }
.reaction-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.reaction-add { color: var(--text-secondary); }
.reaction-picker {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    display: flex;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 20;
}
.reaction-choice {
    background: none;
    border: none;
    font-size: 18px;
    padding: 4px 6px;
    border-radius: 8px;
    cursor: pointer;
}
.reaction-choice:hover { background: var(--tag-bg); }
.accept-btn {
    background: none;
    border: 1px solid color-mix(in srgb, var(--swatch-green, var(--accent)) 50%, var(--border));
    color: var(--swatch-green, var(--accent));
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.accept-btn:hover { background: color-mix(in srgb, var(--swatch-green, var(--accent)) 14%, var(--bg-card)); }

/* Search box */
.community-search { display: flex; gap: 8px; margin-bottom: 16px; }
.community-search input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    padding: 9px 12px;
    font: inherit;
}
.community-search-note { color: var(--text-secondary); margin: -6px 0 14px; }

/* The hidden attribute must win over the display rules above (.btn and
   .admin-controls both set display), so permissioned controls stay hidden until
   the client reveals them for an authorized caller. */
.community-new-topic[hidden],
.admin-controls[hidden],
.subscribe-btn[hidden],
.report-btn[hidden],
.accept-btn[hidden],
.admin-del-post[hidden],
.community-notif-btn[hidden] { display: none !important; }

/* Inline link-style buttons (report, subscribe, admin) */
.link-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 6px;
}
.link-btn:hover { color: var(--text); }
.link-btn.danger { color: var(--swatch-red, var(--red)); }
.admin-controls { display: inline-flex; gap: 4px; align-items: center; }
.author-rep { color: var(--text-muted, var(--text-secondary)); font-variant-numeric: tabular-nums; }

/* Notifications */
.community-notif-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
}
.community-notif-count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--bg-on-accent);
    background: var(--swatch-red, var(--red));
    border-radius: 999px;
    padding: 0 3px;
}
.notif-pop {
    position: absolute;
    top: 56px;
    right: 12px;
    width: min(360px, 92vw);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 40;
}
.notif-item {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}
.notif-item:hover { background: var(--bg-card); }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.notif-empty { padding: 16px; color: var(--text-secondary); }

/* Transient action-failure toast */
.community-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    background: var(--text);
    color: var(--bg);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    max-width: min(90vw, 420px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
}
.community-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }