.vs-dark-modern {
    --color-assistant: rgb(65, 104, 136);
    --color-light-blue: #212325;
    --color-dark-blue: #1f2730;
    --color-primary: #0c0e0f;
    --color-secondary: #0c0e0f;
    --color-third: #121416;
    --color-fourth: #181b1d;
    --color-fifth: #1f2225;
    --color-file-explorer: #0c0e0f;
    --color-file-hover: #181b1d;
    --color-file-active: #1f2225;
    --color-comment: #181b1d;
    --color-border-color: #2c3033;
    --color-border-hover: #293438;
    --color-accent: #eaeff3;
    --color-accent-hover: #c6d1e5;
    --color-accent-text: #111a2c;
    --color-accent2: #0078d4;
    --color-accent2-hover: #0062ad;
    --color-accent2-text: #ffffff;
    --color-accent4: #2d2b38;
    --color-accent4-text: #9f9fe0;
    --color-note-text: #94aab4;
    --color-text: #b4c7d1;
    --color-textHilight: #f2f3f5;
    --color-blur: #181b1dad;
    --color-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4);
    --scroll-background: #181b1d;
    --scroll-thumb: #262a2e;
    --color-href: #649efc;
    --color-href-hover: #649efc;
    --color-href-visited: #7979ff;
    --color-href-active: #7979ff;
    --color-selected: rgba(0, 123, 255, 0.2582);
    --color-editor: #121416;
    --color-editor-header: #121416;
    --color-editor-tabs: #121416;

    --color-window-header: #0c0e0f;
    --color-window-header-hover: #1f2225;

    --window-border-color: #0c0e0f;

    --window-border-color: #2c3033;

    --search-result-hilight-background: #fc650054;
    --color-preview-background: #121416;

    --color-bg: #121416;
    --color-bg-alt: #121416;
    --color-button: #181b1d;
    --color-button-hover: #1f2225;
    --color-border: #2c3033;
    --color-run: #2f8f4f;
    --color-stop: #c57d46;
    --color-code: #0078d4;

    --shadow: 0 10px 30px rgba(0, 0, 0, .35);


    --color-error: #ff5d5d;
    --color-warn: #ffb84d;
    --color-info: #4db3ff;
    --color-debug: #9a7bff;

}

.vs-code-light {
    --color-assistant: #ffffff;
    --color-light-blue: #cfddfc;
    --color-dark-blue: #e5effd;
    --color-primary: #e9eef6;
    --color-secondary: #f7f8fa;
    --color-third: #ffffff;
    --color-fourth: #f8fafd;
    --color-fifth: #e9eef6;
    --color-comment: #f6f9fd;
    --color-border-color: #d6dae2;
    --color-border-hover: #c3c9d3;
    --color-accent: #16161f;
    --color-accent-hover: #394456;
    --color-accent-text: #ffffff;
    --color-accent2: #0041f3;
    --color-accent2-hover: #0039d4;
    --color-accent2-text: #ffffff;
    --color-accent4: #eeedfd;
    --color-accent4-text: #5748c7;
    --color-note-text: #717176;
    --color-text: #100f16;
    --color-textHilight: #07060c;
    --color-blur: #f8fafdad;
    --color-box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
    --scroll-background: #f1f4f8;
    --scroll-thumb: #d5dce7;
    --color-href: #0084ff;
    --color-href-hover: #0084ff;
    --color-href-visited: #6e6efa;
    --color-href-active: #8c8cff;
    --color-selected: rgba(0, 123, 255, 0.158);
    --color-editor: #ffffff;
    --color-editor-header: #f8fafd;
    --color-editor-tabs: #f8fafd;
    --color-file-explorer: #f8fafd;
    --color-file-hover: #f3f5f8;
    --color-file-active: #e9eef6;

    --color-window-header: #f8fafd;
    --color-window-header-hover: #e0e6f0;

    --window-border-color: var(--color-primary);

    --window-border-color: var(--color-border-color);

    --search-result-hilight-background: #fc650054;
    --color-preview-background: var(--color-third);

    --color-bg: var(--color-third);
    --color-bg-alt: var(--color-third);
    --color-button: var(--color-fourth);
    --color-button-hover: color-mix(in srgb, var(--color-fifth), var(--color-fifth));
    --color-border: var(--color-border-color);
    --color-run: #2f8f4f;
    --color-stop: #c57d46;
    --color-code: #0078d4;

    /* effects */
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);


    --color-error: #ff5d5d;
    --color-warn: #c57d46;
    --color-info: #4db3ff;
    --color-debug: #9a7bff;

}

:root {
    --spacing-xsm: 0.425rem;
    --spacing-sm: 0.85rem;
    --spacing-md: 2rem;
    --spacing-lg: 2rem;
    --border-radius: 11px;
    --border-radius-input: 1.25rem;
    --border-radius-button: 6px;
    --border-radius-round: 30px;
    --font-family: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    --font-size-xsm: 0.75rem;
    --font-size-sm: 0.85em;
    --font-size-md: 1em;
    --font-size-lg: 1.1em;
    --font-size-xlg: 1.3em;
    --font-size-console: 13px;

    --divider-margin: -1px;
    --divider-width: 5px;
    --window-border-radius: 8px;

    --divider-margin: -2px;
    --divider-width: 5px;
    --window-border-radius: 0;

    --radius: 4px;
    --h: 48px;
    --tabs: 38px;

    --split: 50%;
    --gutter: 7px;

    --panel-w: 320px;
    --assets-w: 460px;


    /* effects */
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);

    /* console */
    --consoleH: 180px;
    --consoleResize: 7px;

}


* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font: 14px/1.3 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--color-text);
    background: var(--color-bg);
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

/* =========================================================
       App layout
       ========================================================= */
.app {
    height: 100%;
    display: grid;
    grid-template-rows: var(--h) 1fr 0px 0px;
    min-height: 0;
}

body.consoleOpen .app {
    grid-template-rows: var(--h) 1fr var(--consoleResize) var(--consoleH);
}

/* =========================================================
       Header
       ========================================================= */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    background: var(--color-bg-alt);
    min-width: 0;
}

.left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.titleRow {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.projTitle {
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
}

.author {
    font-size: 12px;
}

.author a {
    color: var(--color-note-text);
    border-bottom: 1px solid transparent;
}

.author a:hover {
    color: var(--color-href);
    border-bottom-color: var(--color-href);
}

.home {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-button);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.home:hover {
    background: var(--color-button-hover);
}

.homeIcon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

/* =========================================================
       Buttons
       ========================================================= */
.btn {
    height: 30px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--color-button);
    color: var(--color-note-text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

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

.btn i {
    font-size: 18px;
    color: inherit
}

.btn:hover i {}

.btn.iconOnly {
    width: 34px;
    padding: 0;
    justify-content: center;
}

.btn.small {
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: transparent;
}

.btn.small:hover {
    background: transparent;
}

.btn.small:hover i {}

.btn.run-code {
    background: var(--color-run);
}

.btn.stop-code {
    background: var(--color-stop);
}

.btn.return-code {
    background: var(--color-stop);
}

.btn.run-code:hover {
    background: color-mix(in srgb, var(--color-run) 80%, var(--color-fifth) 20%);
}

.btn.stop-code:hover {
    background: color-mix(in srgb, var(--color-stop) 80%, var(--color-fifth) 20%);
}


.btn.return-code:hover {
    background: color-mix(in srgb, var(--color-stop) 80%, var(--color-fifth) 20%);
}


.btn.run-code i,
.btn.stop-code i,
.btn.return-code i {
    color: white;
}

#btnCode {
    display: none;
}

#btnRefresh {
    display: none !important;
}

body.showCodeBtn #btnCode {
    display: inline-flex;
}

/* =========================================================
       Main work area (WORK AREA + optional assets)
       ========================================================= */
.main {
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;

    /* outer grid: work area, optional assets */
    display: grid;
    grid-template-columns: 1fr;
}

.main.assetsOn {
    grid-template-columns: 1fr var(--assets-w);
}

