theme.css

/*
Robsi Theme - A modern theme for Obsidian.
By Riffaells - 2026
Built: 2026-01-26T17:55:28.303095
Files included: 24
*/

/* base\variables.css */
/* ========================================================================== */
/*                           BASE VARIABLES                                   */
/* ========================================================================== */

:root {
    /* --- Typography Fonts --- */
    --font-family-theme: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading: var(--font-family-theme);
    --font-family-monospace: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

    /* --- Base Sizes --- */
    --font-size-theme: 16px;
    --line-height-theme: 1.6;
}

/* Common variables shared across both themes */
.theme-dark,
.theme-light {

    /* ======================================================================== */
    /*                               TYPOGRAPHY                                */
    /* ======================================================================== */
    --font-text-size: var(--font-size-theme);
    --line-height-normal: var(--line-height-theme);

    /* ======================================================================== */
    /*                                BORDERS                                  */
    /* ======================================================================== */
    --border-width: 1px;
    --border-radius: 8px;
    --radius-s: 6px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius-xl: 16px;

    /* ======================================================================== */
    /*                                SPACING                                  */
    /* ======================================================================== */
    --size-2-1: 2px;
    --size-2-2: 4px;
    --size-2-3: 6px;
    --size-4-1: 8px;
    --size-4-2: 10px;
    --size-4-3: 12px;
    --size-4-4: 14px;
    --size-4-5: 16px;
    --size-4-6: 18px;

    --file-margins: clamp(8px, 4vw, 24px);

    /* ======================================================================== */
    /*                              TRANSITIONS                                */
    /* ======================================================================== */
    --motion-duration-fast: 0.15s;
    --motion-duration-medium: 0.25s;
    --motion-duration-slow: 0.35s;
    --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-easing-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
    --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* ======================================================================== */
    /*                               SHADOWS                                   */
    /* ======================================================================== */
    --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --shadow-m: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-l: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);

    /* ======================================================================== */
    /*                               LAYOUT                                    */
    /* ======================================================================== */
    --titlebar-height: 40px;
    --titlebar-background: transparent;
    --titlebar-background-focused: transparent;
    --tab-width: 120px;
    --tab-min-width: 40px;
    --tab-max-width: 200px;
    --frame-right-space: 80px;
    --popover-width: 500px;
    --popover-height: 500px;

    /* ======================================================================== */
    /*                              COMPONENTS                                 */
    /* ======================================================================== */
    /* Lists */
    --list-indent: 2em;
    --list-spacing: 0;

    /* Checkboxes */
    --checkbox-radius: var(--radius-s);
    --checkbox-size: 16px;

    /* Callouts */
    --callout-radius: var(--radius-m);
    --callout-padding: 16px;
    --callout-title-padding: 0;
    --callout-content-padding: 0;

    /* Tables */
    --table-border-width: 1px;

    /* Scrollbars */
    --scrollbar-width: 10px; /* Increased for visibility */

    /* ======================================================================== */
    /*                         SEMANTIC COLOR MAPPING                          */
    /* ======================================================================== */
    /* Mapping abstract names to theme-defined colors (defined in themes/*.css) */

    /* Standard Colors Map */
    --color-red: var(--red);
    --color-purple: var(--magenta);
    --color-green: var(--green);
    --color-cyan: var(--cyan);
    --color-blue: var(--blue);
    --color-yellow: var(--yellow);
    --color-orange: var(--orange);
    --color-pink: var(--magenta);

    /* Backgrounds */
    --background-primary: var(--bg);
    --background-primary-alt: var(--bg);
    --background-secondary: var(--bg_dark);
    --background-secondary-alt: var(--bg_dark);
    --background-primary-rgb: var(--bg_x);
    --background-secondary-rgb: var(--bg_dark_x);

    /* Modifiers */
    --background-modifier-border: transparent;
    --background-modifier-border-hover: transparent;
    --background-modifier-form-field: transparent;
    --background-modifier-form-field-highlighted: var(--bg_dark);
    --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
    --background-modifier-cover: rgba(var(--bg_dark_x), 0.8);
    --background-modifier: rgba(var(--bg_highlight_x), 0.5);
    --background-modifier-hover: rgba(var(--bg_highlight_x), 0.7);
    --background-modifier-hover-rgb: var(--bg_highlight_x);
    --background-modifier-message: rgba(var(--bg_highlight_x), 0.9);
    --background-modifier-active-hover: var(--bg_highlight);

    /* Text */
    --text-normal: var(--fg);
    --text-faint: var(--fg_dark);
    --text-muted: var(--fg_dark);
    --text-muted-rgb: var(--fg_dark_x);
    --text-accent: var(--magenta);
    --text-accent-hover: var(--cyan);
    --text-error: var(--red1);
    --text-error-hover: var(--red);
    --text-on-accent: var(--bg);
    --text-highlight-bg: rgba(var(--orange_x), 0.25);

    /* Formatting */
    --bold-color: var(--cyan);
    --italic-color: var(--blue);
    --insertion-color: var(--orange);

    /* Headers */
    --h1-color: var(--red);
    --h2-color: var(--purple);
    --h3-color: var(--green);
    --h4-color: var(--cyan);
    --h5-color: var(--blue);
    --h6-color: var(--yellow);

    /* Links */
    --link-color: var(--purple);
    --link-color-hover: var(--cyan);
    --internal-link-color: var(--green);
    --internal-link-color-hover: var(--blue);
    --link-external-color: var(--purple);
    --link-external-color-hover: var(--cyan);

    /* UI Elements */
    --tag-color: var(--magenta);
    --tag-background: rgba(var(--magenta_x), 0.15);
    --tag-color-hover: var(--cyan);
    --tag-background-hover: rgba(var(--cyan_x), 0.15);

    --list-marker-color: var(--purple);
    --list-marker-color-hover: var(--purple-light);
    --list-marker-color-collapsed: var(--text-muted);
    --list-number-color: var(--magenta);
    --list-number-color-hover: var(--magenta-light);

	--checkbox-color: var(--green);
    --checkbox-border-color: var(--comment);
    --checkbox-border-color-hover: var(--comment);


    --table-header-background: var(--bg_dark2);
    --table-header-background-hover: var(--bg_dark2);
    --table-border-color: var(--border-color);

    /* Callout Colors */
    --callout-default: var(--blue_x);
    --callout-info: var(--blue_x);
    --callout-summary: var(--cyan_x);
    --callout-tip: var(--cyan_x);
    --callout-todo: var(--cyan_x);
    --callout-bug: var(--red_x);
    --callout-error: var(--red1_x);
    --callout-fail: var(--red1_x);
    --callout-example: var(--magenta_x);
    --callout-important: var(--green_x);
    --callout-success: var(--teal_x);
    --callout-question: var(--yellow_x);
    --callout-warning: var(--orange_x);
    --callout-quote: var(--fg_dark_x);

    /* Misc */
    --scrollbar-bg: transparent;
    --scrollbar-thumb-bg: rgba(var(--text-muted-rgb), 0.2);
    --scrollbar-active-thumb-bg: rgba(var(--text-muted-rgb), 0.4);

    --nav-item-color-hover: var(--fg);
    --nav-item-background-hover: var(--bg_highlight);
    --nav-item-background-active: rgba(var(--bg_highlight), 0.2);
    --nav-item-padding: var(--size-2-2) var(--size-4-1) var(--size-2-2) var(--size-4-6);
    --nav-item-parent-padding: var(--nav-item-padding);
    --nav-file-tag: rgba(var(--yellow_x), 0.9);

    --graph-line: var(--comment);
    --graph-node: var(--fg);
    --graph-node-tag: var(--orange);
    --graph-node-attachment: var(--blue);

	--bullet-new-color: var(--purple);

	--setting-items-background: transparent;
	--link-decoration: none;
	--link-decoration-hover: none;

	--divider-vertical-height: 0%;
}


