/* ==========================================================================================================
   Vladonai / AllMyNotes design system - design/core.css (2026-10)

   Static and cached (loaded by core_ui.php's vmf_get_theme_head_html() with a ?v=<mtime> stamp). Two parts:
     1. TOKENS - every colour the site uses, as --vmf-color-* custom properties, once per colour theme.
        :root = Honey (the classic gold look, default); [data-theme="..."] on <html> switches the whole set.
        Rule for new markup: never a raw hex/rgba - always var(--vmf-color-...), so all themes follow.
     2. COMPONENTS - .vmf-* building blocks (cards, buttons, chips, KPI tiles, ranked lists, tables, ...).
        The page chrome (toolbar, sidebar, page head, sitemap) is still styled inline by core.php, from the
        same tokens.
   Icons are inline SVG with stroke="currentColor" (core_ui.php's vmf_icon()), so they take the colour of the
   text around them - no per-theme icon colours needed.
   Guide: _sandbox/docs/DESIGN_SYSTEM.md
   ========================================================================================================== */

/* ---------- 1. Tokens: Honey (default, light) - values = core.php's HTMLColor* constants ---------- */
:root {
    color-scheme: light;

    /* surfaces & text */
    --vmf-color-bg: #ffffff;              /* page background */
    --vmf-color-bg-soft: #f6f7f9;         /* app-like canvas (dashboard, control panel) */
    --vmf-color-surface: #fafafa;         /* subtle panel */
    --vmf-color-surface-raised: #ffffff;  /* card */
    --vmf-color-surface-hover: #fef3c7;   /* accent-tinted hover / selected */
    --vmf-color-artwork-canvas: #ffffff;  /* intentional canvas behind legacy raster artwork */
    --vmf-color-chip: #f3f1ec;
    --vmf-color-chip-hover: #e9e4d8;
    --vmf-color-text: #5c5c5c;
    --vmf-color-text-muted: #666666;
    --vmf-color-text-faint: #8f949b;
    --vmf-color-title: #1b2738;           /* big titles, strong values */
    --vmf-color-lead: #3c4858;            /* intro paragraphs */
    --vmf-color-heading: #5f4e39;         /* h1-h6 default */
    --vmf-color-heading-strong: #3a2f22;
    --vmf-color-border: #e7e3da;
    --vmf-color-border-strong: #cccccc;
    --vmf-color-divider: #f1e9d2;
    --vmf-color-hr: #b5b5b5;
    --vmf-color-control-bg: #ffffff;
    --vmf-color-control-border: #e1e5e9;

    /* brand accent */
    --vmf-color-accent: #b8780a;
    --vmf-color-accent-2: #c98a08;
    --vmf-color-accent-light: #d4971a;
    --vmf-color-accent-bright: #f5c842;
    --vmf-color-accent-soft: #fef3c7;
    --vmf-color-accent-softer: #fffbeb;
    --vmf-color-accent-text: #92400e;     /* accent-coloured text on light surfaces */
    --vmf-color-on-accent: #ffffff;       /* text on a solid accent fill */
    --vmf-color-brand-1: #f5c842;         /* gradient of the gold "AllMyNotes" brand word */
    --vmf-color-brand-2: #d4971a;
    --vmf-color-brand-3: #b8780a;
    --vmf-color-brand-text-shadow: rgba(120, 70, 0, 0.2);

    /* links & navigation */
    --vmf-color-link: #0f8b16;
    --vmf-color-link-hover-bg: rgba(245, 200, 66, 0.34);
    --vmf-color-link-shadow: rgba(160, 100, 0, 0.16);
    --vmf-color-nav: #3b6ea8;             /* breadcrumbs, lead call-to-action */
    --vmf-color-nav-hover: #1f4f87;
    --vmf-color-nav-border: #bcd4ee;
    --vmf-color-nav-bg: #f3f8fd;
    --vmf-color-nav-shadow: rgba(47, 99, 160, 0.10);
    --vmf-color-page-head-bg: #f3f8fd;

    /* menus: sidebar card, drop-downs, sitemap */
    --vmf-color-menu-text: #3d2a06;
    --vmf-color-submenu-surface: #ffffff;
    --vmf-color-submenu-text: #6b4e1a;
    --vmf-color-submenu-text-hover: #92400e;
    --vmf-color-submenu-border: #e8d898;
    --vmf-color-submenu-bullet: #c8b090;
    --vmf-color-submenu-hover-bg: #fffbeb;

    /* top bar (#menu) */
    --vmf-color-topbar-from: #fde68a;
    --vmf-color-topbar-to: #f2c14e;
    --vmf-color-topbar-text: #3d2a06;
    --vmf-color-topbar-text-hover: #1a1000;
    --vmf-color-topbar-hover-bg: rgba(255, 255, 255, 0.45);
    --vmf-color-topbar-soft-bg: rgba(255, 255, 255, 0.28);
    --vmf-color-topbar-button-bg: rgba(255, 255, 255, 0.35);
    --vmf-color-topbar-shadow: rgba(160, 100, 0, 0.20);
    --vmf-color-topbar-current-bg: #3d2a06;
    --vmf-color-topbar-current-text: #fde68a;
    --vmf-color-brand-badge-bg: #3d2a06;
    --vmf-color-brand-badge-fg: #f5c842;
    --vmf-color-brand-badge-shadow: rgba(61, 42, 6, 0.30);

    /* status */
    --vmf-color-focus: #2563eb;
    --vmf-color-focus-glow: rgba(37, 99, 235, 0.2);
    --vmf-color-success: #28a745;
    --vmf-color-success-text: #15803d;
    --vmf-color-success-soft: #ecfdf3;
    --vmf-color-success-bg: #d4edda;
    --vmf-color-success-bg-strong: #c3e6cb;
    --vmf-color-success-glow: rgba(40, 167, 69, 0.2);
    --vmf-color-danger: #dc3545;
    --vmf-color-danger-text: #b42318;
    --vmf-color-danger-soft: #fef3f2;
    --vmf-color-danger-bg: #f8d7da;
    --vmf-color-danger-bg-strong: #f5c6cb;
    --vmf-color-danger-glow: rgba(220, 53, 69, 0.2);
    --vmf-color-warning: #ffc107;
    --vmf-color-warning-text: #a16207;
    --vmf-color-warning-soft: #fef7e0;
    --vmf-color-warning-bg: #fff3cd;
    --vmf-color-warning-bg-strong: #ffeaa7;
    --vmf-color-warning-glow: rgba(255, 193, 7, 0.2);
    --vmf-color-info: #2563eb;
    --vmf-color-info-soft: #eaf1ff;
    --vmf-color-violet: #6d28d9;
    --vmf-color-violet-soft: #f3efff;
    --vmf-color-neutral: #475569;
    --vmf-color-neutral-soft: #f1f5f9;

    /* components */
    --vmf-color-icon-tile-bg: #fef3c7;
    --vmf-color-icon-tile-fg: #b8780a;
    --vmf-color-meter: #f7ebc8;           /* bar behind a ranked-list row */
    --vmf-color-table-head-bg: #fff7d4;
    --vmf-color-table-stripe: #fffcf1;
    --vmf-color-shadow: rgba(0, 0, 0, 0.1);
    --vmf-color-shadow-drop: rgba(0, 0, 0, 0.14);
    --vmf-color-shadow-soft: rgba(15, 23, 42, 0.06);
    --vmf-color-btn-from: #b8780a;
    --vmf-color-btn-to: #d4971a;
    --vmf-color-btn-text: #ffffff;
    --vmf-color-btn-shadow: rgba(184, 120, 10, 0.32);
    --vmf-color-btn-shadow-hover: rgba(184, 120, 10, 0.42);
    --vmf-color-btn-shadow-active: rgba(184, 120, 10, 0.30);
    --vmf-color-btn-focus: rgba(184, 120, 10, 0.45);
    --vmf-color-on-action: var(--vmf-color-btn-text);
    --vmf-color-kbd-from: #fffdf3;
    --vmf-color-kbd-to: #fff0bd;
    --vmf-color-kbd-border: #d7b85a;
    --vmf-color-kbd-border-bottom: #a97708;
    --vmf-color-kbd-text: #5b3a00;
    --vmf-color-chart-1: #2563eb;
    --vmf-color-chart-2: #0f766e;
    --vmf-color-chart-3: #d97706;
    --vmf-color-chart-4: #7c3aed;
    --vmf-color-chart-5: #db2777;
    --vmf-color-chart-6: #0891b2;

    /* shape & rhythm (theme-independent) */
    --vmf-radius-sm: 0.5rem;
    --vmf-radius-md: 0.75rem;
    --vmf-radius-lg: 1rem;
    --vmf-radius-pill: 999rem;
    --vmf-gap-xs: 0.25rem;
    --vmf-gap-sm: 0.5rem;
    --vmf-gap-md: 0.75rem;
    --vmf-gap-lg: 1rem;
    --vmf-gap-xl: 1.5rem;
    --vmf-gap-2xl: 2rem;
    --vmf-download-button-min-width: 15rem;
    --vmf-shadow-card: 0 0.125rem 0.75rem var(--vmf-color-shadow-soft);
    --vmf-shadow-raised: 0 0.375rem 1.25rem var(--vmf-color-shadow);
    --vmf-transition: 160ms ease;
}