/* WORK AREA is its own grid, so --split is always relative to available space */
.workArea {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

.main.previewOn .workArea {
    grid-template-columns: minmax(0, var(--split)) var(--gutter) minmax(0, 1fr);
}

.main.previewOn.fullPreview .workArea {
    grid-template-columns: 1fr;
}

.editorPane,
.previewPane,
.assetsPane {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.editorPane {
    height: 100%;
    display: grid;
    grid-template-rows: var(--tabs) 1fr;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    min-height: 0;
    border-bottom: 1px solid var(--color-border);
}

.main:not(.previewOn) .editorPane {
    border-right: none;
}

.main.assetsOn:not(.previewOn) .editorPane {
    border-right: 1px solid var(--color-border);
}

.tabsBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);
    gap: 10px;
    min-width: 0;
}

.tabsLeft {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.tabsRight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: auto;
    scrollbar-width: thin;
    min-width: 0;
    padding-bottom: 2px;
}

.tab {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px 0 4px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-note-text);
    cursor: pointer;
    white-space: nowrap;
}

.tab span {
    user-select: none;
}

.tab:hover {
    background: var(--color-button);
    color: var(--color-textHilight);
}

.tab.active {
    color: var(--color-textHilight);
    background: var(--color-button-hover);
}

.fileIcon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-note-text);
}

.tab.active .fileIcon {
    color: var(--color-text);
}

.tabClose {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    margin-left: 2px;
    color: var(--color-note-text) !important;
    flex: 0 0 auto;
    opacity: 0
}

.tab:hover .tabClose {
    opacity: 0.7
}

.tabClose:hover {
    opacity: 1 !important;
    color: var(--color-textHilight) !important;
}

.tabClose i {
    font-size: 16px;
    color: inherit;
}

#editor {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 200px;
}

.gutter {
    display: none;
    height: 100%;
    background: var(--color-bg-alt);
    border-left: 1px solid transparent;
    border-left: 1px solid transparent;
    cursor: col-resize;
    position: relative;
}

.main.previewOn:not(.fullPreview) .gutter {
    display: block;
}

/* 
        .gutter::after {
            content: "";
            position: absolute;
            top: 50%;
            left: calc(50% - 1px);
            width: 4px;
            height: 54px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
            opacity: 0;
        }

        .gutter:hover::after {
            background: var(--color-border-hover);
            opacity: 1;
        } */

.previewPane {
    height: 100%;
    display: none;
    grid-template-rows: 1fr;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}

.main.previewOn .previewPane {
    display: grid;
}

.main.previewOn.fullPreview .editorPane,
.main.previewOn.fullPreview .gutter {
    display: none !important;
}

.main.previewOn.fullPreview .previewPane {
    display: grid !important;
}

iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--color-bg);
    display: block;
}

/* =========================================================
       Assets Browser (pushes layout)
       ========================================================= */
.assetsPane {
    display: none;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    min-height: 0;
}

.main.assetsOn .assetsPane {
    display: grid;
    grid-template-rows: 42px 1fr;
    min-width: 0;
}

.assetsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-top: 1px solid var(--color-border);
    gap: 10px;
    min-width: 0;
    max-height: 38px;
}

.assetsTitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    letter-spacing: .2px;
    min-width: 0;
}

.assetsTitle i {
    color: var(--color-note-text);
    font-size: 18px;
}

.assetsBody {
    overflow: auto;
    padding: 4px;
    min-height: 0;
    padding-top: 0;
}

/* 2 per row */
.assetsGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    align-content: start;
}

.assetCard {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 4px;
}

.assetThumb {
    width: 100%;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, .18);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.assetThumb img {
    /* ✅ critical: allow shrinking inside CSS grid */
    min-width: 100%;
    min-height: 100%;

    /* fit within the thumb box */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;

    display: block;
    object-fit: contain;
    background-color: white;
    cursor: grab;
}


/* --- Asset card hover actions (top-right) --- */
.assetThumb {
    position: relative;
    /* needed for absolute action button */
}

.assetName {
    padding: 2px;
}

.assetAction {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;

    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    backdrop-filter: blur(6px);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateY(-2px);
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease, background .12s ease;
    cursor: pointer;
}

.assetAction i {
    font-size: 18px;
    color: var(--color-text);
    opacity: .9;
}

.assetCard:hover .assetAction,
.assetCard:focus-within .assetAction {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.assetAction:hover {
    background: var(--color-button-hover);
}

/* Hide the URL/path row entirely (cleaner cards) */
.assetPathRow {
    display: none;
}


.copyBtn {
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: var(--color-button);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.copyBtn:hover {
    background: var(--color-button-hover);
}

.copyBtn i {
    font-size: 18px;
    color: var(--color-note-text);
}

.copyBtn:hover i {
    color: var(--color-text);
}

.copyToast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 2000;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow);
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 13px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
}

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

/* =========================================================
       Settings drawer (right overlay)
       ========================================================= */
.drawerOverlay {
    position: fixed;
    inset: 0;
    background: var(--color-blur);
    display: none;
    z-index: 901;
}

.drawerOverlay.open {
    display: block;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--panel-w);
    height: 100%;
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    box-shadow: var(--color-box-shadow);
    transform: translateX(102%);
    transition: transform .16s ease;
    z-index: 902;
    display: grid;
    grid-template-rows: var(--h) 1fr;
}

.drawer.open {
    transform: translateX(0);
}

.drawerHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.drawerTitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--color-text);
}

.drawerBody {
    /* padding: 14px 12px; */
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =========================================================
       VFS drawer (left overlay)
       ========================================================= */
.vfsDrawer {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--panel-w);
    height: 100%;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--color-box-shadow);
    transform: translateX(-102%);
    transition: transform .16s ease;
    z-index: 902;
    display: grid;
    grid-template-rows: var(--h) 1fr;
}

.vfsDrawer.open {
    transform: translateX(0);
}

.vfsDrawerBody {
    padding: 10px 10px 14px;
    overflow: auto;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    min-height: 0;
}

.vfsToolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

.vfsToolbarLeft {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.vfsSectionLabel {
    font-size: 12px;
    letter-spacing: .2px;
    color: var(--color-note-text);
    padding: 2px 2px 0;
}

.vfsTreeWrap {
    min-height: 0;
    overflow: auto;
}

.vfsTree {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

/* Folder open/closed icons (Tabler) */
.vfsTree .dirIcon .folderOpen {
    display: none;
}

.vfsTree details[open]>summary .dirIcon .folderOpen {
    display: inline-block;
}

.vfsTree details[open]>summary .dirIcon .folderClosed {
    display: none;
}

.vfsTree details>summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
    color: var(--color-text);
}

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

.vfsTree details>summary:hover {
    background: var(--color-button);
}

.vfsRowLeft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.vfsRowLeft span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vfsTree .dirIcon,
.vfsTree .leafIcon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-note-text);
    flex: 0 0 auto;
}

.vfsTree .vfsChildren {
    margin: 0;
    padding: 0 0 0 16px;
    list-style: none;
}

.vfsFileBtn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-note-text);
    cursor: pointer;
    text-align: left;
    max-height: 32px;
}

.vfsFileBtn:hover {
    background: var(--color-button);
    color: var(--color-text);
}

.vfsTree details>summary:hover .vfsDots,
.vfsFileBtn:hover .vfsDots {
    opacity: 1;
}

.vfsFileBtn.active {
    background: var(--color-button-hover);
    color: var(--color-textHilight);
}

.vfsDots {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    color: var(--color-note-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    opacity: 0;
}

.vfsDots:hover {
    color: var(--color-textHilight);
}

.vfsDots i {
    font-size: 16px;
    color: inherit;
}

.vfsMenu {
    position: fixed;
    min-width: 160px;
    background: var(--color-fourth);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--border-radius-button);
    box-shadow: var(--color-box-shadow);
    padding: 6px;
    z-index: 1000;
    display: none;
}

.vfsMenu.open {
    display: block;
}

.vfsMenuItem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-xsm);
    padding: 0.4rem var(--spacing-sm);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--color-text);
    background: transparent;
    border: 0;
    text-align: left;
}

.vfsMenuItem:hover {
    background: var(--color-fifth);
    color: var(--color-textHilight);
}

.vfsMenuItem i {
    font-size: 14px !important;
    /* color: var(--color-note-text); */
    margin-right: var(--spacing-sm);
}

/* =========================================================
       Global console (always available)
       ========================================================= */