/* ================================================= */

/* themes\dark.css */
/* ========================================================================== */
/*                                DARK THEME                                  */
/* ========================================================================== */

.theme-dark {
    color-scheme: dark;

    /* ======================================================================== */
    /*                           THEME ACCENT COLORS                           */
    /* ======================================================================== */
    --accent-h: 202;
    --accent-s: 100%;
    --accent-l: 75%;

    /* ======================================================================== */
    /*                           BACKGROUND COLORS                             */
    /* ======================================================================== */
    /* Primitives */
    --bg_dark2_x: 2, 2, 2;
    --bg_dark2: rgb(var(--bg_dark2_x));
    
    --bg_dark_x: 8, 8, 8;
    --bg_dark: rgb(var(--bg_dark_x));
    
    --bg_x: 15, 15, 15;
    --bg: rgb(var(--bg_x));
    
    --bg_highlight_x: 25, 25, 25;
    --bg_highlight: rgb(var(--bg_highlight_x));
    
    --bg_highlight_dark_x: 18, 18, 18;
    --bg_highlight_dark: rgb(var(--bg_highlight_dark_x));

    /* Mappings */
    --background-primary: #020202;
    --background-secondary: #020202;
    --bg-primary-rgb: 2, 2, 2;
    --bg-primary: #020202;
    --bg-secondary-rgb: 8, 8, 8;

    /* ======================================================================== */
    /*                              TEXT COLORS                                */
    /* ======================================================================== */
    --fg_x: 220, 220, 220;
    --fg: rgb(var(--fg_x));
    
    --fg_dark_x: 180, 180, 180;
    --fg_dark: rgb(var(--fg_dark_x));
    
    --comment_x: 120, 120, 120;
    --comment: rgb(var(--comment_x));
    
    --code-comment_x: 115, 125, 165;
    --code-comment: rgb(var(--code-comment_x));

    /* ======================================================================== */
    /*                             COLOR PALETTE                               */
    /* ======================================================================== */
    /* Blues */
    --blue0_x: 61, 89, 161;
    --blue0: rgb(var(--blue0_x));
    --blue_x: 122, 162, 247;
    --blue: rgb(var(--blue_x));

    /* Cyans */
    --cyan_hsl: 202 100% 75%;
    --cyan_x: 125, 207, 255;
    --cyan: rgb(var(--cyan_x));

    /* Purples */
    --purple_x: 187, 154, 247;
    --purple: rgb(var(--purple_x));
    --purple-light_x: 210, 180, 255;
    --purple-light: rgb(var(--purple-light_x));

    /* Magentas */
    --magent_hsl: 261 85% 79%;
    --magenta_x: 187, 154, 247;
    --magenta: rgb(var(--magenta_x));
    --magenta-light_x: 210, 190, 255;
    --magenta-light: rgb(var(--magenta-light_x));

    /* Pinks */
    --pink_hsl: 331 100% 43%;
    --pink_x: 217, 0, 105;
    --pink: rgb(var(--pink_x));

    /* Warm colors */
    --orange_x: 255, 158, 100;
    --orange: rgb(var(--orange_x));
    --yellow_x: 224, 175, 104;
    --yellow: rgb(var(--yellow_x));

    /* Greens */
    --green_x: 158, 206, 106;
    --green: rgb(var(--green_x));
    --green-dark_x: 120, 156, 122;
    --green-dark: rgb(var(--green-dark_x));
    --teal_x: 26, 188, 156;
    --teal: rgb(var(--teal_x));

    /* Reds */
    --red_x: 255, 117, 127;
    --red: rgb(var(--red_x));
    --red1_x: 219, 75, 75;
    --red1: rgb(var(--red1_x));
    --red-dark_x: 155, 45, 45;
    --red-dark: rgb(var(--red_x));

    /* Special */
    --terminal_black_x: 65, 72, 104;
    --terminal_black: rgb(var(--terminal_black_x));
    --unknown: #ffffff;
    --folder-note-color_x: 200, 190, 250;
    --folder-note-color: rgb(var(--folder-note-color_x));

    /* ======================================================================== */
    /*                         COMPONENT OVERRIDES                             */
    /* ======================================================================== */
    
    /* Interactive */
    --interactive-normal: var(--bg_dark);
    --interactive-hover: var(--bg_highlight);
    --interactive-success: var(--green);
    --interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));

    /* Tabs */
    --tab-container-background: var(--background-primary);
    --tab-background: rgba(2, 2, 2, 0.9);
    --tab-background-active: rgba(25, 25, 25, 0.95);
    --tab-background-hover: rgba(18, 18, 18, 0.8);
    --tab-divider-color: rgba(40, 40, 40, 0.3);

    /* Code */
    --code-background: rgb(var(--purple_x), 0.05);
    --code-normal: var(--fg_dark);
    
    /* Workspace */
    --workspace-background-translucent: rgba(2, 2, 2, 0.9);

    /* Blockquote */
    --blockquote-background-color: rgba(var(--purple_x), 0.12);

    /* Spoiler */
    --spoiler-background: rgba(var(--bg_highlight_x), 0.3);
    --spoiler-background-hover: rgba(var(--bg_highlight_x), 0.5);
    --spoiler-pattern: radial-gradient(circle 1px at 10px 8px, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
        radial-gradient(circle 1px at 30px 2px, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
        radial-gradient(circle 1px at 50px 12px, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
        radial-gradient(circle 1px at 70px 6px, rgba(255, 255, 255, 0.7) 50%, transparent 50%),
        radial-gradient(circle 1px at 15px 24px, rgba(255, 255, 255, 0.8) 50%, transparent 50%),
        radial-gradient(circle 1px at 38px 28px, rgba(255, 255, 255, 0.6) 50%, transparent 50%),
        radial-gradient(circle 1px at 60px 36px, rgba(255, 255, 255, 0.9) 50%, transparent 50%),
        radial-gradient(circle 1px at 85px 22px, rgba(255, 255, 255, 0.7) 50%, transparent 50%);

    /* Navigation */
    --nav-item-color: rgba(220, 220, 220, 0.9);
}


/* ================================================= */

/* themes\light.css */
/* ========================================================================== */
/*                               LIGHT THEME                                  */
/* ========================================================================== */

.theme-light {
    color-scheme: light;

    /* ======================================================================== */
    /*                           THEME ACCENT COLORS                           */
    /* ======================================================================== */
    --accent-h: 265;
    --accent-s: 60%;
    --accent-l: 55%;

    /* ======================================================================== */
    /*                           BACKGROUND COLORS                             */
    /* ======================================================================== */
    /* Primitives */
    --bg_dark2_x: 230, 232, 236;
    --bg_dark2: rgb(var(--bg_dark2_x));
    
    --bg_dark_x: 240, 242, 246;
    --bg_dark: rgb(var(--bg_dark_x));
    
    --bg_x: 248, 250, 252;
    --bg: rgb(var(--bg_x));
    
    --bg_highlight_x: 255, 255, 255;
    --bg_highlight: rgb(var(--bg_highlight_x));
    
    --bg_highlight_dark_x: 235, 238, 242;
    --bg_highlight_dark: rgb(var(--bg_highlight_dark_x));

    /* Mappings */
    --background-primary: #f8fafc;
    --background-secondary: #f8fafc;

    /* ======================================================================== */
    /*                              TEXT COLORS                                */
    /* ======================================================================== */
    --fg_x: 30, 35, 42;
    --fg: rgb(var(--fg_x));
    
    --fg_dark_x: 75, 85, 95;
    --fg_dark: rgb(var(--fg_dark_x));
    
    --comment_x: 120, 125, 135;
    --comment: rgb(var(--comment_x));
    
    --code-comment_x: 110, 115, 125;
    --code-comment: rgb(var(--code-comment_x));

    /* ======================================================================== */
    /*                             COLOR PALETTE                               */
    /* ======================================================================== */
    /* Blues */
    --blue0_x: 25, 55, 100;
    --blue0: rgb(var(--blue0_x));
    --blue_x: 30, 70, 160;
    --blue: rgb(var(--blue_x));

    /* Cyans */
    --cyan_x: 0, 120, 180;
    --cyan: rgb(var(--cyan_x));

    /* Purples */
    --purple_x: 102, 63, 191;
    --purple: rgb(var(--purple_x));
    --purple-light_x: 140, 100, 220;
    --purple-light: rgb(var(--purple-light_x));

    /* Magentas */
    --magent_hsl: 261 65% 50%;
    --magenta_x: 160, 30, 140;
    --magenta: rgb(var(--magenta_x));
    --magenta-light_x: 180, 60, 200;
    --magenta-light: rgb(var(--magenta-light_x));

    /* Pinks */
    --pink_hsl: 320 65% 50%;
    --pink_x: 200, 30, 140;
    --pink: rgb(var(--pink_x));

    /* Warm colors */
    --orange_x: 220, 100, 20;
    --orange: rgb(var(--orange_x));
    --yellow_x: 180, 120, 0;
    --yellow: rgb(var(--yellow_x));

    /* Greens */
    --green_x: 20, 140, 80;
    --green: rgb(var(--green_x));
    --teal_x: 0, 140, 160;
    --teal: rgb(var(--teal_x));

    /* Reds */
    --red_x: 200, 50, 70;
    --red: rgb(var(--red_x));
    --red1_x: 180, 30, 50;
    --red1: rgb(var(--red1_x));

    /* Special */
    --terminal_black_x: 15, 15, 20;
    --terminal_black: rgb(var(--terminal_black_x));
    --unknown: #000000;
    --folder-note-color_x: 120, 85, 200;
    --folder-note-color: rgb(var(--folder-note-color_x));

    /* ======================================================================== */
    /*                         COMPONENT OVERRIDES                             */
    /* ======================================================================== */
    
    /* Interactive */
    --interactive-normal: #e2e8f0;
    --interactive-hover: #cbd5e1;
    --interactive-success: var(--green);
    --interactive-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    
    /* Tabs */
    --tab-container-background: var(--background-primary);
    --tab-background: rgba(240, 242, 246, 0.9);
    --tab-background-active: rgba(255, 255, 255, 0.95);
    --tab-background-hover: rgba(248, 250, 252, 0.8);
    --tab-divider-color: rgba(200, 205, 210, 0.4);

    /* Status bar */
    .status-bar {
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        color: #64748b;
    }

    /* Blockquote */
    --blockquote-background-color: rgba(var(--purple_x), 0.08);

    /* Code */
    --code-background: rgba(var(--purple_x), 0.06);

    /* Spoiler */
    --spoiler-background: rgba(var(--bg_dark_x), 0.5);
    --spoiler-background-hover: rgba(var(--bg_dark_x), 0.7);
    --spoiler-pattern: radial-gradient(circle 1px at 10px 8px, rgba(100, 100, 100, 0.6) 50%, transparent 50%),
        radial-gradient(circle 1px at 30px 2px, rgba(100, 100, 100, 0.4) 50%, transparent 50%),
        radial-gradient(circle 1px at 50px 12px, rgba(100, 100, 100, 0.7) 50%, transparent 50%),
        radial-gradient(circle 1px at 70px 6px, rgba(100, 100, 100, 0.5) 50%, transparent 50%),
        radial-gradient(circle 1px at 15px 24px, rgba(100, 100, 100, 0.6) 50%, transparent 50%),
        radial-gradient(circle 1px at 38px 28px, rgba(100, 100, 100, 0.4) 50%, transparent 50%),
        radial-gradient(circle 1px at 60px 36px, rgba(100, 100, 100, 0.7) 50%, transparent 50%),
        radial-gradient(circle 1px at 85px 22px, rgba(100, 100, 100, 0.5) 50%, transparent 50%);

    /* Navigation */
    --nav-item-color: rgba(30, 35, 42, 0.9);
}


/* ================================================= */

/* layout\navigation.css */
/* ========================================================================== */
/*                               NAVIGATION                                   */
/* ========================================================================== */

/*
   Contains:
   1. Breadcrumbs
   2. Outline View
*/

/* -------------------------------------------------------------------------- */
/*                           1. Breadcrumbs                                   */
/* -------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    font-size: 0.9em;
    color: var(--text-muted);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: "▶";
    margin: 0 8px;
    color: var(--text-faint);
    font-size: 0.7em;
}

/* -------------------------------------------------------------------------- */
/*                           2. Outline View                                  */
/* -------------------------------------------------------------------------- */

.outline .tree-item-self {
    position: relative;
    padding-left: 1.5em;
}

.tree-item-self.has-active-menu {
    box-shadow: none;
}

.outline .tree-item-self::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    border-radius: 2px;
    opacity: 0.6;
    background-color: var(--interactive-accent);
}

.outline .tree-item-self:hover::before {
    opacity: 1;
    width: 4px;
}

.outline .tree-item-self.is-active::before {
    opacity: 1;
    width: 4px;
}

/* Table of Contents in Preview */
.markdown-preview-view .toc li::before {
    content: "→";
    color: var(--accent-color);
    margin-right: 8px;
}


/* ================================================= */

/* layout\scrollbars.css */
/* ========================================================================== */
/*                                SCROLLBARS                                  */
/* ========================================================================== */

/* Webkit Scrollbar Customization */

::-webkit-scrollbar {
    background-color: var(--scrollbar-bg);
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-bg);
    border-radius: var(--radius-m); /* Немного скруглим, но не сильно */
    border: 2px solid transparent; /* Создает отступ вокруг ползунка, чтобы он не слипался с краем */
    background-clip: content-box; /* Важно для работы прозрачной границы */
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-active-thumb-bg);
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ================================================= */