/* ---------- Mint (light, green) ---------- */
:root[data-theme="mint"] {
    color-scheme: light;
    --vmf-color-bg: #ffffff; --vmf-color-bg-soft: #f3f8f5; --vmf-color-surface: #f7faf8; --vmf-color-surface-raised: #ffffff;
    --vmf-color-surface-hover: #e3f4e9; --vmf-color-chip: #edf3ef; --vmf-color-chip-hover: #e0eae4;
    --vmf-color-text: #4d5952; --vmf-color-text-muted: #5f6b65; --vmf-color-text-faint: #8a968f; --vmf-color-title: #13261c;
    --vmf-color-lead: #34453c; --vmf-color-heading: #1f5135; --vmf-color-heading-strong: #143823;
    --vmf-color-border: #dde8e1; --vmf-color-border-strong: #c3d3c9; --vmf-color-divider: #dcefe2; --vmf-color-hr: #b3c7ba;
    --vmf-color-control-bg: #ffffff; --vmf-color-control-border: #d4e1d9;
    --vmf-color-accent: #1f7a46; --vmf-color-accent-2: #23864d; --vmf-color-accent-light: #34a463; --vmf-color-accent-bright: #6fd39a;
    --vmf-color-accent-soft: #e3f4e9; --vmf-color-accent-softer: #f1faf4; --vmf-color-accent-text: #14532d; --vmf-color-on-accent: #ffffff;
    --vmf-color-brand-1: #6fd39a; --vmf-color-brand-2: #34a463; --vmf-color-brand-3: #1f7a46; --vmf-color-brand-text-shadow: rgba(20, 83, 45, 0.18);
    --vmf-color-link: #15803d; --vmf-color-link-hover-bg: rgba(111, 211, 154, 0.30); --vmf-color-link-shadow: rgba(20, 83, 45, 0.14);
    --vmf-color-nav: #2f6f8f; --vmf-color-nav-hover: #1d4f68; --vmf-color-nav-border: #bfdce8; --vmf-color-nav-bg: #eff7f9; --vmf-color-nav-shadow: rgba(29, 79, 104, 0.10);
    --vmf-color-page-head-bg: #eef8f2;
    --vmf-color-menu-text: #14382a; --vmf-color-submenu-surface: #ffffff; --vmf-color-submenu-text: #2f5a44; --vmf-color-submenu-text-hover: #14532d;
    --vmf-color-submenu-border: #c7e6d2; --vmf-color-submenu-bullet: #a5c9b3; --vmf-color-submenu-hover-bg: #f1faf4;
    --vmf-color-topbar-from: #dcfce7; --vmf-color-topbar-to: #9be3b8; --vmf-color-topbar-text: #0f3d26; --vmf-color-topbar-text-hover: #062012;
    --vmf-color-topbar-hover-bg: rgba(255, 255, 255, 0.5); --vmf-color-topbar-soft-bg: rgba(255, 255, 255, 0.3); --vmf-color-topbar-button-bg: rgba(255, 255, 255, 0.4);
    --vmf-color-topbar-shadow: rgba(20, 100, 50, 0.18); --vmf-color-topbar-current-bg: #14532d; --vmf-color-topbar-current-text: #dcfce7;
    --vmf-color-brand-badge-bg: #14532d; --vmf-color-brand-badge-fg: #86efac; --vmf-color-brand-badge-shadow: rgba(20, 83, 45, 0.3);
    --vmf-color-icon-tile-bg: #e3f4e9; --vmf-color-icon-tile-fg: #1f7a46; --vmf-color-meter: #dcefe3;
    --vmf-color-table-head-bg: #e9f6ee; --vmf-color-table-stripe: #f6fbf8;
    --vmf-color-btn-from: #1f7a46; --vmf-color-btn-to: #34a463; --vmf-color-btn-text: #ffffff;
    --vmf-color-btn-shadow: rgba(31, 122, 70, 0.30); --vmf-color-btn-shadow-hover: rgba(31, 122, 70, 0.40); --vmf-color-btn-shadow-active: rgba(31, 122, 70, 0.28); --vmf-color-btn-focus: rgba(31, 122, 70, 0.45);
    --vmf-color-kbd-from: #f6fdf8; --vmf-color-kbd-to: #dcf3e4; --vmf-color-kbd-border: #9fd0b1; --vmf-color-kbd-border-bottom: #2f7d4f; --vmf-color-kbd-text: #14382a;
}

/* ---------- Sky (light, blue) ---------- */
:root[data-theme="sky"] {
    color-scheme: light;
    --vmf-color-bg: #ffffff; --vmf-color-bg-soft: #f4f7fb; --vmf-color-surface: #f8fafc; --vmf-color-surface-raised: #ffffff;
    --vmf-color-surface-hover: #e0ecff; --vmf-color-chip: #eef2f8; --vmf-color-chip-hover: #e1e8f2;
    --vmf-color-text: #4b5563; --vmf-color-text-muted: #5b6576; --vmf-color-text-faint: #8b95a5; --vmf-color-title: #0f1f3d;
    --vmf-color-lead: #334155; --vmf-color-heading: #1e3a8a; --vmf-color-heading-strong: #172554;
    --vmf-color-border: #e2e8f0; --vmf-color-border-strong: #cbd5e1; --vmf-color-divider: #dbe6f5; --vmf-color-hr: #b6c3d6;
    --vmf-color-control-bg: #ffffff; --vmf-color-control-border: #d5dde8;
    --vmf-color-accent: #1d4ed8; --vmf-color-accent-2: #2563eb; --vmf-color-accent-light: #3b82f6; --vmf-color-accent-bright: #93c5fd;
    --vmf-color-accent-soft: #e0ecff; --vmf-color-accent-softer: #f0f6ff; --vmf-color-accent-text: #1e3a8a; --vmf-color-on-accent: #ffffff;
    --vmf-color-brand-1: #93c5fd; --vmf-color-brand-2: #3b82f6; --vmf-color-brand-3: #1d4ed8; --vmf-color-brand-text-shadow: rgba(30, 58, 138, 0.18);
    --vmf-color-link: #1d4ed8; --vmf-color-link-hover-bg: rgba(147, 197, 253, 0.35); --vmf-color-link-shadow: rgba(30, 58, 138, 0.14);
    --vmf-color-nav: #2563eb; --vmf-color-nav-hover: #1e40af; --vmf-color-nav-border: #bfd4f6; --vmf-color-nav-bg: #eff5ff; --vmf-color-nav-shadow: rgba(30, 64, 175, 0.10);
    --vmf-color-page-head-bg: #eff5ff;
    --vmf-color-menu-text: #0f2a5c; --vmf-color-submenu-surface: #ffffff; --vmf-color-submenu-text: #334e7a; --vmf-color-submenu-text-hover: #1e3a8a;
    --vmf-color-submenu-border: #c7d7f2; --vmf-color-submenu-bullet: #a8bde0; --vmf-color-submenu-hover-bg: #f0f6ff;
    --vmf-color-topbar-from: #dbeafe; --vmf-color-topbar-to: #93c5fd; --vmf-color-topbar-text: #0c2a5b; --vmf-color-topbar-text-hover: #04122b;
    --vmf-color-topbar-hover-bg: rgba(255, 255, 255, 0.5); --vmf-color-topbar-soft-bg: rgba(255, 255, 255, 0.3); --vmf-color-topbar-button-bg: rgba(255, 255, 255, 0.4);
    --vmf-color-topbar-shadow: rgba(30, 64, 175, 0.18); --vmf-color-topbar-current-bg: #0c2a5b; --vmf-color-topbar-current-text: #dbeafe;
    --vmf-color-brand-badge-bg: #0c2a5b; --vmf-color-brand-badge-fg: #93c5fd; --vmf-color-brand-badge-shadow: rgba(12, 42, 91, 0.3);
    --vmf-color-icon-tile-bg: #e0ecff; --vmf-color-icon-tile-fg: #1d4ed8; --vmf-color-meter: #dde9fb;
    --vmf-color-table-head-bg: #e8f0fe; --vmf-color-table-stripe: #f6f9ff;
    --vmf-color-btn-from: #1d4ed8; --vmf-color-btn-to: #3b82f6; --vmf-color-btn-text: #ffffff;
    --vmf-color-btn-shadow: rgba(29, 78, 216, 0.30); --vmf-color-btn-shadow-hover: rgba(29, 78, 216, 0.40); --vmf-color-btn-shadow-active: rgba(29, 78, 216, 0.28); --vmf-color-btn-focus: rgba(29, 78, 216, 0.45);
    --vmf-color-kbd-from: #f7faff; --vmf-color-kbd-to: #dfeafd; --vmf-color-kbd-border: #a9c1ea; --vmf-color-kbd-border-bottom: #2f5fb3; --vmf-color-kbd-text: #0f2a5c;
}