.console-toggle-global {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 80;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--color-button);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
}

.console-toggle-global:hover {
    background: var(--color-button-hover);
}

.console-toggle-global i {
    font-size: 20px;
    color: var(--color-text);
}

.console-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(220, 80, 80, .95);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .25);
}

#consoleHResize {
    display: none;
}

#consoleDock {
    display: none;
}

body.consoleOpen #consoleHResize {
    display: block;
}

body.consoleOpen #consoleDock {
    display: grid;
    grid-template-rows: 42px 1fr;
}

.consoleHResize {
    cursor: row-resize;
    background: var(--color-bg-alt);
    position: relative;
}

/* .consoleHResize::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 54px;
            height: 4px;
            transform: translate(-50%, -50%);
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
            opacity: 0;
        }

        .consoleHResize:hover::after {
            opacity: 1;
            background: var(--color-border-hover);
        } */

.consoleDock {
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.consoleDockHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.consoleDockTitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.consoleDockTitle i {
    color: var(--color-note-text);
    font-size: 18px;
}

.consoleDockActions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.consoleDockBody {
    min-height: 0;
    overflow: auto;
}

.console-log-container {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.console-item-span {
    white-space: pre-wrap;
    line-height: 1.5;
    padding-left: 6px;
}

@media (max-width: 980px) {
    :root {
        --assets-w: 380px;
        --panel-w: 300px;
    }
}

@media (max-width: 760px) {
    :root {
        --assets-w: 320px;
        --panel-w: 280px;
    }

    .assetsGrid {
        grid-template-columns: 1fr;
    }
}














:root {
    --font-size-sm: 14px;
    --font-size-xsm: 13px;
    --font-size-path: 0.8rem;
}

.minimap-decorations-layer {
    border-right: none;
}

.monaco-hover-content {
    background-color: var(--color-bg-alt) !important;
}

.monaco-menu {
    background-color: var(--color-button);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius) !important;
    position: fixed;
    box-shadow: var(--shadow);
    font-size: var(--font-size-sm) !important;
    display: flex;
    padding: 6px;
    gap: 6px;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;

}

.monaco-menu .monaco-menu {
    margin-top: -35px;
    border-radius: var(--radius) !important;
}

.monaco-menu .action-item {
    font-size: var(--font-size-xsm) !important;
    padding: 0.15rem 10px !important;
    padding-bottom: 0rem !important;
    padding-left: 0.1rem !important;
    padding-right: 1.2rem;
    position: relative;
    margin-bottom: 6px;
    border-radius: 4px;
    color: var(--color-text);
    font-weight: 500;
    align-items: center !important;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
    font-weight: 400;
}

.monaco-menu .action-item i {
    position: relative;
    top: -1px;
}

.monaco-menu .action-item:last-child {
    margin-bottom: -4px;
}

.monaco-menu .action-item:first-child {
    margin-top: -4px;
}

.monaco-menu .action-item:hover {
    background-color: var(--color-button-hover);
    color: var(--color-text);
}

.monaco-menu .disabled {
    padding: 0 !important;
    max-height: 1px;
    background-color: var(--color-border);
    cursor: default;
    pointer-events: none;
    border: none !important;
}

.monaco-menu .action-item span:nth-child(3) {
    color: var(--color-note-text);
}

.monaco-menu .action-item:hover.action-item span:nth-child(3) {
    color: inherit !important;
}

.monaco-menu .action-item .action-menu-item {
    background: none !important;
    color: inherit !important;
}

.monaco-menu .action-item.focused .action-menu-item,
.monaco-menu .action-item.checked .action-menu-item,
.monaco-menu .action-item.selected .action-menu-item {
    background: none !important;
    color: inherit !important;
}

.monaco-menu .action-item:hover {
    background-color: var(--color-border);
    color: var(--color-text);
}

.monaco-editor .peekview-widget {
    background-color: var(--color-bg-alt) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
}

.monaco-editor .peekview-widget .peekview-editor .monaco-editor {
    background-color: var(--color-bg-alt) !important;
}

.monaco-editor .peekview-widget .peekview-editor .monaco-editor .lines-content {
    background-color: var(--color-bg-alt) !important;
}

.monaco-editor .peekview-widget .head {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    font-size: var(--font-size-sm) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 0 10px;
}

.monaco-editor .body {
    border: none !important;
}

.peekview-widget {
    background-color: var(--color-bg-alt) !important;
}

.peekview-widget .peekview-editor .editor-widget,
.peekview-widget .peekview-editor .monaco-editor,
.peekview-widget .peekview-editor .monaco-editor-background,
.peekview-widget .peekview-editor .lines-content {
    background-color: var(--color-bg-alt) !important;
}

.peekview-widget .peekview-editor .margin-view-overlays,
.peekview-widget .peekview-editor .glyph-margin,
.peekview-widget .peekview-editor .margin {
    background-color: var(--color-bg-alt) !important;
}

.monaco-editor .reference-zone-widget .ref-tree {
    line-height: 23px;
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border-left: 1px solid var(--color-border);
}

.monaco-editor .reference-zone-widget .ref-tree {
    line-height: 23px;
    color: var(--color-text) !important;
}

.monaco-editor .find-widget {
    background-color: var(--color-bg-alt) !important;
    border: 1px solid var(--color-border) !important;
    border-top: none !important;
    backdrop-filter: blur(10px);
}

.monaco-editor .find-widget .monaco-sash {
    background-color: var(--color-border) !important;
}

.monaco-sash.hover::before {
    background-color: var(--color-code) !important;
}

.monaco-inputbox>.ibwrapper {
    background-color: var(--color-border) !important;
    border: none !important;
}

.monaco-inputbox {
    border: 1px solid var(--color-border) !important;
    margin-left: 6px !important;
}

.monaco-editor .find-widget .button.left {
    margin-left: 2px !important;
    margin-top: 3px !important;
}

.monaco-editor .find-widget .button.toggle {
    height: 25px !important;
    border-radius: 5px !important;
    min-width: 16px;
}

.monaco-editor .find-widget .button,
.monaco-editor .find-widget>.button.codicon-widget-close {
    min-width: 22px;
    min-height: 22px;
    padding: 3px;
    border-radius: 5px;
}

.monaco-editor .find-widget.no-results .matchesCount {
    color: var(--color-error) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

.quick-input-widget {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}

.quick-input-widget .input {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    max-width: calc(100% - 0px);
    outline: none;
    border-radius: 4px;
}

.quick-input-widget .input:focus {
    border-color: var(--color-border);
    color: var(--color-text);
    outline: 2px solid var(--color-code);
}

.quick-input-widget .monaco-inputbox,
.quick-input-widget .monaco-inputbox>.ibwrapper {
    background-color: transparent !important;
    max-width: calc(100% - 5px);
    border: none !important;
}

.quick-input-widget .monaco-list .monaco-list-row {
    background: transparent !important;
    color: var(--color-text) !important;
}

.monaco-list.list_id_7 .monaco-list-rows {
    background: var(--color-bg-alt) !important;
}

.quick-input-widget .monaco-list-row.focused,
.quick-input-widget .monaco-list-row.selected {
    background-color: var(--color-button) !important;
    color: var(--color-text) !important;
}

.quick-input-widget .monaco-list-row:hover {
    background-color: var(--color-button-hover) !important;
    color: var(--color-text) !important;
}

.quick-input-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-border) !important;
}

.quick-input-widget .monaco-list-row .highlight {
    color: var(--color-code) !important;
    font-weight: 600;
}

.quick-input-widget .monaco-list .monaco-list-row .monaco-tl-contents {
    background: none !important;
}

.suggest-widget {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}

.suggest-widget .tree {
    background-color: transparent !important;
    border: none !important;
    overflow: hidden;
}

.suggest-widget .monaco-list {
    background-color: transparent !important;
    border: none !important;
}

.suggest-widget .monaco-scrollable-element {
    background-color: transparent !important;
}

.suggest-widget .monaco-list {
    background-color: var(--color-bg-alt) !important;
}

.suggest-widget .monaco-list-row {
    background: transparent !important;
    color: var(--color-text) !important;
}

.suggest-widget .monaco-list-row.focused,
.suggest-widget .monaco-list-row.selected {
    background-color: var(--color-button) !important;
    color: var(--color-text) !important;
}