/* layout\workspace.css */
/* ========================================================================== */
/*                                WORKSPACE                                   */
/* ========================================================================== */

/* 
   Contains:
   1. Workspace Leaves (Containers)
   2. Tabs & Headers
   3. Titlebar & Dragging
   4. Sidebars & Navigation
   5. Popovers & Embeds (Blur effects)
*/

/* -------------------------------------------------------------------------- */
/*                           1. Workspace Leaves                              */
/* -------------------------------------------------------------------------- */

/* Main containers */
.workspace-leaf {
    background: var(--workspace-background-translucent);
    border-radius: 12px; /* Material Design 3 Styling */
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease;
}

.workspace-leaf:hover .workspace-leaf-content {
    border-color: var(--border-color-hover);
}

.workspace-leaf-content {
    border-radius: 8px;
}

/* Splitters */
.workspace-leaf-resize-handle {
    background: transparent;
}

/* -------------------------------------------------------------------------- */
/*                           2. Tabs & Headers                                */
/* -------------------------------------------------------------------------- */

/* Tab Container */
.workspace-tabs {
    border-radius: 8px;
}

.workspace-tab-header-container {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid rgba(var(--background-modifier-border-hover-rgb), 0.2);
}

/* Individual Tab */
.workspace-tab-header {
    background: var(--tab-background);
    border-radius: 8px 8px 0 0;
    border: none;
    transition: background-color 0.15s ease;
    min-width: var(--tab-min-width);
    max-width: var(--tab-max-width);
}