/* ---------- Graphite (dark, warm gold accent) ---------- */
:root[data-theme="graphite"] {
    color-scheme: dark;
    --vmf-color-bg: #16181c; --vmf-color-bg-soft: #121417; --vmf-color-surface: #1d2025; --vmf-color-surface-raised: #22262c;
    --vmf-color-surface-hover: #3a3122; --vmf-color-chip: #2a2e35; --vmf-color-chip-hover: #343943;
    --vmf-color-text: #c9ced6; --vmf-color-text-muted: #9aa3ad; --vmf-color-text-faint: #6f7782; --vmf-color-title: #f3f4f6;
    --vmf-color-lead: #b8c0cb; --vmf-color-heading: #f0c674; --vmf-color-heading-strong: #f7d58e;
    --vmf-color-border: #30353c; --vmf-color-border-strong: #454c56; --vmf-color-divider: #353129; --vmf-color-hr: #4a5059;
    --vmf-color-control-bg: #1b1e23; --vmf-color-control-border: #3a4049;
    --vmf-color-accent: #e0a823; --vmf-color-accent-2: #f0b429; --vmf-color-accent-light: #f5c451; --vmf-color-accent-bright: #ffd970;
    --vmf-color-accent-soft: #3a3122; --vmf-color-accent-softer: #2b2720; --vmf-color-accent-text: #f5c451; --vmf-color-on-accent: #1a1205;
    --vmf-color-brand-1: #ffe08a; --vmf-color-brand-2: #f0b429; --vmf-color-brand-3: #d4951a; --vmf-color-brand-text-shadow: rgba(0, 0, 0, 0.4);
    --vmf-color-link: #7ccf88; --vmf-color-link-hover-bg: rgba(224, 168, 35, 0.22); --vmf-color-link-shadow: rgba(0, 0, 0, 0.3);
    --vmf-color-nav: #8db8ec; --vmf-color-nav-hover: #b5d1f5; --vmf-color-nav-border: #34465f; --vmf-color-nav-bg: #1d2633; --vmf-color-nav-shadow: rgba(0, 0, 0, 0.3);
    --vmf-color-page-head-bg: #1e232b;
    --vmf-color-menu-text: #f3e2b8; --vmf-color-submenu-surface: #22262c; --vmf-color-submenu-text: #d8c9a6; --vmf-color-submenu-text-hover: #ffd970;
    --vmf-color-submenu-border: #4a4231; --vmf-color-submenu-bullet: #7a6c4f; --vmf-color-submenu-hover-bg: #2b2720;
    --vmf-color-topbar-from: #2a2419; --vmf-color-topbar-to: #3b2f15; --vmf-color-topbar-text: #f5d78a; --vmf-color-topbar-text-hover: #fff1c7;
    --vmf-color-topbar-hover-bg: rgba(255, 255, 255, 0.08); --vmf-color-topbar-soft-bg: rgba(255, 255, 255, 0.05); --vmf-color-topbar-button-bg: rgba(255, 255, 255, 0.06);
    --vmf-color-topbar-shadow: rgba(0, 0, 0, 0.45); --vmf-color-topbar-current-bg: #f5c451; --vmf-color-topbar-current-text: #1a1205;
    --vmf-color-brand-badge-bg: #f5c451; --vmf-color-brand-badge-fg: #1a1205; --vmf-color-brand-badge-shadow: rgba(0, 0, 0, 0.4);
    --vmf-color-focus: #7aa7ff; --vmf-color-focus-glow: rgba(122, 167, 255, 0.3);
    --vmf-color-success: #4ade80; --vmf-color-success-text: #6ee7a0; --vmf-color-success-soft: rgba(74, 222, 128, 0.12); --vmf-color-success-bg: rgba(74, 222, 128, 0.14); --vmf-color-success-bg-strong: rgba(74, 222, 128, 0.22); --vmf-color-success-glow: rgba(74, 222, 128, 0.18);
    --vmf-color-danger: #f87171; --vmf-color-danger-text: #fca5a5; --vmf-color-danger-soft: rgba(248, 113, 113, 0.12); --vmf-color-danger-bg: rgba(248, 113, 113, 0.14); --vmf-color-danger-bg-strong: rgba(248, 113, 113, 0.22); --vmf-color-danger-glow: rgba(248, 113, 113, 0.18);
    --vmf-color-warning: #fbbf24; --vmf-color-warning-text: #fcd34d; --vmf-color-warning-soft: rgba(251, 191, 36, 0.12); --vmf-color-warning-bg: rgba(251, 191, 36, 0.14); --vmf-color-warning-bg-strong: rgba(251, 191, 36, 0.22); --vmf-color-warning-glow: rgba(251, 191, 36, 0.18);
    --vmf-color-info: #7aa7ff; --vmf-color-info-soft: rgba(122, 167, 255, 0.14);
    --vmf-color-violet: #b794f6; --vmf-color-violet-soft: rgba(183, 148, 246, 0.14);
    --vmf-color-neutral: #aab3be; --vmf-color-neutral-soft: rgba(170, 179, 190, 0.12);
    --vmf-color-icon-tile-bg: rgba(224, 168, 35, 0.14); --vmf-color-icon-tile-fg: #f5c451; --vmf-color-meter: rgba(224, 168, 35, 0.16);
    --vmf-color-table-head-bg: #2a261d; --vmf-color-table-stripe: #1b1e22;
    --vmf-color-shadow: rgba(0, 0, 0, 0.45); --vmf-color-shadow-drop: rgba(0, 0, 0, 0.55); --vmf-color-shadow-soft: rgba(0, 0, 0, 0.35);
    --vmf-color-btn-from: #c98a08; --vmf-color-btn-to: #e0a823; --vmf-color-btn-text: #1a1205;
    --vmf-color-btn-shadow: rgba(0, 0, 0, 0.40); --vmf-color-btn-shadow-hover: rgba(0, 0, 0, 0.50); --vmf-color-btn-shadow-active: rgba(0, 0, 0, 0.35); --vmf-color-btn-focus: rgba(240, 180, 41, 0.5);
    --vmf-color-kbd-from: #2c2a24; --vmf-color-kbd-to: #241f15; --vmf-color-kbd-border: #6b5a2e; --vmf-color-kbd-border-bottom: #9a7a26; --vmf-color-kbd-text: #f5d78a;
    --vmf-color-chart-1: #7aa7ff; --vmf-color-chart-2: #4fd1c5; --vmf-color-chart-3: #f5c451; --vmf-color-chart-4: #b794f6; --vmf-color-chart-5: #f472b6; --vmf-color-chart-6: #38bdf8;
}