.suggest-widget .monaco-list-row .highlight {
    color: var(--color-code) !important;
    font-weight: 600;
}

.suggest-widget .monaco-list-row:hover {
    background-color: var(--color-button-hover) !important;
    color: var(--color-text) !important;
}

.suggest-widget .monaco-scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-border) !important;
}

.parameter-hints-widget {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.inspect-widget {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.accessible-view {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.inline-completions-widget {
    color: var(--color-note-text) !important;
    opacity: 0.7;
}

.monaco-diff-editor .review-widget {
    background-color: var(--color-bg-alt) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.monaco-hover {
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(8px);
}

.monaco-hover-content {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

.hover-row {
    background-color: transparent !important;
    color: var(--color-text) !important;
}

.hover-row.colorpicker {
    background-color: transparent !important;
}

.monaco-hover .monaco-scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-border) !important;
}

.accessible-view {
    box-shadow: var(--shadow);
}

.accessible-view .monaco-list {
    background: transparent !important;
}

.accessible-view .monaco-list-row {
    background: transparent !important;
    color: var(--color-text) !important;
}

.accessible-view .monaco-list-row.focused,
.accessible-view .monaco-list-row.selected {
    background-color: var(--color-button) !important;
    color: var(--color-text) !important;
}

.accessible-view .monaco-scrollable-element::-webkit-scrollbar-thumb {
    background-color: var(--color-border) !important;
}

.line-highlight-default {
    background-color: var(--color-button);
}

.line-highlight-log {
    background-color: rgba(119, 119, 119, 0.2);
}

.line-highlight-warn {
    background-color: rgba(255, 193, 7, 0.25);
}

.line-highlight-error {
    background-color: rgba(220, 53, 69, 0.25);
}

.line-highlight-debug {
    background-color: rgba(154, 123, 255, 0.25);
}

.line-highlight-info {
    background-color: rgba(77, 179, 255, 0.25);
}

.file-path-header {
    height: 25px;
    display: flex;
    align-items: center;
    padding: 0px 12px;
    background-color: var(--color-bg-alt);
    color: var(--color-note-text);
    font-size: var(--font-size-path);
    font-weight: 500;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
}

.file-path-header::-webkit-scrollbar {
    display: none;
}

.file-path-header .path-segment {
    display: flex;
    align-items: center;
    gap: 4px;
}

.file-path-header .path-segment i {
    font-size: 13px;
    color: var(--color-note-text);
}

.file-path-header .separator {
    margin: 0 2px;
    color: var(--color-note-text);
    font-size: 14px;
}

.monaco-menu .action-item i.ti {
    font-size: 14px !important;
    vertical-align: middle;
    margin-right: 8px;
    margin-left: -20px;
}

.monaco-editor .scrollbar>.slider,
.monaco-scrollable-element .scrollbar>.slider {
    background: var(--color-border) !important;
}

@supports (color:color-mix(in oklab, white 50%, black 50%)) {
    @media (prefers-color-scheme:light) {

        .monaco-editor .scrollbar>.slider:hover,
        .monaco-scrollable-element .scrollbar>.slider:hover {
            background: color-mix(in oklab, var(--color-border) 88%, black 12%) !important;
        }

        .monaco-editor .scrollbar>.slider.active,
        .monaco-scrollable-element .scrollbar>.slider.active {
            background: color-mix(in oklab, var(--color-border) 80%, black 20%) !important;
        }
    }

    @media (prefers-color-scheme:dark) {

        .monaco-editor .scrollbar>.slider:hover,
        .monaco-scrollable-element .scrollbar>.slider:hover {
            background: color-mix(in oklab, var(--color-border) 88%, white 12%) !important;
        }

        .monaco-editor .scrollbar>.slider.active,
        .monaco-scrollable-element .scrollbar>.slider.active {
            background: color-mix(in oklab, var(--color-border) 80%, white 20%) !important;
        }
    }

    .monaco-editor.vs .scrollbar>.slider:hover,
    .monaco-scrollable-element.vs .scrollbar>.slider:hover {
        background: color-mix(in oklab, var(--color-border) 88%, black 12%) !important;
    }

    .monaco-editor.vs .scrollbar>.slider.active,
    .monaco-scrollable-element.vs .scrollbar>.slider.active {
        background: color-mix(in oklab, var(--color-border) 80%, black 20%) !important;
    }

    .monaco-editor.vs-dark .scrollbar>.slider:hover,
    .monaco-scrollable-element.vs-dark .scrollbar>.slider:hover {
        background: color-mix(in oklab, var(--color-border) 88%, white 12%) !important;
    }

    .monaco-editor.vs-dark .scrollbar>.slider.active,
    .monaco-scrollable-element.vs-dark .scrollbar>.slider.active {
        background: color-mix(in oklab, var(--color-border) 80%, white 20%) !important;
    }
}

@supports not (color:color-mix(in oklab, white 50%, black 50%)) {
    @media (prefers-color-scheme:light) {

        .monaco-editor .scrollbar>.slider:hover,
        .monaco-scrollable-element .scrollbar>.slider:hover {
            filter: brightness(0.92) !important;
        }

        .monaco-editor .scrollbar>.slider.active,
        .monaco-scrollable-element .scrollbar>.slider.active {
            filter: brightness(0.84) !important;
        }
    }

    @media (prefers-color-scheme:dark) {

        .monaco-editor .scrollbar>.slider:hover,
        .monaco-scrollable-element .scrollbar>.slider:hover {
            filter: brightness(1.10) !important;
        }

        .monaco-editor .scrollbar>.slider.active,
        .monaco-scrollable-element .scrollbar>.slider.active {
            filter: brightness(1.20) !important;
        }
    }
}































/* ==========================================================
   Notifications
   ========================================================== */

.notification-wrapper {
    position: fixed !important;
    bottom: 0.85rem !important;
    right: 0.85rem !important;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 99999 !important;
    pointer-events: none;
}




.dropdown-menu {
    position: absolute;
    background: var(--color-fourth);
    border: 1px solid var(--color-border-hover);
    border-radius: var(--border-radius-button);
    box-shadow: var(--color-box-shadow);
    z-index: 1000;
    /* overflow: hidden; */
    padding: var(--spacing-xsm);
    gap: var(--spacing-xsm);
    display: flex;
    flex-direction: column;
    min-width: 155px;
    /* min-width: 215px; */
    /* animation: dropdown-fade 0.1s ease; */
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    cursor: pointer;
    font-size: var(--font-size-xsm);
    padding: 0.4rem var(--spacing-sm);
    padding-right: var(--spacing-md);
    color: var(--color-text);
    text-align: left;
    width: 100%;
    border-radius: 4px;
    font-weight: 500;
}

.dropdown-item span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item .shortcut {
    margin-left: auto;
    color: var(--color-note-text);
    white-space: nowrap;
    min-width: 110px;
    text-align: right;
    padding-right: 15px;
    font-size: 0.725rem;
}

.dropdown-item:hover .shortcut:not(.dropdown-item.has-submenu:hover>.submenu .shortcut) {
    color: var(--color-textHilight) !important;
}

.submenu .dropdown-item:hover .shortcut {
    color: var(--color-textHilight) !important;

}

.dropdown-item:hover {
    background-color: var(--color-fifth);
    color: var(--color-textHilight);
}

.dropdown-item:hover i:not(.dropdown-item.has-submenu:hover>.submenu i, .dropdown-btn-donate i) {
    color: var(--color-textHilight) !important;
}

.dropdown-item i:not(.submenu-icon, .submenu-icon i) {
    font-size: 14px !important;
    position: relative;
    top: 0px;
}

.dropdown-divider {
    height: 1px;
    background-color: var(--color-fifth);
}

.dropdown-item.has-submenu {
    position: relative;
}


.dropdown-item.has-submenu>.submenu {
    display: none;
    position: absolute;
    top: -4px;
    left: calc(100% - 4px);
    margin-left: 4px;
    flex-direction: column;
    min-width: 150px;
    /* min-width: 215px; */
    background: var(--color-fourth);
    border: 1px solid var(--color-fifth);
    border-radius: var(--border-radius-button);
    box-shadow: var(--color-box-shadow);
    padding: var(--spacing-xsm);
    z-index: 1001;
}

/* Flip to left when needed */
.dropdown-item.has-submenu>.submenu.left {
    left: auto;
    right: calc(100% - 4px);
    margin-left: 0;
    margin-right: 4px;
}

/* 🔥 On hover, show submenu */
.dropdown-item.has-submenu:hover>.submenu {
    display: flex;
}

/* Default state */
.submenu {
    display: none;
}

/* Show only when JS adds this class */
.submenu.visible {
    display: flex;
}

/* Chevron style */
.submenu-icon {
    margin-left: auto;
    color: var(--color-note-text);
    padding-right: 2px;
    font-size: 16px !important;
}

.dropdown-item.has-submenu:hover>.submenu-icon {
    opacity: 1;
}

.dropdown-btn-donate {
    /* background-color: #598bdb;
   color: white;
   font-weight: 600;
   font-size: 0.8rem; */
    background-color: var(--color-border-hover);
}

.dropdown-item img {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    width: 1.35em;
    height: 1.35em;
    transition: transform 0.3s ease;
    will-change: transform;
}

.dropdown-item:hover img {
    animation: kofiBounceWiggle 1s ease;
}


@keyframes kofiBounceWiggle {
    0% {
        transform: scale(1) rotate(0deg);
    }

    12% {
        transform: scale(1.08) rotate(14deg);
    }

    25% {
        transform: scale(1.08) rotate(-14deg);
    }

    37% {
        transform: scale(1.07) rotate(10deg);
    }

    50% {
        transform: scale(1.07) rotate(-10deg);
    }

    62% {
        transform: scale(1.05) rotate(6deg);
    }

    75% {
        transform: scale(1.05) rotate(-6deg);
    }

    87% {
        transform: scale(1.02) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}



.dropdown-btn-donate:hover.dropdown-btn-donate i,
.dropdown-btn-donate:hover {
    background-color: #598bdb;
    color: white;
}


.custom-modal-container {

    padding: var(--spacing-sm) !important;
    gap: var(--spacing-sm) !important;

}

.custom-modal-button {
    padding: var(--spacing-xsm) var(--spacing-sm) !important;

}

.custom-modal-input {
    padding: var(--spacing-xsm) var(--spacing-sm) !important;

}

.custom-modal-buttons {
    margin-top: var(--spacing-sm) !important;
}

.custom-modal-container.notif-centre-container .custom-modal-buttons {
    padding: 0 var(--spacing-sm) !important;

}

.notif-centre-wrapper .notif-row {
    display: flex;
    gap: var(--spacing-xsm) !important;
    padding: 1.25rem var(--spacing-sm) !important;

}

.custom-modal-container.notif-centre-container {
    padding-top: 0 !important;
    border-top-width: 12px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.auth-container .input-group {
    margin-bottom: var(--spacing-sm) !important;
}

.auth-checkbox {

    margin-bottom: var(--spacing-md) !important;
    margin-top: var(--spacing-md) !important;
}

.auth-footer {

    margin: var(--spacing-sm) 0 !important;
}

.auth-button {
    border: thin solid transparent !important;
    min-height: 41px;
}

.auth-header {
    margin-bottom: var(--spacing-sm) !important;
}

.auth-note {
    margin-bottom: var(--spacing-sm) !important;
}

.auth-checkbox input {
    margin-right: var(--spacing-sm) !important;

}





/* Audio Player Styles */
.binaryViewerAudioWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--spacing-md);
}

.audioPlayerContainer {
    min-width: 400px;
    max-width: 600px;
}

.audioPlayerHeader {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

.audioPlayerHeader i {
    font-size: 24px;
    color: var(--color-note-text);
}

.audioFileName {
    font-weight: 600;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binaryViewerAudio {
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.binaryViewerAudio:focus {
    /* outline: 2px solid var(--color-accent);
    outline-offset: 2px; */
}

.audioPlayerInfo {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-color);
}

.audioFormat {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-tertiary);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}


.notif-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    line-height: 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-accent2-text);
    background-color: var(--color-accent2);
    /* blue */
    border-radius: 999px;
    text-align: center;
    pointer-events: none;
    border: 2px solid var(--color-bg);
}

.avatar-user-controls .notif-badge {
    right: 3px;
    left: auto;
    bottom: auto;
    top: 3px;
    font-size: 10px;
    line-height: 12px;
    padding: 0px 4px;
    min-width: 17px;
    height: 17px;
}

.notif-badge.hidden {
    display: none !important;
}

.notif-badge.dot {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    line-height: 10px;
    font-size: 0;
    border-radius: 50%;
}

.avatar {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 30px;
    border-radius: 4px;
    background-color: var(--color-accent2);
    color: var(--color-accent2-text);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    /* outline: 2px solid var(--color-border-color); */
    border: thin solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

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

.avatar i {
    pointer-events: none;
    color: var(--color-text-fg);
}

.avatar:hover {
    background-color: var(--accent-hover);
}

#btnInfoSave,
.save-btn {
    background: var(--color-code);
    color: #ffffff;

}



#btnInfoSave {
    width: 50%;
    font-weight: 500;
    font-size: var(--font-size-md);
}



.save-btn:hover {
    background: color-mix(in srgb, var(--color-code) 80%, var(--color-fifth) 20%);
}

.save-btn:hover.save-btn i {
    color: #ffffff !important;
}

#btnInfoDelete {
    width: 50%;
    font-weight: 500;
    font-size: var(--font-size-md);
}

#btnInfoDelete {
    background: var(--color-error);
    color: #ffffff;
}