.workspace-tab-header.is-active {
    background: var(--tab-background-active);
    font-weight: 600;
}

/* Reset box-shadow on active tab pseudo-elements */
.workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header.is-active::before,
.workspace-split.mod-root .workspace-tab-header-container .workspace-tab-header.is-active::after {
    box-shadow: none;
}

/* Tab header inner styles */
.workspace .mod-root .workspace-tab-header-inner::after {
    width: 0;
}

/* Hover effect on inner element */
@media (hover: hover) {
    .workspace-tab-header-container .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
        background-color: var(--background-modifier-hover);
    }
}

/* Active and focus styles for inner element */
.workspace-tab-header.is-active .workspace-tab-header-inner,
.workspace-tab-header:focus .workspace-tab-header-inner {
    background-color: var(--background-modifier-hover);
}

/* -------------------------------------------------------------------------- */
/*                           7. Status Bar                                    */
/* -------------------------------------------------------------------------- */

.status-bar {
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.status-bar:hover {
    opacity: 1;
}

/* View Header (Breadcrumbs area + Buttons) */
.view-header-nav-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Buttons in header */
.view-header-nav-buttons .clickable-icon {
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
}

.view-header-nav-buttons .clickable-icon:hover {
    background-color: var(--background-modifier-hover);
    opacity: 1;
}

/* Hide disabled icons */
.view-header-nav-buttons .clickable-icon[aria-disabled="true"] {
    display: none;
}

/* Hide Tab Bar Option (via class) */
.hide-tab-bar-always .mod-root .workspace-tabs .workspace-tab-header-container {
    display: none;
}

/* -------------------------------------------------------------------------- */
/*                           3. Titlebar & Dragging                           */
/* -------------------------------------------------------------------------- */

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

.mod-linux .titlebar-button,
.mod-windows .titlebar-button {
    padding: 0 8px;
}

/* Fix draggability regions */
.view-header-title-container {
    -webkit-app-region: drag;
    border-radius: 8px;
    transition: none;
}

.view-header-title-container div {
    -webkit-app-region: no-drag;
}

/* -------------------------------------------------------------------------- */
/*                           4. Sidebars & Navigation                         */
/* -------------------------------------------------------------------------- */

/* Sidebar Toggles */
.sidebar-toggle-button.mod-right,
.sidebar-toggle-button.mod-left {
    display: flex;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.sidebar-toggle-button.mod-right:hover,
.sidebar-toggle-button.mod-left:hover {
    opacity: 1;
}

/* Vault Actions (Settings, etc) */
.workspace-sidedock-vault-profile .workspace-drawer-vault-actions {
    display: flex !important;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.workspace-sidedock-vault-profile:hover .workspace-drawer-vault-actions {
    opacity: 1;
}

/* Navigation Items (File Explorer) */
.nav-file-title,
.nav-folder-title {
    border-left: 2px solid transparent;
    transition: background-color 0.1s ease, border-color 0.1s ease;
}

.nav-file-title:hover,
.nav-folder-title:hover {
    background-color: var(--background-modifier-hover);
    border-left-color: var(--border-color-active);
}

.nav-file.is-active .nav-file-title {
    background-color: var(--background-modifier-active-hover);
    border-left-color: var(--interactive-accent);
    color: var(--text-normal);
}

/* -------------------------------------------------------------------------- */
/*                           5. Popovers & Embeds (BLUR)                      */
/* -------------------------------------------------------------------------- */

/* Popover Container */
.popover.hover-popover {
    max-height: 500px;
    min-height: 100px;
    width: 500px;
    background-color: transparent; /* Transparent to show blur underneath */
    box-shadow: var(--shadow-xl);
    border: none;
}

/* The actual content inside popover/embed */
.markdown-embed {
    background-color: rgba(var(--background-primary-rgb), 0.2);
    backdrop-filter: blur(16px);
    border: 1px solid var(--background-modifier-border);
    border-radius: 12px;
}

.popover .markdown-embed {
    height: 100%;
    border-radius: 12px;
}

/* -------------------------------------------------------------------------- */
/*                           6. Mobile & Tweaks                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .workspace-leaf { border-radius: 8px; }
    .workspace-tab-header { border-radius: 6px 6px 0 0; }
    
    .sidebar-toggle-button.mod-right,
    .sidebar-toggle-button.mod-left {
        min-width: 44px;
        min-height: 44px;
        opacity: 1;
    }
}

/* Input Tweaks from old file */
body:not(.is-ios):not(.is-android) input[type='date'], 
body:not(.is-ios):not(.is-android) input[type='datetime-local'] {
    padding-inline-start: 24px;
}


/* ================================================= */

/* components\buttons.css */
/* ========================================================================== */
/*                                  BUTTONS                                   */
/* ========================================================================== */

/* Primary CTA Button (Call to Action) */
.mod-cta {
    background-color: var(--interactive-accent);
    color: var(--text-on-accent);
    border: none;
    transition: background-color 0.15s ease;
}

.mod-cta:hover {
    background-color: var(--interactive-accent-hover);
    color: var(--text-on-accent);
}


/* ================================================= */

/* components\forms.css */
/* ========================================================================== */
/*                                   FORMS                                    */
/* ========================================================================== */

/* --- Settings Groups --- */
.setting-item-container,
.setting-group,
.setting-items {
    background: transparent !important;
}

/* --- Input Fields --- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
    background-color: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 8px;
    padding: 6px 10px;
    color: var(--text-normal);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--interactive-accent);
    background-color: rgba(var(--background-primary-rgb), 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 3px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
    outline: none;
}

/* Prompt/Modal Inputs */
input.prompt-input {
    background: rgba(var(--background-primary-rgb), 0.5);
    border-color: var(--prompt-border-color);
    font-size: 1.1em;
    padding: 10px 14px;
}

/* --- Dropdowns (Select) --- */
.dropdown {
    background-color: var(--background-modifier-form-field);
    border: 1px solid var(--background-modifier-border);
    border-radius: 6px;
    padding: 4px 24px 4px 8px; /* Right padding for arrow */
    color: var(--text-normal);
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    -webkit-appearance: none; /* Hide default arrow */
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dropdown:hover {
    border-color: var(--text-muted);
}

.dropdown:focus {
    border-color: var(--interactive-accent);
    background-color: rgba(var(--background-primary-rgb), 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 3px hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2);
    outline: none;
}

/* --- Range Sliders --- */
input[type=range] {
    height: 4px;
    border-radius: 2px;
    background-color: var(--background-modifier-border);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--interactive-accent);
    cursor: pointer;
    border: 2px solid var(--background-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    margin-top: -6px;
}


/* ================================================= */

/* components\interface-fixes.css */
/* ========================================================================== */
/*                             INTERFACE FIXES                                */
/* ========================================================================== */

/* Hide unnecessary elements */
.tree-item-flair:not(.tag-pane-tag-count),
.prompt-instructions {
    display: none;
}

/* Suggestions (Quick Switcher, Command Palette) */
.suggestion-item.is-selected {
    background-color: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.15);
    border-radius: var(--radius-m);
}


/* ================================================= */

/* components\links.css */
/* ========================================================================== */
/*                                   LINKS                                    */
/* ========================================================================== */

/* --- External Links --- */
.external-link,
.cm-link:not(.internal-link),
.cm-url {
  color: var(--link-external-color) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(var(--link-external-color-rgb), 0.5);
  padding-inline-end: 0;
  background: none;
}

.external-link:hover,
.cm-link:not(.internal-link):hover,
.cm-url:hover {
  color: var(--link-external-color-hover) !important;
  border-bottom-color: rgba(var(--link-external-color-hover-rgb), 0.7);
}

/* Force disable filter on external links */
.cm-s-obsidian span.cm-formatting-link.cm-url,
.cm-s-obsidian span.cm-url,
.external-link {
  filter: none !important;
}

/* Remove underline from child 'a' tags */
.cm-link:not(.internal-link) a.cm-underline,
.cm-url a.cm-underline {
    text-decoration: none !important;
}

/* External Link Icon */
a.external-link::after {
  content: ' ';
  width: 12px;
  height: 12px;
  background-image: linear-gradient(transparent, transparent), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>');
  background-size: contain;
  display: inline-block;
  vertical-align: text-top;
  opacity: 0.7;
  transition: none;
  border-bottom: none !important;
  margin-left: 4px;
}

a.external-link:hover::after {
  opacity: 1;
}

/* --- Internal Links --- */
a.internal-link,
.cm-hmd-internal-link,
.cm-hmd-internal-link a,
.HyperMD-header .cm-hmd-internal-link a,
.cm-link,
.cm-link .cm-hmd-internal-link,
.markdown-preview-view .internal-link,
.markdown-source-view .internal-link,
.internal-lin,
.metadata-property-value .internal-link,
.markdown-rendered .internal-link,
.cm-s-obsidian span.cm-hmd-internal-link {
  color: var(--internal-link-color);
  text-decoration: none !important;
  transition: none;
}

a.internal-link:hover,
.cm-hmd-internal-link:hover,
.cm-hmd-internal-link a:hover,
.internal-link:hover {
  color: var(--internal-link-color-hover);
  text-decoration: none !important;
}

/* Helper for data-link-text */
/* Lower specificity to allow plugin overrides via data-link-type */
.data-link-text a.cm-underline {
  color: var(--internal-link-color);
  text-decoration: none !important;
}


/* ================================================= */

/* components\menus.css */
/* ========================================================================== */
/*                              MENUS & SUGGESTIONS                           */
/* ========================================================================== */

/* Context menus and Quick Switcher / Command Palette containers */
.suggestion-container,
.menu {
    background: rgba(var(--background-primary-rgb), 0.4) !important;
    backdrop-filter: blur(20px);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    padding: 4px;
}

/* Individual items - More compact */
.menu-item,
.suggestion-item {
    border-radius: var(--radius-s);
    margin: 1px 2px;
    padding: 4px 8px; /* Compact padding */
    font-size: 0.95em; /* Slightly smaller text */
    transition: background-color 0.1s ease;
}

/* Selected/Focused state */
.menu-item.is-selected,
.menu-item.is-focused,
.suggestion-item.is-selected {
    background: hsla(var(--accent-h), var(--accent-s), var(--accent-l), 0.2) !important;
    color: var(--accent-color);
}

/* Icons inside menus - Smaller and aligned */
.menu-item-icon {
    opacity: 0.8;
    width: 14px;
    height: 14px;
}

/* Menu headers/titles if any */
.menu-header {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}


/* ================================================= */

/* components\modals.css */
/* ========================================================================== */
/*                              MODAL STYLES                                 */
/* ========================================================================== */

/* Modal backdrop with blur effect */
.modal-bg {
    background-color: rgba(0, 0, 0, 0.3) !important; /* Force semi-transparent black */
    backdrop-filter: blur(16px);
    opacity: 1 !important;
}

/* Main Modal and Prompt containers */
.prompt,
.modal {
    background-color: rgba(var(--background-primary-rgb), 0.25) !important; /* Lighter background */
    border: 1px solid var(--background-modifier-border);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Ensure content areas are transparent to show the blur */
.modal-content,
.modal-sidebar,
.modal-header,
.modal-form,
.hotkey-settings-container,
.community-modal-info {
    background: transparent !important;
}

/* Tabs inside modals (e.g. Settings) */
.horizontal-tab-content, 
.vertical-tab-content, 
.vertical-tab-header {
    background: transparent !important;
}

/* Settings sidebar specific */
.vertical-tab-header {
    border-right: 1px solid var(--background-modifier-border);
}

/* Community plugin cards */
.community-item {
    background-color: rgba(var(--background-primary-rgb), 0.4);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
}


/* ================================================= */

/* components\notices.css */
/* ========================================================================== */
/*                                  NOTICES                                   */
/* ========================================================================== */

.notice {
    background-color: rgba(var(--background-secondary-rgb), 0.6);
    backdrop-filter: blur(8px);
    border: 2px solid var(--background-modifier-border);
    border-radius: var(--radius-l);
    color: var(--text-normal);
}


/* ================================================= */

/* components\toggles.css */
/* ========================================================================== */
/*                           TOGGLES & CHECKBOXES                             */
/* ========================================================================== */

/* --- Settings Toggles --- */
.setting-item.mod-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 8px;
}

/* Info section (Label + Desc) */
.setting-item-info {
    padding-right: 12px;
    min-width: 0;
}

.setting-item-description > div {
    margin-bottom: 1px;
    font-size: 0.85em;
    color: var(--text-faint);
}

/* Control section (The Switch) */
.setting-item-control {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* --- General Checkboxes --- */
input[type="checkbox"] {
    border: 3px solid var(--checkbox-border-color);
    border-radius: var(--checkbox-radius);
    cursor: pointer;
}

/* Checkbox Container Wrapper (Obsidian UI Toggles) */
.checkbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--background-modifier-form-field);
    border-radius: 12px;
}

/* Enabled state - Default Obsidian checkmark behavior */
.checkbox-container.is-enabled {
    background-color: var(--interactive-accent);
}

/* Disabled state */
.checkbox-container input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Extra Settings Buttons */
.extra-setting-button {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.extra-setting-button:hover {
    background-color: var(--background-modifier-hover);
}

/* Installed Plugins List Spacing */
.installed-plugins-container .setting-item.mod-toggle {
    background-color: rgba(var(--background-primary-rgb), 0.25) !important;
    border: 2px solid var(--background-modifier-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
}


/* ================================================= */

/* components\tooltips.css */
/* ========================================================================== */
/*                                  TOOLTIPS                                  */
/* ========================================================================== */

.tooltip {
    backdrop-filter: blur(16px);
    background: rgba(var(--background-primary-rgb), 0.85);
    border: 1px solid var(--background-modifier-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-l);
    color: var(--text-normal);
    padding: 6px 10px;
}


/* ================================================= */

/* editor\blocks.css */
/* ========================================================================== */
/*                           BLOCK ELEMENTS                                   */
/* ========================================================================== */

/* --- Blockquotes --- */
blockquote {
	border: none;
	border-left: 2px solid var(--blockquote-border);
	border-radius: var(--radius-m);
	color: var(--blockquote-color);
	position: relative;

	padding: 12px 16px 12px 40px; /* место под иконку */
	overflow: hidden; /* КЛЮЧЕВО */
}

/* Decorative Quote Mark */
blockquote::before {
	content: "𒀭";
	color: var(--blockquote-quote-mark);
	position: absolute;
	top: 7px;
	left: 14px;
	line-height: 1;
	font-size: 1.2em;
	font-family: 'Georgia', serif;
	pointer-events: none;
	opacity: 0.5;
}

/* Content styling - ensure text doesn't overlap with the decorative icon */
blockquote p {
    padding-left: 24px;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    margin: 0;
}

/* Live Preview Formatting for Quotes */
.cm-formatting.cm-formatting-quote {
    color: var(--blockquote-accent) !important;
    font-weight: 600;
    opacity: 0.8;
}



/* ================================================= */

/* editor\headers.css */
/* ========================================================================== */
/*                               HEADERS                                      */
/* ========================================================================== */

/*
   Contains:
   1. Typography & Spacing
   2. Colors & Indicators (Left bar)
   3. Dividers (Bottom lines)
   4. Folding Indicators
   5. Inner Formatting Overrides (Bold/Italic fixes)
*/

/* -------------------------------------------------------------------------- */
/*                           1. Typography & Spacing                          */
/* -------------------------------------------------------------------------- */

.markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3,
.markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6,
.HyperMD-header {
    position: relative;
    font-family: var(--font-family-heading);
    font-weight: 400;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    z-index: 1;
}

/* -------------------------------------------------------------------------- */
/*                           2. Colors & Indicators                           */
/* -------------------------------------------------------------------------- */

/* Colors */
:is(.markdown-preview-view h1, .HyperMD-header-1, .cm-header-1) { color: var(--h1-color) !important; }
:is(.markdown-preview-view h2, .HyperMD-header-2, .cm-header-2) { color: var(--h2-color) !important; }
:is(.markdown-preview-view h3, .HyperMD-header-3, .cm-header-3) { color: var(--h3-color) !important; }
:is(.markdown-preview-view h4, .HyperMD-header-4, .cm-header-4) { color: var(--h4-color) !important; }
:is(.markdown-preview-view h5, .HyperMD-header-5, .cm-header-5) { color: var(--h5-color) !important; }
:is(.markdown-preview-view h6, .HyperMD-header-6, .cm-header-6) { color: var(--h6-color) !important; }

/* Left "Block" Indicator (The ▍ character) */
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6)::before,
.HyperMD-header::before {
    content: "▍";
    opacity: 0.8;
    margin-right: 6px;
    font-weight: normal;
}

/* Colorize the indicator */
:is(.markdown-preview-view h1, .HyperMD-header-1)::before { color: var(--h1-color); }
:is(.markdown-preview-view h2, .HyperMD-header-2)::before { color: var(--h2-color); }
:is(.markdown-preview-view h3, .HyperMD-header-3)::before { color: var(--h3-color); }
:is(.markdown-preview-view h4, .HyperMD-header-4)::before { color: var(--h4-color); }
:is(.markdown-preview-view h5, .HyperMD-header-5)::before { color: var(--h5-color); }
:is(.markdown-preview-view h6, .HyperMD-header-6)::before { color: var(--h6-color); }

/* -------------------------------------------------------------------------- */
/*                           3. Dividers (Underlines)                         */
/* -------------------------------------------------------------------------- */

/* Base style for the divider line - Applied ALWAYS */
:is(.markdown-preview-sizer > div > :is(h1, h2, h3, h4, h5, h6),
    .markdown-rendered > :is(h1, h2, h3, h4, h5, h6),
    .HyperMD-header)::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 1px;
    transform: translateY(3px); /* Опускаем линию ниже */
    line-height: unset !important;
    opacity: 0.4;
    pointer-events: none;
    border-radius: 10px;
}

/* Gradients per header level with hierarchical thickness */
:is(.markdown-preview-view h1, .HyperMD-header-1)::after {
    height: 5px;
    background: linear-gradient(to right, var(--h1-color) 30%, transparent 70%);
}
:is(.markdown-preview-view h2, .HyperMD-header-2)::after {
    height: 4px;
    background: linear-gradient(to right, var(--h2-color) 30%, transparent 70%);
}
:is(.markdown-preview-view h3, .HyperMD-header-3)::after {
    height: 3px;
    background: linear-gradient(to right, var(--h3-color) 30%, transparent 70%);
}
:is(.markdown-preview-view h4, .HyperMD-header-4)::after {
    height: 2px;
    background: linear-gradient(to right, var(--h4-color) 30%, transparent 70%);
}
:is(.markdown-preview-view h5, .HyperMD-header-5)::after {
    height: 1px;
    background: linear-gradient(to right, var(--h5-color) 30%, transparent 70%);
}
:is(.markdown-preview-view h6, .HyperMD-header-6)::after {
    height: 1px;
    background: linear-gradient(to right, var(--h6-color) 30%, transparent 70%);
}

/* -------------------------------------------------------------------------- */
/*                           4. Folding Indicators                            */
/* -------------------------------------------------------------------------- */

/* Hide default SVG chevron */
.HyperMD-header .cm-fold-indicator .collapse-indicator svg {
    display: none;
}

/* Always show collapse indicator */
.HyperMD-header .cm-fold-indicator .collapse-indicator {
    opacity: 1 !important;
}

.HyperMD-header .cm-fold-indicator .collapse-indicator::before {
    font-size: calc(var(--font-text-size) * 0.75);
    font-weight: 600 !important;
    color: var(--text-faint);
    width: max-content;
}

.cm-fold-indicator:hover .collapse-indicator { color: var(--accent-color) !important; }

/* -------------------------------------------------------------------------- */
/*                           5. Inner Formatting Overrides                    */
/* -------------------------------------------------------------------------- */

/*
   Force Bold, Italic, and other formatting INSIDE headers
   to inherit the header's color instead of using the global accent color.
*/
:is(.markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3,
    .markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6,
    .HyperMD-header) :is(strong, b, em, i, .cm-strong, .cm-em) {
    color: inherit !important;
}


/* ================================================= */

/* editor\interface.css */
/* ========================================================================== */
/*                           EDITOR INTERFACE                                 */
/* ========================================================================== */


/* Bottom Panels (Search/Replace) */
.ͼ2 .cm-panels-bottom {
    border-top: var(--border-width) solid var(--bg_highlight);
}

/* Vim Mode Messages */
.cm-vim-message { color: var(--red); }

/* Tag Pills */
.multi-select-pill { line-height: normal; }

/* Remove line-height from metadata tags */
.metadata-property-value[data-property-type="tags"] .multi-select-pill {
    line-height: unset;
}


/* ================================================= */

/* editor\lists.css */
/* ========== LEVEL 1 ========== */
/* Большая точка */
ul:not(li > *) > li > .list-bullet::after,
.HyperMD-list-line-1 .list-bullet::after {
	height: 6px;
	width: 6px;
	border-radius: 50%;
	background-color: var(--bullet-new-color);
}

/* ========== LEVEL 2 ========== */
/* Пустой кружок */
ul:not(li > *) > li > ul > li > .list-bullet::after,
.HyperMD-list-line-2 .list-bullet::after {
	height: 6px;
	width: 6px;
	background-color: transparent;
	border: 2px solid var(--bullet-new-color);
	border-radius: 50%;
}

/* ========== LEVEL 3 ========== */
/* Чёрточка */
ul:not(li > *) > li > ul > li > ul > li > .list-bullet::after,
.HyperMD-list-line-3 .list-bullet::after {
	height: 2px;
	width: 8px;
	border-radius: 0;
	background-color: var(--bullet-new-color);
}

/* ========== LEVEL 4 ========== */
/* Маленькая точка */
ul:not(li > *) > li > ul > li > ul > li > ul > li > .list-bullet::after,
.HyperMD-list-line-4 .list-bullet::after {
	height: 3px;
	width: 3px;
	border-radius: 50%;
	background-color: var(--bullet-new-color);
}

/* ========== LEVEL 5 ========== */
/* Квадрат */
ul:not(li > *) > li > ul > li > ul > li > ul > li > ul > li > .list-bullet::after,
.HyperMD-list-line-5 .list-bullet::after {
	height: 5px;
	width: 5px;
	border-radius: 0;
	background-color: var(--bullet-new-color);
}

ul > li.task-list-item > .task-list-item-checkbox {
	margin-inline-start: 0;
}

.markdown-rendered ul > li,
.markdown-rendered ol > li {
    margin-inline-start: 2ch !important;
}


/* ================================================= */

/* editor\media.css */
/* ========================================================================== */
/*                               MEDIA & EMBEDS                               */
/* ========================================================================== */

.image-embed {
    border-radius: var(--image-radius);
}

/* Minimal Image Captions (Plugin Support) */
.minimal-image-captions .image-captions-figure { background-color: transparent !important; }
.minimal-image-captions .image-captions-caption { background-color: transparent !important; text-align: left !important; }


/* ================================================= */

/* editor\syntax.css */
/* ========================================================================== */
/*                           SYNTAX HIGHLIGHTING                              */
/* ========================================================================== */

/* General Token Colors */
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--code-comment); }
.token.punctuation { color: var(--text-muted); }
.token.property, .token.tag, .token.constant, .token.symbol, .token.deleted { color: var(--code-property); }
.token.boolean, .token.number { color: var(--code-number); }
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: var(--code-string); }
.token.operator, .token.entity, .token.url, .token.variable { color: var(--code-operator); }
.token.atrule, .token.attr-value, .token.function, .token.class-name { color: var(--code-function); }
.token.keyword { color: var(--code-keyword); }
.token.regex, .token.important { color: var(--code-number); }