/* ---------- Midnight (dark, blue accent) ---------- */
:root[data-theme="midnight"] {
    color-scheme: dark;
    --vmf-color-bg: #0e1424; --vmf-color-bg-soft: #0b1020; --vmf-color-surface: #131b2e; --vmf-color-surface-raised: #18223a;
    --vmf-color-surface-hover: #1f2f52; --vmf-color-chip: #1d2740; --vmf-color-chip-hover: #26324f;
    --vmf-color-text: #cbd5e1; --vmf-color-text-muted: #94a3b8; --vmf-color-text-faint: #64748b; --vmf-color-title: #f1f5f9;
    --vmf-color-lead: #b6c3d6; --vmf-color-heading: #93c5fd; --vmf-color-heading-strong: #bfdbfe;
    --vmf-color-border: #24304a; --vmf-color-border-strong: #34435f; --vmf-color-divider: #22304d; --vmf-color-hr: #3a4a6a;
    --vmf-color-control-bg: #111a2c; --vmf-color-control-border: #2c3a57;
    --vmf-color-accent: #60a5fa; --vmf-color-accent-2: #3b82f6; --vmf-color-accent-light: #93c5fd; --vmf-color-accent-bright: #bfdbfe;
    --vmf-color-accent-soft: #1f2f52; --vmf-color-accent-softer: #172340; --vmf-color-accent-text: #93c5fd; --vmf-color-on-accent: #071224;
    --vmf-color-brand-1: #bfdbfe; --vmf-color-brand-2: #60a5fa; --vmf-color-brand-3: #3b82f6; --vmf-color-brand-text-shadow: rgba(0, 0, 0, 0.4);
    --vmf-color-link: #7dd3fc; --vmf-color-link-hover-bg: rgba(96, 165, 250, 0.22); --vmf-color-link-shadow: rgba(0, 0, 0, 0.3);
    --vmf-color-nav: #93c5fd; --vmf-color-nav-hover: #bfdbfe; --vmf-color-nav-border: #2b3d60; --vmf-color-nav-bg: #16213a; --vmf-color-nav-shadow: rgba(0, 0, 0, 0.3);
    --vmf-color-page-head-bg: #141e35;
    --vmf-color-menu-text: #dbeafe; --vmf-color-submenu-surface: #18223a; --vmf-color-submenu-text: #b6c6e0; --vmf-color-submenu-text-hover: #bfdbfe;
    --vmf-color-submenu-border: #2e3f63; --vmf-color-submenu-bullet: #4e6189; --vmf-color-submenu-hover-bg: #172340;
    --vmf-color-topbar-from: #13203d; --vmf-color-topbar-to: #1d3466; --vmf-color-topbar-text: #dbeafe; --vmf-color-topbar-text-hover: #ffffff;
    --vmf-color-topbar-hover-bg: rgba(255, 255, 255, 0.08); --vmf-color-topbar-soft-bg: rgba(255, 255, 255, 0.05); --vmf-color-topbar-button-bg: rgba(255, 255, 255, 0.06);
    --vmf-color-topbar-shadow: rgba(0, 0, 0, 0.5); --vmf-color-topbar-current-bg: #93c5fd; --vmf-color-topbar-current-text: #071224;
    --vmf-color-brand-badge-bg: #60a5fa; --vmf-color-brand-badge-fg: #071224; --vmf-color-brand-badge-shadow: rgba(0, 0, 0, 0.45);
    --vmf-color-focus: #93c5fd; --vmf-color-focus-glow: rgba(147, 197, 253, 0.3);
    --vmf-color-success: #4ade80; --vmf-color-success-text: #6ee7a0; --vmf-color-success-soft: rgba(74, 222, 128, 0.12); --vmf-color-success-bg: rgba(74, 222, 128, 0.14); --vmf-color-success-bg-strong: rgba(74, 222, 128, 0.22); --vmf-color-success-glow: rgba(74, 222, 128, 0.18);
    --vmf-color-danger: #f87171; --vmf-color-danger-text: #fca5a5; --vmf-color-danger-soft: rgba(248, 113, 113, 0.12); --vmf-color-danger-bg: rgba(248, 113, 113, 0.14); --vmf-color-danger-bg-strong: rgba(248, 113, 113, 0.22); --vmf-color-danger-glow: rgba(248, 113, 113, 0.18);
    --vmf-color-warning: #fbbf24; --vmf-color-warning-text: #fcd34d; --vmf-color-warning-soft: rgba(251, 191, 36, 0.12); --vmf-color-warning-bg: rgba(251, 191, 36, 0.14); --vmf-color-warning-bg-strong: rgba(251, 191, 36, 0.22); --vmf-color-warning-glow: rgba(251, 191, 36, 0.18);
    --vmf-color-info: #93c5fd; --vmf-color-info-soft: rgba(147, 197, 253, 0.14);
    --vmf-color-violet: #c4b5fd; --vmf-color-violet-soft: rgba(196, 181, 253, 0.14);
    --vmf-color-neutral: #a5b4cb; --vmf-color-neutral-soft: rgba(165, 180, 203, 0.12);
    --vmf-color-icon-tile-bg: rgba(96, 165, 250, 0.14); --vmf-color-icon-tile-fg: #93c5fd; --vmf-color-meter: rgba(96, 165, 250, 0.16);
    --vmf-color-table-head-bg: #17223b; --vmf-color-table-stripe: #111a2c;
    --vmf-color-shadow: rgba(0, 0, 0, 0.5); --vmf-color-shadow-drop: rgba(0, 0, 0, 0.6); --vmf-color-shadow-soft: rgba(0, 0, 0, 0.4);
    --vmf-color-btn-from: #2563eb; --vmf-color-btn-to: #3b82f6; --vmf-color-btn-text: #ffffff;
    --vmf-color-btn-shadow: rgba(0, 0, 0, 0.45); --vmf-color-btn-shadow-hover: rgba(0, 0, 0, 0.55); --vmf-color-btn-shadow-active: rgba(0, 0, 0, 0.4); --vmf-color-btn-focus: rgba(147, 197, 253, 0.5);
    --vmf-color-kbd-from: #1b2742; --vmf-color-kbd-to: #16203a; --vmf-color-kbd-border: #3b5a96; --vmf-color-kbd-border-bottom: #60a5fa; --vmf-color-kbd-text: #dbeafe;
    --vmf-color-chart-1: #60a5fa; --vmf-color-chart-2: #2dd4bf; --vmf-color-chart-3: #fbbf24; --vmf-color-chart-4: #c4b5fd; --vmf-color-chart-5: #f472b6; --vmf-color-chart-6: #38bdf8;
}

/* ==========================================================================================================
   2. Base
   ========================================================================================================== */
html { background: var(--vmf-color-bg); }
/* dark themes: raster screenshots/banners are made for a white page - take the edge off their glare */
:root[data-vmf-scheme="dark"] #main img:not(.vmf-flag):not([src$=".svg"]) { filter: brightness(0.92); }
:root[data-vmf-scheme="dark"] ::selection { background: var(--vmf-color-accent-soft); color: var(--vmf-color-title); }

.vmf-icon { flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
.vmf-flag { display: inline-block; flex: none; width: 1.333em; height: 1em; border-radius: 0.15em; object-fit: cover; vertical-align: -0.125em; box-shadow: 0 0 0 1px var(--vmf-color-border); }
.vmf-flag--none { background: var(--vmf-color-chip); box-shadow: none; }
.vmf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vmf-muted { color: var(--vmf-color-text-muted); }

/* ==========================================================================================================
   3. Components
   ========================================================================================================== */

/* ---------- icon tile: a soft accent disc behind an icon ---------- */
.vmf-icon-tile { display: inline-grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--vmf-color-icon-tile-bg); color: var(--vmf-color-icon-tile-fg); }
.vmf-icon-tile .vmf-icon { width: 1.2rem; height: 1.2rem; }
.vmf-icon-tile--lg { width: 3rem; height: 3rem; }
.vmf-icon-tile--lg .vmf-icon { width: 1.5rem; height: 1.5rem; }
.vmf-icon-tile--square { border-radius: var(--vmf-radius-md); }