#btnInfoSave:hover {
    background: color-mix(in srgb, var(--color-code) 80%, var(--color-fifth) 20%);
}

#btnInfoDelete:hover {
    background: color-mix(in srgb, var(--color-error) 80%, var(--color-fifth) 20%);
}

#btnInfoDelete:disabled,
#btnInfoDelete.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.like-btn.liked i {
    color: var(--color-error) !important;
}

.info-row-card {
    flex-direction: row !important;
}

.editor-loading-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #121416 0%, #121416 100%);
    z-index: 1000;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.editor-loading-spinner .spinner-container {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 32px;
}

.editor-loading-spinner .spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.editor-loading-spinner .spinner-ring:nth-child(1) {
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-right-color: rgba(255, 255, 255, 0.4);
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.editor-loading-spinner .spinner-ring:nth-child(2) {
    border: 2px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.2);
    border-left-color: rgba(255, 255, 255, 0.1);
    animation: spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
}

.editor-loading-spinner .spinner-inner-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite;
}

.editor-loading-spinner .loading-text {
    color: rgba(255, 255, 255, 0.5);
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0;
    animation: textAppear 0.6s ease-out 0.3s forwards, breathe 3s ease-in-out 0.9s infinite;
}

body:not(.loading) .editor-loading-spinner {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes textAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   Project Info full-screen panel (under header)
   Matches q5 editor vars + button styles
   ========================================================= */

/* Panel shell */
.infoPanel {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height, var(--h, 48px));
    bottom: 0;
    z-index: 900;
    display: none;

    /* ✅ make panel scroll */
    overflow-y: auto;
    overflow-x: hidden;

    background: var(--color-bg-alt);
    border-top: 1px solid var(--color-border);

    /* ✅ better scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}


.infoPanel.open {
    display: block;
    /* instead of grid */
}



.infoPanelTitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--color-text);
}

.infoPanelTitle i {
    font-size: 18px;
    color: var(--color-note-text);
}

/* Body scroll area */
.infoPanelBody {
    min-height: 0;
    overflow: auto;
    padding: 12px;
    padding-top: 0;
}

/* Grid layout */
.infoGrid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    /* adjust as desired */
    margin: 0 auto;
    /* center */
    padding-bottom: 40vh;
}



/* Cards */
.infoCard {
    box-shadow: none;
    padding: 12px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.infoCardTitle {
    font-size: var(--font-size-lg);
    font-weight: 500;
    letter-spacing: .2px;
    color: var(--color-textHilight);
    margin-bottom: 10px;
}

/* Read-only rows (key/value) */
.infoRow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px;
}

.infoRow:first-of-type {
    border-top: none;
}