/* Font Styles in Code */
.token.important, .token.bold { font-weight: bold; }
.token.italic { font-style: italic; }

/* MathJax */
mjx-math { font-size: 110% !important; }

/* Frontmatter */
span.cm-hmd-frontmatter.cm-meta { color: rgba(var(--blue0_x), 0.9); }
.cm-hmd-frontmatter { font-size: 0.9em; color: var(--text-faint); }

/* Inline Code Atoms */
.cm-atom { color: var(--blue); }


/* ================================================= */

/* editor\text.css */
/* ========================================================================== */
/*                           TEXT TYPOGRAPHY                                  */
/* ========================================================================== */

/* Bold (Strong) */
.cm-strong, strong, b {
    color: var(--bold-color) !important;
    font-weight: 700 !important;
}

/* Italic (Emphasis) */
.cm-em, em, i {
    color: var(--italic-color) !important;
    font-style: italic;
}

/* Combined Bold + Italic */
.cm-strong.cm-em, strong em, em strong, b i, i b {
    color: var(--orange) !important;
    font-weight: 700;
    font-style: italic;
}

/* Strikethrough */
.cm-strikethrough, s, del {
    color: var(--text-error) !important;
    text-decoration: line-through;
    opacity: 0.8;
}

/* Highlight (Mark) */
mark, .cm-highlight {
    background: var(--text-highlight-bg);
    color: var(--text-normal);
    padding: 0 4px;
    border-radius: 3px;
    font-weight: 500;
}