/* ---------- card ---------- */
.vmf-card { min-width: 0; margin: 0 0 var(--vmf-gap-lg); padding: var(--vmf-gap-lg) 1.25rem; border: 1px solid var(--vmf-color-border); border-radius: var(--vmf-radius-lg); background: var(--vmf-color-surface-raised); box-shadow: var(--vmf-shadow-card); color: var(--vmf-color-text); text-indent: 0; }
.vmf-card--flat { box-shadow: none; }
.vmf-card--soft { background: var(--vmf-color-surface); }
.vmf-card--accent { box-shadow: inset 0.25rem 0 0 var(--vmf-color-accent-2), var(--vmf-shadow-card); }
.vmf-card__head { display: flex; align-items: center; gap: var(--vmf-gap-md); margin-bottom: var(--vmf-gap-md); }
.vmf-card__title { margin: 0; color: var(--vmf-color-title); font-size: 1.05rem; font-weight: 800; line-height: 1.3; text-indent: 0; }
.vmf-card__meta { margin-left: auto; color: var(--vmf-color-text-muted); font-size: 0.78rem; text-align: right; }
.vmf-card p { text-indent: 0; }
.vmf-card > :last-child { margin-bottom: 0; }

/* ---------- layout helpers ---------- */
.vmf-grid { display: grid; gap: var(--vmf-gap-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vmf-grid-min, 16rem)), 1fr)); margin-bottom: var(--vmf-gap-lg); }
.vmf-grid > .vmf-card { margin-bottom: 0; }
.vmf-stack { display: flex; flex-direction: column; gap: var(--vmf-gap-sm); }
.vmf-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vmf-gap-sm); }