.infoLabel {
    color: var(--color-note-text);
    font-size: 12px;
    letter-spacing: .2px;
    text-transform: uppercase;
    user-select: none;
    white-space: nowrap;
}

.infoValue {
    color: var(--color-text);
    word-break: break-word;
    min-width: 0;
}

/* =========================================================
   Inputs (title/description/tags)
   ========================================================= */
.formRow {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.formRow .infoLabel {
    text-transform: none;
    letter-spacing: .2px;
    font-size: 12px;
}

.textInput,
.textArea {
    font-family: var(--font-family);
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    /* slightly darker than card */
    color: var(--color-text);
    outline: none;
    font-size: var(--font-size-md);
}

.textArea {
    min-height: 90px;
    resize: vertical;
}

.textInput::placeholder,
.textArea::placeholder {
    color: color-mix(in srgb, var(--color-note-text), transparent 25%);
}

.textInput:focus,
.textArea:focus {
    border-color: var(--color-border-hover);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-selected), transparent 35%);
}

/* =========================================================
   More info chevron (collapsed by default)
   ========================================================= */
.moreInfo {
    margin-top: 10px;
    border-top: 1px solid var(--color-border);
    padding-top: 8px;
}

.moreInfoSummary {
    list-style: none;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 8px 6px;
    border-radius: var(--radius);

    color: var(--color-text);
    user-select: none;
}

.moreInfoSummary::-webkit-details-marker {
    display: none;
}

.moreInfoSummary:hover {
    background: var(--color-button);
}

.moreInfoSummary i {
    font-size: 18px;
    color: var(--color-note-text);
    transition: transform .18s ease, color .12s ease;
}

.moreInfo[open] .moreInfoSummary i {
    transform: rotate(180deg);
    color: var(--color-text);
}

.moreInfoBody {
    margin-top: 8px;
    padding: 0 6px 6px;
}

/* =========================================================
   Visibility buttons (3 states, auto-save)
   ========================================================= */
.visButtons {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}

.visBtn {
    width: 100%;
    height: 34px;
    /* match your .btn height */
    padding: 0 10px;
    /* match editor buttons */
    border-radius: var(--radius);
    border: 1px solid transparent;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;

    background: var(--color-button);
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
}

.visBtn i {
    font-size: 18px;
    color: var(--color-note-text);
}

.visBtn:hover {
    background: var(--color-button-hover);
}

.visBtn:hover i {
    color: var(--color-text);
}

.visBtn.active {
    border-color: var(--color-border-hover);
    background: var(--color-button-hover);
    color: var(--color-textHilight);
}

.visBtn.active i {
    color: var(--color-textHilight);
}

.visBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Helper hint text */
.visibilityHint {
    margin-top: 10px;
    color: var(--color-note-text);
    font-size: 12px;
    line-height: 1.35;
}

/* Optional: section note text inside cards */
.infoCoverSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.infoCoverLabel {
    align-self: flex-start;
    font-size: var(--font-size-lg);
    font-weight: 500;
    letter-spacing: .2px;
    color: var(--color-textHilight);
    margin-bottom: 10px;
}

.infoCoverPreview {
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--color-bg);
    border-radius: 0px;
    border: thin solid var(--color-border);
    transition: transform .15s ease, box-shadow .15s ease;
}

.infoCoverPreview:hover {
    box-shadow: var(--box-shadow)
}

.infoCoverBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: thin solid var(--color-border);
}


/* =========================
   Binary / Image Viewer
   ========================= */

#binaryViewer {
    display: none;
    /* toggled by JS */
    height: 100%;
    width: 100%;
    overflow: auto;
    padding: 14px;
}

#binaryViewer.isOpen {
    display: block;
}

.binaryViewerInner {
    max-width: 980px;
    margin: 0 auto;
}

.binaryViewerBody {}

.binaryViewerMessage {
    line-height: 1.45;
    font-size: 14px;
    opacity: 0.9;
}

.binaryViewerMessage .hint {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.8;
}

.binaryViewerImageWrap {
    display: flex;
    justify-content: center;
}

.binaryViewerImage {
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 115px);
    border-radius: 0px;
}

.vfsDragRow.drag-over {
    /* outline: 1px dashed rgba(255,255,255,0.35); */
    background: var(--color-selected);
}

.vfsTreeWrap.drag-over-root {
    /* outline: 1px dashed rgba(255,255,255,0.35); */
    background: var(--color-selected);
    transition: background 120ms ease, outline 120ms ease;
}

.vfsMenu {
    position: absolute;
    min-width: 180px;
}

.vfsMenu .divider {
    height: 1px;
    margin: 6px 0;
    background: var(--color-border);
    pointer-events: none;
}

/* --- Tabs dirty dot --- */
/* .tab.dirty::after {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            display: inline-block;
            background: var(--color-note-text, #4ea1ff);
            box-shadow: 0 0 0 2px rgba(78, 161, 255, 0.15);
        } */

/* Optional: make dirty tab label slightly brighter */
.vfsDragRow.dirty .vfsRowLeft span,
.tab.dirty {
    color: var(--color-warn) !important;
}

/* --- VFS dirty dot (files + folders) --- */
/* .vfsDragRow.dirty .vfsRowLeft span:last-child::after {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 999px;
            display: inline-block;
            margin-left: 8px;
            vertical-align: middle;
            background: var(--color-accent, #4ea1ff);
            box-shadow: 0 0 0 2px rgba(78, 161, 255, 0.15);
        } */

.settingsSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
}

.settingsSection:hover {
    background: color-mix(in srgb, var(--color-third), var(--color-fourth));
}

.settingsTitle {
    font-weight: 600;
    margin-top: 4px;
}

.settingsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.settingsLabel {
    font-size: 13px;
    opacity: .9;
}

.settingsSelect {
    width: 100%;
    max-width: 320px;
}

/* Wrap the select in .settingsSelectWrap so we can draw our own arrow */
.settingsSelectWrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 320px;
}

/* The select itself */
.settingsSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    width: 100%;
    height: 36px;

    background: var(--color-fourth);
    border: 1px solid var(--color-border-color);
    border-radius: 4px;

    padding: 8px 40px 8px 12px;
    /* extra space on right for chevron */
    font-size: 13px;
    line-height: 18px;

    color: var(--color-text);

    cursor: pointer;
    outline: none;

    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

/* Hover */
.settingsSelect:hover {
    background: var(--color-fifth);
    border-color: var(--color-border-hover);
    color: var(--color-textHilight);
}

/* Focus */
.settingsSelect:focus {
    border-color: rgba(0, 120, 212, 0.9);
    /* accent2 */
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.20);
    color: var(--color-textHilight);
}

/* Disabled */
.settingsSelect:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Remove the IE dropdown arrow if it exists */
.settingsSelect::-ms-expand {
    display: none;
}

/* Our chevron (never moves, never changes size) */
.settingsSelectWrap::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 12px;
    height: 8px;
    transform: translateY(-50%);
    pointer-events: none;

    /* SVG chevron using your theme colors */
    background: no-repeat center / 12px 8px url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394aab4' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    opacity: 0.9;
    transition: opacity 120ms ease, filter 120ms ease;
}

/* Slightly brighter arrow on hover/focus */
.settingsSelectWrap:hover::after,
.settingsSelect:focus+._dummy

/* (not used, just keeps specificity sane) */
    {
    opacity: 1;
    filter: brightness(1.2);
}

/* ---- "Best effort" dropdown list styling (won't apply on all OS/browsers) ---- */
.settingsSelect option {
    background: var(--color-fourth);
    color: var(--color-text);
}

/* Some browsers honor this for the popup menu */
.settingsSelect optgroup {
    background: var(--color-fourth);
    color: var(--color-note-text);
}







/* the placeholder sits behind the iframe */
.preview-placeholder {
  position: relative;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--panel-bg);
  z-index: 2;
}

.preview-placeholder-inner {
   text-align: center;
   max-width: 520px;
   padding: 24px;
   border-radius: 16px;
   pointer-events: auto;
}

.preview-placeholder-icon svg {
   width: 80px;
   height: 80px;
   display: block;
   margin: 0 auto 12px auto;
   fill: currentColor;
   color: var(--color-text);
}