mark:hover, .cm-highlight:hover {
    background: rgba(var(--orange_x), 0.35);
}

/* Insertions */
ins, .cm-ins {
    text-decoration: none;
    border-bottom: 2px solid var(--insertion-color);
}


/* ================================================= */

/* plugins\spoiler.css */
/* ========================================================================== */
/*                               SPOILERS                                    */
/* ========================================================================== */

.spoiler{
    position: relative;
    background-color: var(--spoiler-background) !important;
    color: transparent !important;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    overflow: hidden;
}

.spoiler::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.9;
    background-image: var(--spoiler-pattern);
    background-repeat: repeat;
    animation: snowfall 1.5s linear infinite;
}

@keyframes snowfall {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 40px;
    }
}

.spoiler:hover {
    background-color: var(--spoiler-background-hover) !important;
}

.spoiler.spoiler-revealed {
    background-color: var(--spoiler-background-hover) !important;
    color: var(--text-normal) !important;
}

.cm-spoiler {
    position: relative;
    background-color: var(--spoiler-background-hover) !important;
    color: var(--text-normal) !important;
    border-radius: 4px;
    padding: 2px 6px;
    overflow: hidden;
}

.cm-spoiler::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.8;
    background-image: var(--spoiler-pattern);
    background-repeat: repeat;
    background-size: 100px 40px;
    animation: snowfall 1.5s linear infinite;
}