/* ---------- section heading (eyebrow + title + meta) ---------- */
.vmf-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--vmf-gap-sm) var(--vmf-gap-lg); margin: var(--vmf-gap-xl) 0 var(--vmf-gap-md); text-indent: 0; }
.vmf-section-head__eyebrow { display: block; color: var(--vmf-color-accent); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.vmf-section-head h2, .vmf-section-head__title { margin: 0.15rem 0 0; color: var(--vmf-color-title); font-size: 1.3rem; font-weight: 800; text-indent: 0; }
.vmf-section-head__meta { color: var(--vmf-color-text-muted); font-size: 0.85rem; }

/* ---------- buttons (the CSS replacement for the old PNG buttons) ---------- */
.vmf-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.6rem 1.15rem; border: 1px solid transparent; border-radius: var(--vmf-radius-md); font-family: inherit; font-size: 0.95rem; font-weight: 800; line-height: 1.2; text-align: left; text-decoration: none; text-indent: 0; cursor: pointer; transition: background var(--vmf-transition), border-color var(--vmf-transition), color var(--vmf-transition), box-shadow var(--vmf-transition), transform var(--vmf-transition); }
a.vmf-button:link, a.vmf-button:visited, a.vmf-button:hover, a.vmf-button:active { text-decoration: none; }
.vmf-button .vmf-icon { width: 1.25rem; height: 1.25rem; }
.vmf-button__text { display: flex; flex-direction: column; min-width: 0; }
.vmf-button__caption { font-size: 0.75rem; font-weight: 600; opacity: 0.85; }
.vmf-button:focus-visible { outline: 3px solid var(--vmf-color-focus-glow); outline-offset: 2px; }
.vmf-button:hover { transform: translateY(-1px); }
.vmf-button:active { transform: translateY(0); }
.vmf-button--primary, a.vmf-button--primary:link, a.vmf-button--primary:visited { background: linear-gradient(135deg, var(--vmf-color-btn-from), var(--vmf-color-btn-to)); color: var(--vmf-color-btn-text); box-shadow: 0 0.25rem 0.75rem var(--vmf-color-btn-shadow); }
.vmf-button--primary:hover, a.vmf-button--primary:hover { color: var(--vmf-color-btn-text); box-shadow: 0 0.4rem 1.1rem var(--vmf-color-btn-shadow-hover); }
.vmf-button--success, a.vmf-button--success:link, a.vmf-button--success:visited { background: var(--vmf-color-success-text); color: #ffffff; box-shadow: 0 0.25rem 0.75rem var(--vmf-color-success-glow); }
:root[data-vmf-scheme="dark"] .vmf-button--success, :root[data-vmf-scheme="dark"] a.vmf-button--success:link, :root[data-vmf-scheme="dark"] a.vmf-button--success:visited { background: var(--vmf-color-success); color: #06210f; }
.vmf-button--secondary, a.vmf-button--secondary:link, a.vmf-button--secondary:visited { border-color: var(--vmf-color-border-strong); background: var(--vmf-color-surface-raised); color: var(--vmf-color-title); box-shadow: 0 1px 2px var(--vmf-color-shadow-soft); }
.vmf-button--secondary:hover, a.vmf-button--secondary:hover { border-color: var(--vmf-color-accent-2); background: var(--vmf-color-surface-hover); color: var(--vmf-color-title); }
.vmf-button--secondary .vmf-icon { color: var(--vmf-color-accent); }
.vmf-button--ghost, a.vmf-button--ghost:link, a.vmf-button--ghost:visited { background: transparent; color: var(--vmf-color-accent-text); }
.vmf-button--ghost:hover, a.vmf-button--ghost:hover { background: var(--vmf-color-surface-hover); color: var(--vmf-color-accent-text); }
.vmf-button--lg { min-height: 3.5rem; padding: 0.75rem 1.4rem; font-size: 1.05rem; border-radius: var(--vmf-radius-lg); }
.vmf-button--lg .vmf-icon { width: 1.5rem; height: 1.5rem; }
.vmf-button--sm { min-height: 2.125rem; padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.vmf-button--block { display: flex; width: 100%; }
.vmf-button-row { display: flex; flex-wrap: wrap; gap: var(--vmf-gap-sm); align-items: center; }

/* ---------- chips, badges, tags ---------- */
.vmf-chip, .vmf-badge, .vmf-tag { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.15rem 0.55rem; border-radius: var(--vmf-radius-pill); font-size: 0.75rem; line-height: 1.4; white-space: nowrap; text-indent: 0; }
.vmf-chip .vmf-icon, .vmf-badge .vmf-icon, .vmf-tag .vmf-icon { width: 0.9rem; height: 0.9rem; }
.vmf-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vmf-chip { background: var(--vmf-color-chip); color: var(--vmf-color-neutral); }
a.vmf-chip:hover { background: var(--vmf-color-chip-hover); color: var(--vmf-color-title); }
.vmf-badge, .vmf-tag { font-weight: 700; }
.is-success.vmf-chip, .is-success.vmf-badge, .is-success.vmf-tag { background: var(--vmf-color-success-soft); color: var(--vmf-color-success-text); }
.is-danger.vmf-chip, .is-danger.vmf-badge, .is-danger.vmf-tag { background: var(--vmf-color-danger-soft); color: var(--vmf-color-danger-text); }
.is-warning.vmf-chip, .is-warning.vmf-badge, .is-warning.vmf-tag { background: var(--vmf-color-warning-soft); color: var(--vmf-color-warning-text); }
.is-info.vmf-chip, .is-info.vmf-badge, .is-info.vmf-tag { background: var(--vmf-color-info-soft); color: var(--vmf-color-info); }
.is-violet.vmf-chip, .is-violet.vmf-badge, .is-violet.vmf-tag { background: var(--vmf-color-violet-soft); color: var(--vmf-color-violet); }
.is-accent.vmf-chip, .is-accent.vmf-badge, .is-accent.vmf-tag { background: var(--vmf-color-accent-soft); color: var(--vmf-color-accent-text); }
.is-neutral.vmf-chip, .is-neutral.vmf-badge, .is-neutral.vmf-tag { background: var(--vmf-color-neutral-soft); color: var(--vmf-color-neutral); }

/* ---------- KPI tile ---------- */
.vmf-kpi { display: flex; min-width: 0; align-items: flex-start; gap: var(--vmf-gap-md); padding: var(--vmf-gap-lg); border: 1px solid var(--vmf-color-border); border-radius: var(--vmf-radius-lg); background: var(--vmf-color-surface-raised); box-shadow: var(--vmf-shadow-card); }
.vmf-kpi__body { display: flex; min-width: 0; flex-direction: column; gap: 0.2rem; }
.vmf-kpi__label { color: var(--vmf-color-text-muted); font-size: 0.82rem; font-weight: 650; }
.vmf-kpi__value { color: var(--vmf-color-title); font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -0.02em; }
.vmf-kpi__meta { color: var(--vmf-color-text-muted); font-size: 0.75rem; line-height: 1.4; }

/* ---------- ranked list: a soft bar behind each row, scaled to the top row (set --vmf-bar on the row) ---------- */
.vmf-rank { display: flex; flex-direction: column; gap: 0.2rem; }
.vmf-rank__row { display: flex; align-items: center; justify-content: space-between; gap: var(--vmf-gap-md); padding: 0.35rem var(--vmf-gap-sm); border-radius: var(--vmf-radius-sm); background: linear-gradient(90deg, var(--vmf-color-meter) var(--vmf-bar, 0%), transparent var(--vmf-bar, 0%)) no-repeat; font-size: 0.85rem; }
.vmf-rank__label { display: flex; min-width: 0; align-items: center; gap: var(--vmf-gap-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vmf-rank__value { flex: none; color: var(--vmf-color-title); font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---------- table ---------- */
.vmf-table-wrap { overflow-x: auto; }
.vmf-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.vmf-table th, .vmf-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--vmf-color-border); text-align: left; text-indent: 0; vertical-align: top; }
.vmf-table th { background: var(--vmf-color-surface); color: var(--vmf-color-text-muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.vmf-table tbody tr:hover td { background: var(--vmf-color-surface); }
.vmf-table tbody tr:last-child td { border-bottom: 0; }
.vmf-table tr.is-current td { background: var(--vmf-color-success-soft); }

/* ---------- filter chips (toggle buttons) ---------- */
.vmf-filter { display: flex; flex-wrap: wrap; gap: var(--vmf-gap-xs); }
.vmf-filter__chip { display: inline-flex; align-items: center; gap: var(--vmf-gap-sm); margin: 0; padding: 0.3rem 0.4rem 0.3rem 0.85rem; border: 1px solid var(--vmf-color-border); border-radius: var(--vmf-radius-pill); background: var(--vmf-color-surface-raised); color: var(--vmf-color-title); font: inherit; font-size: 0.82rem; font-weight: 650; cursor: pointer; box-shadow: none; }
.vmf-filter__chip:hover { border-color: var(--vmf-color-border-strong); background: var(--vmf-color-surface); transform: none; }
.vmf-filter__chip[aria-pressed="true"] { border-color: var(--vmf-color-accent); background: var(--vmf-color-accent); color: var(--vmf-color-on-accent); }

/* ---------- link list (rows with an icon - "See also", archives, mirrors) ---------- */
.vmf-link-list { display: flex; flex-direction: column; gap: 0.15rem; margin: 0 0 var(--vmf-gap-lg); text-indent: 0; }
.vmf-link-row { display: flex; align-items: flex-start; gap: var(--vmf-gap-md); padding: 0.5rem 0.6rem; border-radius: var(--vmf-radius-md); line-height: 1.45; transition: background var(--vmf-transition); }
.vmf-link-row:hover { background: var(--vmf-color-surface); }
.vmf-link-row > .vmf-icon { margin-top: 0.1rem; color: var(--vmf-color-accent); }
.vmf-link-row > span { min-width: 0; }

/* ---------- feature block (icon tile + title + text) ---------- */
.vmf-feature { display: flex; flex-direction: column; gap: var(--vmf-gap-sm); }
.vmf-feature h2, .vmf-feature h3, .vmf-feature__title { margin: 0; color: var(--vmf-color-title); font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-indent: 0; }
.vmf-feature p { margin: 0; text-indent: 0; line-height: 1.6; }

/* ---------- hero: text + media side by side ---------- */
.vmf-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--vmf-gap-2xl); align-items: center; margin: 0 0 var(--vmf-gap-xl); padding: var(--vmf-gap-xl); border-radius: 1.25rem; background: linear-gradient(160deg, var(--vmf-color-page-head-bg) 0%, var(--vmf-color-bg) 85%); text-indent: 0; }
.vmf-hero__title { margin: 0 0 var(--vmf-gap-md); color: var(--vmf-color-title); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.02em; text-indent: 0; }
.vmf-hero__title a, .vmf-hero__title a:link, .vmf-hero__title a:visited { color: inherit; }
.vmf-hero__text { margin: 0 0 var(--vmf-gap-xl); color: var(--vmf-color-lead); font-size: 1.08rem; line-height: 1.6; text-indent: 0; }
.vmf-hero__actions { display: grid; gap: var(--vmf-gap-sm); max-width: 26rem; }
.vmf-hero__media { min-width: 0; text-align: center; }
.vmf-hero__media img { width: 100%; height: auto; border-radius: var(--vmf-radius-lg); }
@media (max-width: 61.25rem) { .vmf-hero { grid-template-columns: minmax(0, 1fr); padding: var(--vmf-gap-lg); } }
.vmf-hero__title .vmf-brand-accent { background: linear-gradient(180deg, var(--vmf-color-brand-1) 0%, var(--vmf-color-brand-2) 55%, var(--vmf-color-brand-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 var(--vmf-color-brand-text-shadow)); }
.vmf-hero__tagline { display: block; margin-top: 0.35rem; color: var(--vmf-color-lead); font-size: 0.55em; font-weight: 700; line-height: 1.35; letter-spacing: 0; }
.vmf-hero__actions .vmf-button { width: 100%; justify-content: flex-start; }
.vmf-hero__note-link { color: var(--vmf-color-text-muted); font-size: 0.85rem; }

/* ---------- framed raster artwork (legacy screenshots/infographics/banners drawn for a white page) ---------- */
.vmf-artwork { display: block; overflow: hidden; border: 1px solid var(--vmf-color-border); border-radius: var(--vmf-radius-lg); background: var(--vmf-color-artwork-canvas); box-shadow: var(--vmf-shadow-card); line-height: 0; outline-offset: var(--vmf-gap-xs); transition: box-shadow var(--vmf-transition), border-color var(--vmf-transition); }
.vmf-artwork:hover { border-color: var(--vmf-color-accent-2); box-shadow: var(--vmf-shadow-raised); }
.vmf-artwork:focus-visible { outline: 3px solid var(--vmf-color-focus); }
.vmf-artwork img { display: block; width: 100%; height: auto; }

/* ---------- debug panel: SQL page statistics (draw_sql_page_statistics() in core_db.php, debug sessions only) ---------- */
.vmf-sqlstats { margin: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--vmf-color-border, #ddd); border-radius: var(--vmf-radius-md, 0.75rem); background: var(--vmf-color-surface, #fafafa); color: var(--vmf-color-text, #333); font-size: 0.75rem; line-height: 1.4; text-indent: 0; }
.vmf-sqlstats__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 0.5rem; }
.vmf-sqlstats__title { margin-right: 0.25rem; color: var(--vmf-color-title, #1b2738); font-size: 0.8rem; letter-spacing: 0.02em; }
.vmf-sqlstats__chip { padding: 0.1rem 0.5rem; border-radius: var(--vmf-radius-pill, 999rem); background: var(--vmf-color-chip, #eee); color: var(--vmf-color-neutral, #475569); font-variant-numeric: tabular-nums; }
.vmf-sqlstats__chip.is-warn { background: var(--vmf-color-warning-soft, #fef7e0); color: var(--vmf-color-warning-text, #a16207); }
.vmf-sqlstats__chip.is-bad { background: var(--vmf-color-danger-soft, #fef3f2); color: var(--vmf-color-danger-text, #b42318); }
.vmf-sqlstats__empty { margin: 0; color: var(--vmf-color-text-muted, #666); }
.vmf-sqlstats__scroll { max-height: 22rem; overflow: auto; border: 1px solid var(--vmf-color-border, #ddd); border-radius: var(--vmf-radius-sm, 0.5rem); background: var(--vmf-color-surface-raised, #fff); }
.vmf-sqlstats__table { width: 100%; border-collapse: collapse; font-size: inherit; }
.vmf-sqlstats__table th { position: sticky; top: 0; padding: 0.3rem 0.6rem; background: var(--vmf-color-surface, #fafafa); color: var(--vmf-color-text-muted, #666); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.vmf-sqlstats__table td { padding: 0.3rem 0.6rem; border-top: 1px solid var(--vmf-color-border, #eee); vertical-align: top; }
.vmf-sqlstats__table tbody tr:hover td { background: var(--vmf-color-surface, #fafafa); }
.vmf-sqlstats__n { color: var(--vmf-color-text-faint, #999); text-align: right; }
.vmf-sqlstats__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vmf-sqlstats__time.is-warn { color: var(--vmf-color-warning-text, #a16207); font-weight: 700; }
.vmf-sqlstats__time.is-bad { color: var(--vmf-color-danger-text, #b42318); font-weight: 700; }
.vmf-sqlstats__status { white-space: nowrap; }
.vmf-sqlstats__status.is-ok { color: var(--vmf-color-success-text, #15803d); }
.vmf-sqlstats__status.is-bad { color: var(--vmf-color-danger-text, #b42318); white-space: normal; }
.vmf-sqlstats__sql { display: block; color: var(--vmf-color-title, #1b2738); font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; font-size: 0.7rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Control Panel page footer (ControlPanel_RenderPrintPageEnd() in cp/cp_common.php) ---------- */
.vmf-cpfoot { margin: 1.5rem 1rem 1rem; padding: 0.75rem 1rem; border: 1px solid var(--vmf-color-border, #ddd); border-radius: var(--vmf-radius-md, 0.75rem); background: var(--vmf-color-surface, #fafafa); color: var(--vmf-color-text-muted, #666); font-size: 0.75rem; line-height: 1.45; text-indent: 0; }
.vmf-cpfoot__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; }
.vmf-cpfoot__btn, a.vmf-cpfoot__btn:link, a.vmf-cpfoot__btn:visited { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.3rem 0.75rem; border: 1px solid var(--vmf-color-border-strong, #ccc); border-radius: var(--vmf-radius-pill, 999rem); background: var(--vmf-color-surface-raised, #fff); color: var(--vmf-color-title, #1b2738); font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: none; }
.vmf-cpfoot__btn:hover, a.vmf-cpfoot__btn:hover { border-color: var(--vmf-color-accent-2, #c98a08); background: var(--vmf-color-surface-hover, #fef3c7); color: var(--vmf-color-title, #1b2738); transform: none; }
.vmf-cpfoot__btn .vmf-icon { width: 0.95rem; height: 0.95rem; }
.vmf-cpfoot__notice { display: flex; align-items: flex-start; gap: 0.45rem; margin-bottom: 0.5rem; color: var(--vmf-color-text, #5c5c5c); }
.vmf-cpfoot__notice > .vmf-icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.05rem; color: var(--vmf-color-warning-text, #a16207); }
.vmf-cpfoot__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 0.75rem; margin: 0; }
.vmf-cpfoot__meta dt { color: var(--vmf-color-text-faint, #999); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.66rem; line-height: 1.6; }
.vmf-cpfoot__meta dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.vmf-cpfoot__flag { margin-right: 0.4rem; }
.vmf-cpfoot__meta strong { color: var(--vmf-color-text, #5c5c5c); }

/* ---------- buy page (allmynotes-organizer-buy.php) ---------- */
.vmf-buy-checkout { margin: var(--vmf-gap-sm) auto var(--vmf-gap-md); min-width: min(100%, 22rem); }
.vmf-buy-included { clear: both; margin: var(--vmf-gap-xl) 0; text-indent: 0; }
.vmf-buy-included__title { margin: 0 0 var(--vmf-gap-md); text-align: center; text-indent: 0; }
.vmf-buy-included__grid { --vmf-grid-min: 17rem; }
.vmf-buy-included__item { display: flex; gap: var(--vmf-gap-md); align-items: flex-start; margin: 0; text-decoration: none; transition: border-color var(--vmf-transition), box-shadow var(--vmf-transition); }
a.vmf-buy-included__item:hover { border-color: var(--vmf-color-accent-2); box-shadow: var(--vmf-shadow-raised); }
.vmf-buy-included__text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vmf-buy-included__text strong { color: var(--vmf-color-title); font-size: 1rem; line-height: 1.3; }
.vmf-buy-included__text span { color: var(--vmf-color-text-muted); font-size: 0.85rem; line-height: 1.45; }

/* ---------- edition comparison (allmynotes-organizer-compare-editions.php) ---------- */
.vmf-compare-check { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--vmf-color-success-soft); color: var(--vmf-color-success-text); }
.vmf-compare-check .vmf-icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.vmf-compare-label { float: right; margin-left: 0.3rem; text-indent: 0; }
.vmf-compare-photo { color: var(--vmf-color-accent); }

/* ---------- product landing page (allmynotes_subdomain.php: allmynotes.org home + idea pages) ---------- */
.vmf-landing { text-indent: 0; }
.vmf-landing__features { --vmf-grid-min: 17rem; margin-bottom: var(--vmf-gap-xl); }
.vmf-landing__features .vmf-feature { height: 100%; margin: 0; }
.vmf-landing__screenshot { max-width: 44rem; margin: 0 auto var(--vmf-gap-xl); }
.vmf-landing__story p, .vmf-landing__requirements p { margin: 0 0 var(--vmf-gap-md); line-height: 1.6; text-indent: 0; }
.vmf-landing__more { --vmf-grid-min: 20rem; }
.vmf-landing__coupon { margin-top: var(--vmf-gap-lg); }
.vmf-landing__snippet { line-height: 0; }
.vmf-landing__seo { margin: var(--vmf-gap-lg) 0; color: var(--vmf-color-text-muted); font-size: 0.85rem; line-height: 1.6; }
.vmf-landing__seo p { margin: var(--vmf-gap-sm) 0 0; text-indent: 0; }

/* ---------- download card (download page) ---------- */
.vmf-download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--vmf-gap-md) 1.25rem; align-items: center; }
.vmf-download__body { min-width: 0; }
.vmf-download__title { margin: 0 0 0.35rem; color: var(--vmf-color-title); font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-indent: 0; }
.vmf-download__meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.vmf-download__note { margin: 0; color: var(--vmf-color-text-muted); font-size: 0.85rem; line-height: 1.5; text-indent: 0; }
.vmf-download__action { justify-self: end; }
@media (max-width: 48rem) { .vmf-download { grid-template-columns: auto minmax(0, 1fr); } .vmf-download__action { grid-column: 1 / -1; justify-self: stretch; } .vmf-download__action .vmf-button { width: 100%; } }

/* ---------- shared download chooser (stable and beta download pages) ---------- */
.vmf-download-chooser { max-width: 58rem; margin: var(--vmf-gap-xl) auto var(--vmf-gap-2xl); text-indent: 0; }
.vmf-download-chooser__banner { display: block; width: min(100%, 31.25rem); margin: 0 auto var(--vmf-gap-xl); border-radius: var(--vmf-radius-lg); outline-offset: var(--vmf-gap-xs); }
.vmf-download-chooser__banner:focus-visible { outline: 3px solid var(--vmf-color-focus); }
.vmf-download-chooser__banner img { display: block; width: 100%; height: auto; border-radius: inherit; }
.vmf-download-chooser__title { margin: 0 0 var(--vmf-gap-lg); color: var(--vmf-color-title); text-align: center; text-indent: 0; }
.vmf-download-chooser__grid { --vmf-grid-min: 18rem; align-items: stretch; margin-bottom: 0; }
.vmf-download-chooser__grid--wide { --vmf-grid-min: 26rem; }
.vmf-download-choice { display: flex; height: 100%; flex-direction: column; gap: var(--vmf-gap-md); margin: 0; }
.vmf-download-choice__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--vmf-gap-md); align-items: start; }
.vmf-download-choice__body { min-width: 0; }
.vmf-download-choice__title { margin: 0 0 0.35rem; color: var(--vmf-color-title); font-size: 1.1rem; font-weight: 800; line-height: 1.3; text-indent: 0; }
.vmf-download-choice__note { margin: 0; color: var(--vmf-color-text-muted); font-size: 0.85rem; line-height: 1.5; text-indent: 0; }
.vmf-download-choice__title-link, .vmf-download-choice__title-link:link, .vmf-download-choice__title-link:visited { color: var(--vmf-color-title); text-decoration: none; }
.vmf-download-choice__title-link:hover { color: var(--vmf-color-accent-text); }
.vmf-download-art { display: block; width: 100%; overflow: hidden; border: 1px solid var(--vmf-color-border-strong); border-radius: var(--vmf-radius-md); background: var(--vmf-color-artwork-canvas); box-shadow: var(--vmf-shadow-card); outline-offset: var(--vmf-gap-xs); line-height: 0; }
.vmf-download-choice--art-bottom .vmf-download-art { margin-top: auto; }
.vmf-download-art:hover { border-color: var(--vmf-color-accent-2); box-shadow: var(--vmf-shadow-raised); }
.vmf-download-art:focus-visible { outline: 3px solid var(--vmf-color-focus); }
.vmf-download-art img { display: block; width: 100%; height: auto; }
.vmf-download-choice__details { display: grid; gap: var(--vmf-gap-xs); color: var(--vmf-color-text-muted); font-size: 0.8rem; line-height: 1.45; }
.vmf-download-choice__details p { margin: 0; text-indent: 0; }
.vmf-download-choice__details strong { color: var(--vmf-color-text); }
.vmf-alternative-download__button { margin-top: auto; }
:root[data-vmf-scheme="dark"] #main .vmf-download-art img { filter: brightness(0.84) saturate(0.9); }
@media (max-width: 36rem) { .vmf-download-chooser__grid { --vmf-grid-min: 100%; } .vmf-download-choice { padding: var(--vmf-gap-md); } }

/* ---------- compact download button grid (dictionaries, mirrors, archives) ---------- */
.vmf-download-button-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--vmf-download-button-min-width)), 1fr)); gap: var(--vmf-gap-sm); margin: 0 0 var(--vmf-gap-xl); }
.vmf-download-file-button { width: 100%; min-width: 0; justify-content: flex-start; }
.vmf-download-file-button .vmf-button__text { text-align: left; }

/* ---------- notice (inline info box) ---------- */
.vmf-notice { display: flex; gap: var(--vmf-gap-md); align-items: flex-start; margin: 0 0 var(--vmf-gap-lg); padding: 0.85rem 1rem; border: 1px solid var(--vmf-color-border); border-radius: var(--vmf-radius-md); background: var(--vmf-color-surface); color: var(--vmf-color-text); text-indent: 0; }
.vmf-notice > .vmf-icon { margin-top: 0.1rem; color: var(--vmf-color-accent); }
.vmf-notice p { margin: 0; text-indent: 0; }
.vmf-notice--success { border-color: var(--vmf-color-success-bg-strong); background: var(--vmf-color-success-soft); }
.vmf-notice--success > .vmf-icon { color: var(--vmf-color-success-text); }
.vmf-notice--warning { border-color: var(--vmf-color-warning-bg-strong); background: var(--vmf-color-warning-soft); }
.vmf-notice--warning > .vmf-icon { color: var(--vmf-color-warning-text); }
.vmf-notice--danger { border-color: var(--vmf-color-danger-bg-strong); background: var(--vmf-color-danger-soft); }
.vmf-notice--danger > .vmf-icon { color: var(--vmf-color-danger-text); }

/* ---------- expandable block (DrawExpandableBlock() in core.php: native <details>/<summary>) ---------- */
.vmf-expand { margin: 0 0 0.5rem; border-radius: var(--vmf-radius-md); text-indent: 0; }
.vmf-expand--tight { margin-bottom: 0; }
.vmf-expand__summary { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: var(--vmf-radius-md); cursor: pointer; list-style: none; line-height: 1.5; transition: background var(--vmf-transition); }
.vmf-expand__summary::-webkit-details-marker { display: none; }
.vmf-expand__summary::marker { content: ""; }
.vmf-expand__summary:hover { background: var(--vmf-color-surface); }
.vmf-expand__summary:focus-visible { outline: 2px solid var(--vmf-color-focus); outline-offset: 1px; }
.vmf-expand__chevron { margin-top: 0.15em; color: var(--vmf-color-accent); transition: transform var(--vmf-transition); }
.vmf-expand[open] > .vmf-expand__summary .vmf-expand__chevron { transform: rotate(90deg); }
.vmf-expand__label { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.vmf-expand__body { margin: 0.15rem 0 0.5rem 2.45rem; padding: 0.25rem 0 0.25rem 0.9rem; border-left: 2px solid var(--vmf-color-divider); }

/* ---------- heading with a leading icon (replaces the old emoji-prefixed headings) ---------- */
.vmf-icon-heading { display: flex; align-items: center; gap: 0.6rem; text-indent: 0; }
.vmf-icon-heading > .vmf-icon { color: var(--vmf-color-accent); }
/* an icon at the very start of a heading / message box / old-style button (emoji replacements) */
h1 > .vmf-icon:first-child, h2 > .vmf-icon:first-child, h3 > .vmf-icon:first-child { color: var(--vmf-color-accent); }
.vmf-msg-box-green > .vmf-icon:first-child { color: var(--vmf-color-success-text); }
.vmf-msg-box-red > .vmf-icon:first-child { color: var(--vmf-color-danger-text); }
.vmf-btn .vmf-icon, .vmf-btn-full-width .vmf-icon { width: 1.15em; height: 1.15em; }

/* ==========================================================================================================
   4. Theme picker + language flags in the main toolbar (the drop-down itself is styled by core.php's
   .toolbar-language-* rules - these only add the swatches, captions and flags)
   ========================================================================================================== */
#menu .vmf-theme-trigger .vmf-nav-icon { width: 1.25rem; height: 1.25rem; opacity: 0.9; }
#menu ul.vmf-theme-options { min-width: 13.5rem; }
#menu ul.vmf-theme-options li.vmf-theme-caption { padding: 0.5rem 0.75rem 0.3rem; color: var(--vmf-color-text-muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; cursor: default; }
#menu ul.vmf-theme-options li.vmf-theme-caption + li { margin-top: 0; }
#menu ul.vmf-theme-options li.vmf-theme-auto { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--vmf-color-divider); }
#menu ul.vmf-theme-options a[aria-checked="false"] .vmf-theme-check { visibility: hidden; }
#menu ul.vmf-theme-options a[aria-checked="true"] { background: var(--vmf-color-surface-hover); color: var(--vmf-color-menu-text); font-weight: 700; }
.vmf-theme-swatch { display: inline-block; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: conic-gradient(var(--vmf-sw-1) 0 34%, var(--vmf-sw-3) 0 67%, var(--vmf-sw-2) 0); box-shadow: 0 0 0 1px var(--vmf-color-border-strong); }
.vmf-theme-swatch--auto { display: inline-grid; place-items: center; background: var(--vmf-color-chip); color: var(--vmf-color-text-muted); }
.vmf-theme-swatch--auto .vmf-icon { width: 0.9rem; height: 0.9rem; }
#menu .vmf-lang-trigger .vmf-flag { width: 1.4rem; height: 1.05rem; }
#menu ul.toolbar-language-options .vmf-flag { width: 1.4rem; height: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
    .vmf-button, .vmf-link-row, .vmf-filter__chip { transition: none; }
    .vmf-button:hover { transform: none; }
}