.preview-placeholder-title {
   font-size: 1.1rem;
   font-weight: 500;
   margin-bottom: 0.5rem;
   margin-top: 0.25rem;
   color: var(--color-text);
}

.preview-placeholder-subtitle {
   font-size: 0.85rem;
   margin-bottom: 1rem;
   color: var(--color-text);
   opacity: 0.75;
}

.preview-placeholder-run-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 0;
   border-radius: 4px;
   padding: 7px 14px;
   padding-left: 7px;
   font-weight: 500;
   cursor: pointer;
   font-family: var(--font-family);
   font-size: var(--font-size-xsm);
   background: var(--color-fourth);
   color: var(--color-textHilight);
   transition: all 120ms ease;
   height: 26px;
   background-color: var(--color-accent2);
   color: var(--color-accent2-text);
}

.preview-icon-placeholder {
   color: var(--color-note-text);
   font-size: 3rem;
   opacity: 0.75;
}

.preview-placeholder-run-btn:hover {
   background-color: var(--color-accent2-hover);
   color: var(--color-accent2-text);
}

/* iframe sits above the placeholder; fades in/out */
.preview-tool-iframe {
   position: relative;
   z-index: 0;
   /* below placeholder */
   transition: opacity 150ms ease-in-out;
}

/* when running, show the iframe and dim the placeholder */
.preview-tool-content.is-running .preview-tool-iframe {
   opacity: 1;
   display: block;
}

.preview-tool-content.is-running .preview-placeholder {
   opacity: 0;
   pointer-events: none;
   display: none;
}















/* Modern Notification System */
.notification-wrapper {
    position: fixed;
    bottom: 28px;
    right: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 99999;
    pointer-events: none;
    /* Allow clicking through the wrapper */
}

.notification {
    display: flex;
    align-items: center;
    background: var(--color-fourth);
    padding: 0.75rem var(--spacing-sm);
    border-radius: 4px;
    box-shadow: var(--color-box-shadow);
    min-width: 280px;
    max-width: 380px;
    font-family: var(--font-family);
    color: var(--color-text);
    backdrop-filter: blur(8px);
    border: 1px solid var(--color-border-hover);
    pointer-events: auto;
    /* Make the notification clickable */
    transform-origin: right;
    opacity: 0;
    transform: translateX(50px);
    position: relative;
    overflow: hidden;
}

.notification-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.notification i {
    margin-right: var(--spacing-md);
    font-size: var(--font-size-md);
}

.notification-message {
    font-size: var(--font-size-sm);
    flex-grow: 1;
    margin-right: var(--spacing-md);
}

.notification code {
    font-size: 0.8rem;
    color: var(--color-textHilight);
    font-weight: 500;
    padding: .2em .4em;
    margin: 0;
    background-color: var(--color-fifth);
    border-radius: 6px;
}

.notification-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: red;
    border-radius: 0 0 0 var(--border-radius);
    transform-origin: left;
    width: 100%;
    will-change: transform;

    transform: scaleX(1);
}

.notification-close {
    background: none;
    border: none;
    color: var(--color-text) !important;
    opacity: 0.7;
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--spacing-xsm);
    display: flex;
    align-items: center;
    width: 20px;
    justify-content: center;
    transition: opacity 0.2s ease;
    margin-left: var(--spacing-sm);
}

.notification-close:hover {
    color: var(--color-textHilight) !important;
    opacity: 1;
    background: none;
}

/* Type-specific styles */
.notification-info {
    /* border-left: 4px solid var(--color-href); */
}

.notification-info i {
    color: var(--color-href);
}

.notification-info .notification-progress {
    background: var(--color-href);
}

.notification-success {
    /* border-left: 4px solid var(--color-accent2); */
}

.notification i:not(.notification-close i) {
    font-size: var(--font-size-lg);
}

.notification-success i:not(.notification-close i, .notification-message i) {
    color: var(--color-accent2);
}

.notification-success .notification-progress {
    background: var(--color-accent2);
}

.notification-warning {
    /* border-left: 4px solid var(--color-warn); */
}

.notification-warning i:not(.notification-close i, .notification-message i) {
    color: var(--color-warn);
}

.notification-warning .notification-progress {
    background: var(--color-warn);
}

.notification-error {
    /* border-left: 4px solid var(--color-error); */
}

.notification-error i:not(.notification-close i, .notification-message i) {
    color: var(--color-error);
}

.notification-error .notification-progress {
    background: var(--color-error);
}

/* Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(50px);
    }
}

@keyframes progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .notification-wrapper {
        bottom: 0;
        right: 0;
        left: 0;
        padding: var(--spacing-sm);
    }

    .notification {
        width: 100%;
        max-width: none;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
}



/* AUTH MODAL */

.auth-container {
    width: 100%;
    max-width: 420px;
    /* Constrains container width */
    background: var(--color-third);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-color);
    margin: 0 auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    /* box-shadow:  var(--color-box-shadow); */
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding-left: 105px;
}

.auth-header i {
    font-size: 32px;
    color: var(--color-text);
}

.auth-header span {
    font-size: 1.4rem;
    /* slightly larger than var(--font-size-md) */
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-family), 'Noto Color Emoji', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;

}

.auth-header i.close-auth-btn {
    font-size: var(--font-size-lg);
    background-color: var(--color-fifth);
    padding: 5px;
    border-radius: 50%;
    margin-left: auto;
    cursor: pointer;
}

.auth-header i.close-auth-btn:hover {
    background-color: var(--color-border-hover);

}

.auth-separator {
    text-align: center;
    margin: 1.1rem 0;
    color: var(--color-text);
    position: relative;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--color-textHilight);
    opacity: 0.25;
}

.auth-separator::before {
    left: 0;
}

.auth-separator::after {
    right: 0;
}

.auth-note {
    text-align: left;
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    opacity: 0.5;
    font-size: var(--font-size-sm);
}

.auth-container .input-group {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.auth-container .input-group input {
    width: 100%;
    padding: 12px 40px;
    /* padding for left & right icons */
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-auth);
    outline: none;
    box-sizing: border-box;
}

.auth-container .input-group input:focus {
    outline: 2px solid var(--color-accent2);
}

/* Left icon (mail/lock) */
.auth-container .input-group i:first-of-type {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--color-text);
    opacity: 0.4;
    pointer-events: none;
    /* Not clickable */
}

/* Eye toggle icon */
.toggle-password {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 24px;
    /* restrict clickable area */
    height: 24px;
    /* restrict clickable area */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-text);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.toggle-password:hover {
    opacity: 0.8;
    background-color: var(--color-fifth);
    border-radius: 8px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xsm);
    color: var(--color-text);
    /* margin-bottom: 0; */
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.auth-checkbox input {
    margin-right: var(--spacing-md);
    cursor: pointer;
}

.auth-checkbox a {
    color: var(--color-href);
    text-decoration: none;
}

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

/* Treat this as a horizontal flex row */
.auth-checkbox.recaptcha-disclaimer {
    display: flex;
    display: none;
    align-items: center;
    /* Vertically center everything */
    /* Space between icon and text */
    font-size: var(--font-size-xsm);
    color: var(--color-note-text);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
    /* background-color: var(--color-light-blue); */
    border-radius: var(--border-radius);
}

/* Optional: slightly adjust icon size/spacing */
.recaptcha-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: calc(var(--spacing-md) - 4px);
}

.recaptcha-icon {
    color: var(--color-href) !important;
    font-size: 1rem;
    margin-left: 4px;
}

.auth-button {
    width: 100%;
    padding: 10px;
    font-size: var(--font-size-md);
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.auth-button:hover {
    background: var(--color-accent-hover);
}

.auth-footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    margin: var(--spacing-md) 0;
}

.auth-footer a {
    color: var(--color-href);
    text-decoration: none;
}

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

.auth-google-button {
    width: 100%;
    padding: 10px;
    font-size: var(--font-size-md);
    background: var(--color-accent);
    color: var(--color-accent-text);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.3s ease;
    margin-top: 0.5rem;
}

.auth-google-button:hover {
    background: var(--color-accent-hover);
    /* filter: brightness(0.9); */
    outline: 2px solid var(--color-accent2)
}

.google-icon {
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.auth-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-blur);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    /* Add backdrop blur effect */
}