@media (prefers-reduced-motion: reduce) {

    .spoiler::before,
    .cm-spoiler::before {
        animation: none !important;
    }
}


/* ================================================= */

/* settings.css */
/* @settings

name: Robsi Appearance
id: Appearance
settings:
  -
    id: colors
    title: Colors
    type: heading
    level: 1
    collapsed: true
  -
    id: accent
    title: Accent Color
    type: variable-themed-color
    format: hsl-split
    opacity: false
    default-light: '#0078B4'
    default-dark: '#80D0FF'
  -
    id: Extended-colors
    title: Extended Colors
    type: heading
    level: 2
    collapsed: true
  -
    id: red
    title: Red
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(180, 30, 50)'
    default-dark: 'rgb(219, 75, 75)'
  -
    id: red1
    title: Red1
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(200, 50, 70)'
    default-dark: 'rgb(255, 117, 127)'
  -
    id: green
    title: Green
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(20, 140, 80)'
    default-dark: 'rgb(158, 206, 106)'
  -
    id: cyan
    title: Cyan
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(0, 120, 180)'
    default-dark: 'rgb(125, 207, 255)'
  -
    id: blue
    title: Blue
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(30, 70, 160)'
    default-dark: 'rgb(122, 162, 247)'
  -
    id: yellow
    title: Yellow
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(180, 120, 0)'
    default-dark: 'rgb(224, 175, 104)'
  -
    id: orange
    title: Orange
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(220, 100, 20)'
    default-dark: 'rgb(255, 158, 100)'
  -
    id: magenta
    title: Magenta
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(160, 30, 140)'
    default-dark: 'rgb(187, 154, 247)'
  -
    id: pink
    title: Pink
    type: variable-themed-color
    format: rgb
    opacity: false
    default-light: 'rgb(200, 30, 140)'
    default-dark: 'rgb(217, 0, 105)'
  -
    id: lists-heading
    title: Lists
    type: heading
    level: 2
    collapsed: true
  -
    id: list-indent
    title: List Indent
    description: Indentation for nested list items
    type: variable-text
    default: 2em
  -
    id: list-spacing
    title: List Spacing
    description: Vertical spacing between list items
    type: variable-text
    default: 0
  -
    id: unordered-lists-heading
    title: Unordered Lists (Bullets)
    type: heading
    level: 3
    collapsed: true
  -
		id: list-marker-color
		title: Bullet Color
		description: Color for list bullet markers
		type: variable-themed-color
		format: rgb
		opacity: false
		default-light: 'rgb(160, 30, 140)'
		default-dark: 'rgb(187, 154, 247)'
  -
		id: list-marker-color-hover
		title: Bullet Hover Color
		description: Color when hovering over list bullets
		type: variable-themed-color
		format: rgb
		opacity: false
		default-light: 'rgb(0, 120, 180)'
		default-dark: 'rgb(125, 207, 255)'
  -
		id: list-marker-color-collapsed
		title: Bullet Collapsed Color
		description: Color for collapsed list bullets
		type: variable-themed-color
		format: rgb
		opacity: false
		default-light: 'rgb(120, 125, 135)'
		default-dark: 'rgb(86, 95, 137)'
  -
    id: ordered-lists-heading
    title: Ordered Lists (Numbers)
    type: heading
    level: 3
    collapsed: true
  -
		id: list-number-color
		title: Number Color
		description: Color for ordered list numbers
		type: variable-themed-color
		format: rgb
		opacity: false
		default-light: 'rgb(160, 30, 140)'
		default-dark: 'rgb(187, 154, 247)'
  -
		id: list-number-color-hover
		title: Number Hover Color
		description: Color when hovering over list numbers
		type: variable-themed-color
		format: rgb
		opacity: false
		default-light: 'rgb(0, 120, 180)'
		default-dark: 'rgb(125, 207, 255)'

*/