/* =========================================================
   Notification Centre overrides (scoped)
   ========================================================= */

/* Widen + center the modal when used as a notification centre */
.custom-modal-container.notif-centre-container {
    max-width: 520px;
    /* a bit wider for avatar/list */
    margin: 15vh auto 0 auto;
    /* centered horizontally */
    padding-top: 0;
    /* align with rest of app spacing */
    border-top-width: 12px;
    /* keep your accent bar */
    padding-left: 0;
    padding-right: 0;
}

/* Reset the inline icon+text flex row layout that .custom-modal-content had */
.custom-modal-content.notif-centre-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* gap: var(--spacing-md); */
    margin-left: 0;
    /* kill the offset that pushed left */
    text-align: left;
    /* default; header will center itself */
    font-weight: 400;
    /* slightly lighter than alert text */
    font-size: var(--font-size-sm);
    /* border-top: 1px solid var(--color-border-hover); */
    font-family: var(--font-family), "Noto Color Emoji";
}

/* Centre the heading text */
.notif-centre-wrapper .notif-centre-title {
    width: 100%;
    text-align: left;
    font-size: 1.0rem;
    font-weight: 600;
    margin: 0;
    padding: 0.75rem 0;
    padding-bottom: 0.25rem;
    /* border-bottom: 1px solid var(--color-border-hover); */
}

.notif-centre-wrapper .notif-centre-icon {
    font-size: 1.1rem;
    color: var(--color-text);
    position: relative;
    top: 1px;
    margin: 0 var(--spacing-md);
    margin-right: var(--spacing-sm);
}

/* Scroll area */
.notif-centre-wrapper .notif-centre-list {
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* gap: var(--spacing-sm); */
    margin: 0;
    /* we’re managing spacing via wrapper gap */

    /* show scrollbar without overlap */
    border-top: 1px solid var(--color-border-hover);
    border-bottom: 1px solid var(--color-border-hover);
}

/* Empty state */
.notif-centre-wrapper .notif-centre-empty {
    padding: 1.5rem 0;
    text-align: center;
    color: var(--color-note-text);
    opacity: 0.8;
}

/* Rows ------------------------------------------------------- */
.notif-centre-wrapper .notif-row {
    display: flex;
    gap: var(--spacing-sm);
    padding: 1.25rem var(--spacing-md);
    /* padding-left: 1.3rem; */
    padding-bottom: var(--spacing-md);
    /* border-radius: var(--border-radius-button); */
    background: var(--color-fourth);
    /* border: 1px solid var(--color-border-color); */
    border-left: none;
    border-right: none;
    border-top: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.notif-centre-wrapper .notif-row:first-of-type {
    border-top: none;
}

.notif-centre-wrapper .notif-row:last-of-type {
    border-bottom: none;
}

.notif-centre-wrapper .notif-row:hover {
    background: var(--color-fifth);
    border-color: var(--color-border-hover);
}

/* Unread indicator */
.notif-centre-wrapper .notif-row.notif-unread {
    border-color: var(--color-selected);
    background-color: rgba(37, 85, 149, 0.2);
}

.notif-centre-wrapper .notif-row.notif-unread:hover {
    background-color: var(--color-selected);
}

.notif-row-context {
    /* font-style: italic; */
    color: var(--color-note-text);
    /* font-size: 0.8rem; */
}

.notif-row-username {
    font-style: normal;
    color: var(--color-textHilight);
    font-weight: 700;
}

.notif-centre-wrapper .notif-row .notif-project-name {
    text-decoration: none;
    font-style: normal;
    color: var(--color-text);
    font-weight: 600;
}

.notif-centre-wrapper .notif-row .notif-project-name:hover {
    text-decoration: underline;
    color: var(--color-href);
}

.notif-centre-wrapper .notif-row .notif-action {}

/* Avatar */
.notif-centre-wrapper .notif-row-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    /* overflow: hidden; */
    flex-shrink: 0;
    position: relative;
    border: 1px solid var(--color-border-color);
    margin-right: var(--spacing-md);
}

.notif-centre-wrapper .notif-row-avatar img {
    border-radius: 50%;
}

.custom-modal-container.notif-centre-container .custom-modal-buttons {
    padding: 0 var(--spacing-md);
    margin-top: 0
}

.notif-centre-wrapper .notif-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notif-centre-wrapper .notif-row-avatar-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
    border-radius: 50%;
    background: var(--color-third);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

/* Badge with notif type icon */
.notif-centre-wrapper .notif-row-type-icon {
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 1rem;
    background: var(--color-accent2);
    color: var(--color-accent2-text);
    border-radius: 50%;
    line-height: 1;
    padding: 3px;
    pointer-events: none;
    border: 2px solid var(--color-fifth);
}

.notif-row-type-icon.notif-icon-comment {
    background: var(--color-accent2);
    color: var(--color-accent2-text);
}

.notif-row-type-icon.notif-icon-like {
    background-color: var(--color-error);
    color: #fff;
}

.notif-row-type-icon.notif-follow {
    background-color: var(--color-success);
    color: #fff;
}

.notif-row-type-icon.notif-reply {
    background-color: var(--color-debug);
    color: #fff;
}

/* Body */
.notif-centre-wrapper .notif-row-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

/* Username / handle row */
.notif-centre-wrapper .notif-row-header {
    display: flex;
    align-items: baseline;
    /* gap: .25rem; */
    flex-wrap: wrap;
    display: none;
}

.notif-row-username,
.notif-row-handle,
.notif-row-project,
.notif-row-avatar {
    text-decoration: underline;
    color: var(--color-href);
    cursor: pointer;
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

.notif-row-username,
.notif-row-handle {
    text-decoration: none !important;
    color: var(--color-text) !important;
}

.notif-row-username:hover,
.notif-row-handle:hover {
    text-decoration: underline !important;
    color: var(--color-href) !important;
}

.notif-row-username {
    font-weight: 600;
}

.notif-row-handle {
    opacity: 0.8;
    font-size: 0.85em;
}

.notif-row-avatar {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* overflow: hidden; */
    flex-shrink: 0;
    position: relative;
}


.notif-centre-wrapper .notif-row-username {
    font-weight: 600;
}

.notif-centre-wrapper .notif-row-handle {
    opacity: .8;
    font-size: .85em;
}

.notif-row-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
    gap: 1rem;
}

.notif-centre-wrapper .notif-row-project {
    text-decoration: none;
    align-self: flex-start;
    font-size: .85em;
    margin-top: .25rem;
    margin-bottom: .25rem;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 4px;
    font-size: var(--font-size-xsm);
    font-family: var(--font-family);
    cursor: pointer;
    border: thin solid var(--color-border-color);
    font-weight: 600;
    background-color: transparent;
    color: var(--color-text) !important;
    margin-left: auto;
}

.notif-centre-wrapper .notif-row-project:hover {
    background-color: var(--color-accent2);
    color: var(--color-accent2-text) !important;
    border-color: transparent !important;
}

.notif-centre-wrapper .notif-row:hover .notif-row-project {
    border: thin solid var(--color-border-hover);

}

/* Message text (respect your link colors) */
.notif-centre-wrapper .notif-row-msg {
    line-height: 1.5;
    /* margin-bottom: var(--spacing-xsm) */
    padding-right: var(--spacing-xsm);
}

.notif-centre-wrapper .notif-row-msg a {
    color: var(--color-href);
    text-decoration: underline;
}

.notif-centre-wrapper .notif-row-msg a:visited {
    color: var(--color-href-visited);
}

/* Timestamp */
.notif-centre-wrapper .notif-row-time {
    font-size: var(--font-size-md);
    color: var(--color-note-text);
    opacity: 0.8;
    /* margin-left: auto; */
    margin-top: 0.5rem;
}



.confirm-header {
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin: 0 0 6px;
    color: var(--color-textHilight);
}

.confirm-body {}

.confirm-body .confirm-note {}

.name-chip {
    display: inline-block;
    padding: 0px 2px;
    border-radius: 4px;
    border: thin solid var(--color-border-hover);
    background: var(--color-fifth);
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    white-space: nowrap;
    color: var(--color-text);
}

.more-count {
    opacity: .8;
    /* color: var(--color-textHilight); */
    font-style: italic;
    padding: 0px 4px;
}