#eruda {
    z-index: 99999999999999 !important; /* Adjust this value as needed */
}
._container .luna-modal {
  z-index:9999999
}

._container {
  min-width:320px;
  pointer-events:none;
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:9999999;
  
  color:var(--foreground);
  font-family:-apple-system,system-ui,BlinkMacSystemFont,".SFNSDisplay-Regular","Helvetica Neue","Lucida Grande","Segoe UI",Tahoma,sans-serif;
  font-size:14px;
  direction:ltr;
}



@font-face {
  font-family: "WF Visual Sans Text";
  src: url("https://assets.website-files.com/6491b4dd238fa881faab3d5c/65258e6f9f50f2d876a4f384_WFVisualSans-RegularText.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "WF Visual Sans Text";
  src: url("https://assets.website-files.com/6491b4dd238fa881faab3d5c/65258e6ffaf4654a99eceefd_WFVisualSans-SemiBoldText.woff2")
    format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "WF Visual Sans";
  src: url("https://assets.website-files.com/6491b4dd238fa881faab3d5c/65258e6fd096dfcb63d84a7d_WFVisualSans-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "WF Visual Sans";
  src: url("https://assets.website-files.com/6491b4dd238fa881faab3d5c/65258e6fb4479820549d1044_WFVisualSans-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "WF Visual Sans";
  src: url("https://assets.website-files.com/6491b4dd238fa881faab3d5c/65258e6f74892e61c00dc42e_WFVisualSans-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --fontText: "WF Visual Sans Text", sans-serif;
  --fontHead: "WF Visual Sans", sans-serif;
  --fontMono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  --textXs: 0.75rem;
  --textSm: 0.875rem;
  --textMd: 1rem;
  --textLg: 1.125rem;
  --textXl: 1.25rem;
  --text2xl: 1.5rem;
  --text3xl: 1.875rem;

  --h1: 2.5rem;
  --h2: 3rem;
  --h3: 1.75rem;
  --h4: 1.5rem;

  --weightLight: 300;
  --weightNormal: 400;
  --weightMedium: 500;
  --weightSemibold: 600;
  --weightBold: 700;

  --spaceXs: 0.25rem;
  --spaceSm: 0.5rem;
  --spaceMd: 1rem;
  --spaceLg: 1.5rem;
  --spaceXl: 2rem;
  --space2xl: 3rem;

  --radiusSm: 0.25rem;
  --radiusMd: 0.5rem;
  --radiusLg: 0.75rem;
  --radiusXl: 1rem;
  --radiusFull: 9999px;

  --shadowSm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
  --shadowMd: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
  --shadowLg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);
  --shadowXl: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1);
  --shadowInner: inset 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.05);

  --transitionFast: 150ms ease;
  --transitionBase: 200ms ease;
  --transitionSlow: 300ms ease;
  --transitionBounce: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  --sidebarWidth: 18.5rem;
  --miniSidebarWidth: 3.75rem;

  --navbar-height: 3.75rem;
  --breadcrumb-height: 2.95rem;
  --coder-header-height: 3.75rem;
  --toolbar-height: 3.15rem;
  --total-sticky-height: calc(
    var(--navbar-height) + var(--breadcrumb-height) + var(--coder-header-height) + var(--toolbar-height)
  );
}

[data-theme="dark"] {
  --canvasDefault: #22272e;
  --canvasOverlay: #2d333b;
  --canvasInset: #1c2128;
  --canvasSubtle: #2d333b;

  --borderDefault: #444c56;
  --borderMuted: #373e47;
  --borderSubtle: #636e7b;

  --fgDefault: #adbac7;
  --fgMuted: #768390;
  --fgSubtle: #545d68;
  --fgOnEmphasis: #ffffff;

  --accentFg: #539bf5;
  --accentEmphasis: #4184e4;
  --accentMuted: rgba(65, 132, 228, 0.4);
  --accentSubtle: rgba(65, 132, 228, 0.15);
  --accentBlue: #316dca;

  --successFg: #57ab5a;
  --successEmphasis: #347d39;
  --successMuted: rgba(52, 125, 57, 0.4);
  --successSubtle: rgba(52, 125, 57, 0.15);

  --dangerFg: #e5534b;
  --dangerEmphasis: #c93c37;
  --dangerMuted: rgba(201, 60, 55, 0.4);
  --dangerSubtle: rgba(201, 60, 55, 0.15);

  --warningFg: #c69026;
  --warningEmphasis: #ae7c14;
  --warningMuted: rgba(174, 124, 20, 0.4);
  --warningSubtle: rgba(174, 124, 20, 0.15);

  --btnPrimaryBg: #347d39;
  --btnPrimaryHover: #46954a;
  --btnPrimaryActive: #2a6b2f;
  --btnPrimaryText: #ededed;

  --btnSecondaryBg: #373e47;
  --btnSecondaryHover: #444c56;
  --btnSecondaryActive: #2d333b;
  --btnSecondaryText: #adbac7;

  --btnTertiaryBg: transparent;
  --btnTertiaryHover: #373e47;
  --btnTertiaryActive: #444c56;
  --btnTertiaryText: #adbac7;

  --btnDangerBg: #c93c37;
  --btnDangerHover: #e5534b;
  --btnDangerActive: #b62a25;
  --btnDangerText: #ffffff;

  --inputBg: #1c2128;
  --inputBorder: #444c56;
  --inputBorderHover: #768390;
  --inputBorderFocus: #539bf5;
  --inputText: #adbac7;
  --inputPlaceholder: #636e7b;

  --codeBg: #2d333b;
  --codeText: #adbac7;
  --codeComment: #768390;

  --syntaxKeyword: #f47067;
  --syntaxString: #96d0ff;
  --syntaxVariable: #adbac7;
  --syntaxFunction: #dcbdfb;
  --syntaxNumber: #6cb6ff;
  --syntaxConstant: #6cb6ff;
  --syntaxTag: #8ddb8c;
  --syntaxMatch: #ae7c14;

  --tableHeaderBg: #2d333b;
  --tableRowBg: #22272e;
  --tableRowHover: #2d333b;
  --tableBorder: #373e47;

  --scrollbarTrack: #1c2128;
  --scrollbarThumb: #444c56;
  --scrollbarThumbHover: #768390;

  --editorBg: #22272e;
  --editorCardBg: #2d333b;
  --editorHeaderBg: #444c56;
  --editorFooterBg: #444c56;
  --editorBorder: #2d333b;
  --neutralSubtleMuted: #373e47;
  --editorText: #adbac7;
  --editorTextMuted: #768390;
  --editorTextSubtle: #636e7b;
  --editorAccent: #539bf5;
  --editorAccentEmphasis: #4184e4;
  --editorSuccess: #57ab5a;
  --editorDanger: #e5534b;
  --editorWarning: #c69026;
  --editorBtnBg: #373e47;
  --editorBtnHover: #444c56;
  --editorBtnActive: #4184e4;
  --editorGutterBg: #2d333b;
  --editorLineHighlight: rgba(65, 132, 228, 0.1);
  --editorSelection: rgba(65, 132, 228, 0.2);
  --editorScrollbar: #444c56;
  --editorScrollbarHover: #768390;

  --neutralDefault: #444c56;
  --neutralMuted: #768390;
  --neutralSubtle: #636e7b;

  --bgMain: #2a313c;
  --bgBody: #1c222b;
  --bgSections: #212830;
  --bgHeader: #1c2128;
  --colorTextPrimary: #c9d1d9;
  --colorTextSecondary: #8b949e;
  --colorLink: #58a6ff;
  --colorBorder: #434c56;
  --btnDefault: #373e47;
  --btnHover: #444c56;
  --textMain: #adbac7;
  --textMuted: #768390;

  --badgeSuccessBg: rgba(46, 160, 67, 0.15);
  --badgeSuccessFg: #3fb950;
  --badgeWarningBg: rgba(219, 168, 43, 0.15);
  --badgeWarningFg: #dba82b;
  --badgeDangerBg: rgba(248, 81, 73, 0.15);
  --badgeDangerFg: #f85149;
  --badgeInfoBg: rgba(47, 129, 247, 0.15);
  --badgeInfoFg: #2f81f7;

  --fileTypeHtml: #e34c26;
  --fileTypeCss: #1572b6;
  --fileTypeJs: #f1e05a;
  --fileTypeTs: #2b7489;
  --fileTypeJson: #f1e05a;
  --fileTypeMd: #083fa1;
  --fileTypePy: #3572a5;
  --fileTypePhp: #4f5d95;
  --fileTypeJava: #b07219;
  --fileTypeCpp: #f34b7d;
  --fileTypeC: #555555;
  --fileTypeCs: #239120;
  --fileTypeRb: #701516;
  --fileTypeGo: #00add8;
  --fileTypeRs: #dea584;
  --fileTypeYml: #cb171e;
  --fileTypeXml: #0060ac;
  --fileTypeSql: #e38c00;

  --iconJs: #f1dd3f;
  --iconTs: #3178c6;
  --iconHtml: #e34c26;
  --iconCss: #2965f1;
  --iconJson: #5382a1;
  --iconMd: #083fa1;
  --iconPy: #3776ab;
  --iconJava: #f89820;
  --iconPhp: #8892bf;
  --iconRb: #cc342d;
  --iconGo: #00add8;
  --iconRs: #ce422b;
}

[data-theme="light"] {
  --canvasDefault: #ffffff;
  --canvasOverlay: #f6f8fa;
  --canvasInset: #f6f8fa;
  --canvasSubtle: #f6f8fa;

  --borderDefault: #d0d7de;
  --borderMuted: #d8dee4;
  --borderSubtle: #afb8c1;

  --fgDefault: #1f2328;
  --fgMuted: #656d76;
  --fgSubtle: #6e7781;
  --fgOnEmphasis: #ffffff;

  --accentFg: #0969da;
  --accentEmphasis: #0969da;
  --accentMuted: rgba(9, 105, 218, 0.4);
  --accentSubtle: rgba(9, 105, 218, 0.15);
  --accentBlue: #0969da;

  --successFg: #1a7f37;
  --successEmphasis: #1f883d;
  --successMuted: rgba(31, 136, 61, 0.4);
  --successSubtle: rgba(31, 136, 61, 0.15);

  --dangerFg: #d1242f;
  --dangerEmphasis: #cf222e;
  --dangerMuted: rgba(207, 34, 46, 0.4);
  --dangerSubtle: rgba(207, 34, 46, 0.15);

  --warningFg: #9a6700;
  --warningEmphasis: #9a6700;
  --warningMuted: rgba(154, 103, 0, 0.4);
  --warningSubtle: rgba(154, 103, 0, 0.15);

  --btnPrimaryBg: #1f883d;
  --btnPrimaryHover: #2c974b;
  --btnPrimaryActive: #1a7f37;
  --btnPrimaryText: #ffffff;

  --btnSecondaryBg: #f6f8fa;
  --btnSecondaryHover: #f3f4f6;
  --btnSecondaryActive: #e7ebef;
  --btnSecondaryText: #1f2328;

  --btnTertiaryBg: transparent;
  --btnTertiaryHover: #f6f8fa;
  --btnTertiaryActive: #e7ebef;
  --btnTertiaryText: #1f2328;

  --btnDangerBg: #d1242f;
  --btnDangerHover: #da3633;
  --btnDangerActive: #b62324;
  --btnDangerText: #ffffff;

  --inputBg: #ffffff;
  --inputBorder: #d0d7de;
  --inputBorderHover: #8c959f;
  --inputBorderFocus: #0969da;
  --inputText: #1f2328;
  --inputPlaceholder: #6e7781;

  --codeBg: #f6f8fa;
  --codeText: #1f2328;
  --codeComment: #6e7781;

  --syntaxKeyword: #cf222e;
  --syntaxString: #0a3069;
  --syntaxVariable: #953800;
  --syntaxFunction: #6639ba;
  --syntaxNumber: #0550ae;
  --syntaxConstant: #0550ae;
  --syntaxTag: #6639ba;
  --syntaxMatch: #9a6700;

  --tableHeaderBg: #f6f8fa;
  --tableRowBg: #ffffff;
  --tableRowHover: #f6f8fa;
  --tableBorder: #d0d7de;

  --scrollbarTrack: #f6f8fa;
  --scrollbarThumb: #d0d7de;
  --scrollbarThumbHover: #afb8c1;

  --editorBg: #ffffff;
  --editorCardBg: #f6f8fa;
  --editorHeaderBg: #f6f8fa;
  --editorFooterBg: #f6f8fa;
  --editorBorder: #d0d7de;
  --neutralSubtleMuted: #d8dee4;
  --editorText: #1f2328;
  --editorTextMuted: #656d76;
  --editorTextSubtle: #6e7781;
  --editorAccent: #0969da;
  --editorAccentEmphasis: #0969da;
  --editorSuccess: #1a7f37;
  --editorDanger: #d1242f;
  --editorWarning: #9a6700;
  --editorBtnBg: #f6f8fa;
  --editorBtnHover: #f3f4f6;
  --editorBtnActive: #0969da;
  --editorGutterBg: #f6f8fa;
  --editorLineHighlight: rgba(9, 105, 218, 0.1);
  --editorSelection: rgba(9, 105, 218, 0.2);
  --editorScrollbar: #d0d7de;
  --editorScrollbarHover: #afb8c1;

  --neutralDefault: #6e7781;
  --neutralMuted: #656d76;
  --neutralSubtle: #8c959f;

  --bgMain: #ffffff;
  --bgBody: #ffffff;
  --bgSections: #f6f8fa;
  --bgHeader: #f6f8fa;
  --colorTextPrimary: #1f2328;
  --colorTextSecondary: #656d76;
  --colorLink: #0969da;
  --colorBorder: #d0d7de;
  --btnDefault: #f6f8fa;
  --btnHover: #f3f4f6;
  --textMain: #1f2328;
  --textMuted: #656d76;

  --badgeSuccessBg: rgba(46, 160, 67, 0.15);
  --badgeSuccessFg: #1a7f37;
  --badgeWarningBg: rgba(219, 168, 43, 0.15);
  --badgeWarningFg: #9a6700;
  --badgeDangerBg: rgba(248, 81, 73, 0.15);
  --badgeDangerFg: #d1242f;
  --badgeInfoBg: rgba(47, 129, 247, 0.15);
  --badgeInfoFg: #0969da;

  --fileTypeHtml: #e34c26;
  --fileTypeCss: #1572b6;
  --fileTypeJs: #f1e05a;
  --fileTypeTs: #2b7489;
  --fileTypeJson: #f1e05a;
  --fileTypeMd: #083fa1;
  --fileTypePy: #3572a5;
  --fileTypePhp: #4f5d95;
  --fileTypeJava: #b07219;
  --fileTypeCpp: #f34b7d;
  --fileTypeC: #555555;
  --fileTypeCs: #239120;
  --fileTypeRb: #701516;
  --fileTypeGo: #00add8;
  --fileTypeRs: #dea584;
  --fileTypeYml: #cb171e;
  --fileTypeXml: #0060ac;
  --fileTypeSql: #e38c00;

  --iconJs: #f1dd3f;
  --iconTs: #3178c6;
  --iconHtml: #e34c26;
  --iconCss: #2965f1;
  --iconJson: #5382a1;
  --iconMd: #083fa1;
  --iconPy: #3776ab;
  --iconJava: #f89820;
  --iconPhp: #8892bf;
  --iconRb: #cc342d;
  --iconGo: #00add8;
  --iconRs: #ce422b;
}

* {
  transition:
    background-color var(--transitionBase),
    border-color var(--transitionBase),
    color var(--transitionBase);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

pre,
code,
.code-block,
pre code,
.hljs,
.prism-code,
[class*="language-"],
[class*="hljs-"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

::selection {
  background: var(--accentSubtle);
}
::-moz-selection {
  background: var(--accentSubtle);
}

::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
}
::-webkit-scrollbar-track {
  background: var(--canvasDefault);
}
::-webkit-scrollbar-thumb {
  background: var(--borderDefault);
  border-radius: var(--radiusSm);
  border: 0.1875rem solid var(--canvasDefault);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbarThumbHover);
}
::-webkit-scrollbar-corner {
  background: var(--canvasDefault);
}

html {
  font-size: 0.8125rem;
}

body {
  background-color: var(--bgBody);
  color: var(--colorTextPrimary);
  font-family: var(--fontText);
  font-size: var(--textMd);
  font-weight: var(--weightNormal);
  scroll-behavior: smooth;

  scrollbar-width: none;
  -ms-overflow-style: none;
  
  height: 100%;
}

*::-webkit-scrollbar {
  display: none;
}

h1,
.h1 {
  font-family: var(--fontHead);
  font-size: var(--h1);
  font-weight: var(--weightSemibold);
  line-height: 1;
}
h2,
.h2 {
  font-family: var(--fontHead);
  font-size: var(--h2);
  font-weight: var(--weightSemibold);
  line-height: 1;
}
h3,
.h3 {
  font-family: var(--fontHead);
  font-size: var(--h3);
  font-weight: var(--weightSemibold);
  line-height: 1;
}
h4,
.h4 {
  font-family: var(--fontHead);
  font-size: var(--h4);
  font-weight: var(--weightSemibold);
  line-height: 1;
}

button,
a,
input,
select,
textarea {
  transition: all 0.2s ease;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0.125rem solid var(--accentEmphasis);
  outline-offset: 0.125rem;
}

.layout {
  display: flex;
  min-height: 100vh;
}

#leftSidebar,
#rightSidebar {
  width: var(--sidebarWidth);
  flex-shrink: 0;
  background-color: #2d333b;
  border: 0.0625rem solid var(--borderDefault);
  overflow-y: auto;
  transition: transform 0.3s ease;
  position: relative;
}
#leftSidebar {
  border-top-right-radius: 0.9375rem;
  border-right: 0.0625rem solid var(--colorBorder);
}
#rightSidebar {
  border-top-left-radius: 0.9375rem;
  border-left: 0.0625rem solid var(--colorBorder);
}




/**
.pages[data-page="file"] {
  position: relative;
  min-height: 95dvh;
}
.pages[data-page="file"] {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}
**/
.pages {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  pointer-events: none;
  position: absolute;
  top: 0;
  min-height: 0;
  max-height: 100%;
  z-index: 1;
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear;
  
  
padding: 0;
}
.pages.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;

  z-index: 10;
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear;
}
.pages.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.5rem);
  pointer-events: none;

  
  z-index: 1;
  transition:
    opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear;
}

/**
.show {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.45s ease-in,
    visibility 0.1s ease-in-out;
}
.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease-in-out,
    visibility 0.25s ease-in-out;
}
**/
.hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease-in-out,
    visibility 0.25s ease-in-out;
}
/**
.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}
**/

#mainArea {
  position: relative;
  

}
#mainArea {
  flex: 1;
  margin-left: var(--sidebarWidth);
  margin-right: var(--sidebarWidth);
  transition: margin 0.3s ease;
  
  height: 100%;
  z-index: 1000;
  
  margin-top: 0;
  padding-top: 0;
  
  
  
}
.pagesWrapper {
  position: relative;
}





@media (max-width: 75rem) {
  #leftSidebar,
  #rightSidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 999;
    transform: translateX(-100%);
    box-shadow: var(--shadowLg);
  }
  #rightSidebar {
    right: 0;
    left: auto;
    transform: translateX(100%);
  }
  #leftSidebar.open,
  #rightSidebar.open {
    transform: translateX(0);
  }
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  margin: 0 auto;
}
.navbar-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar-left,
.navbar-right {
  flex: 1;
}
.navbar-center {
  flex: 2;
  justify-content: center;
}
.navbar-left {
  justify-content: flex-start;
}
.navbar-right {
  justify-content: flex-end;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--fgDefault);
  transition: opacity 0.2s ease;
}
.navbar-brand:hover {
  opacity: 0.8;
}
.navbar-brand-icon {
  font-size: var(--text2xl);
  color: var(--accentFg);
}
.navbar-brand-text {
  font-family: var(--fontHead);
  font-size: var(--textSm);
  font-weight: var(--weightSemibold);
}
.navbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvasOverlay);
  color: var(--fgDefault);
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusMd);
  padding: 0.5rem 1rem;
  font-family: var(--fontText);
  font-size: var(--textSm);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 0.5rem;
}
.navbar-button:hover {
  background: var(--canvasSubtle);
  border-color: var(--borderDefault);
}
.navbar-button:focus-visible {
  outline: 0.125rem solid var(--accentFg);
  outline-offset: 0.125rem;
}
.navbar-button-icon {
  padding: 0.5rem;
  aspect-ratio: 1;
}
.navbar-button-with-text {
  padding: 0.5rem 1rem;
}
.navbar-button-search {
  background: var(--canvasOverlay);
  border-color: var(--borderDefault);
  min-width: 12rem;
  justify-content: flex-start;
}
.navbar-button-search:hover {
  background: var(--canvasSubtle);
  border-color: var(--borderDefault);
}
.navbar-button-icon {
  font-size: var(--textMd);
}
.navbar-button-label {
  font-weight: var(--weightNormal);
  white-space: nowrap;
}
.navbar-button-text {
  font-size: var(--textSm);
  font-weight: var(--weightNormal);
  margin-left: 0.25rem;
}
.navbar-button-shortcut {
  background: var(--codeBg);
  color: var(--fgMuted);
  border: 0.0625rem solid var(--borderMuted);
  border-radius: var(--radiusSm);
  padding: 0.125rem 0.375rem;
  font-family: var(--fontMono);
  font-size: var(--textXs);
  margin-left: auto;
}


.repo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  gap: 1rem;
  width: 100%;
}
.repo-card {
  background: var(--canvasOverlay);
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusLg);
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transitionBase);
  position: relative;
}
.repo-card:hover {
  border-color: var(--accentFg);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadowMd);
}
.repo-card:focus-visible {
  outline: 0.125rem solid var(--accentFg);
  outline-offset: 0.125rem;
}
.repo-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.repo-card-content {
  flex: 1;
  min-width: 0;
}
.repo-title {
  font-family: var(--fontHead);
  font-size: var(--textLg);
  font-weight: var(--weightSemibold);
  color: var(--accentFg);
  margin: 0 0 0.25rem 0;
  word-break: break-word;
}
.repo-description {
  font-size: var(--textSm);
  color: var(--fgMuted);
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.repo-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--textXs);
  color: var(--fgMuted);
}
.repo-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.repo-visibility {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--radiusSm);
  background: var(--accentSubtle);
  color: var(--accentFg);
  font-size: var(--textXs);
  font-weight: var(--weightMedium);
}
.repo-delete-button {
  background: transparent;
  border: none;
  padding: 0.25rem;
  color: var(--fgMuted);
  cursor: pointer;
  border-radius: var(--radiusSm);
  transition: all var(--transitionFast);
  flex-shrink: 0;
}
.repo-delete-button:hover {
  color: var(--dangerFg);
  background: var(--dangerSubtle);
}
.repo-delete-button:focus-visible {
  outline: 0.125rem solid var(--dangerFg);
  outline-offset: 0.125rem;
}

.file-type-html {
  color: var(--fileTypeHtml);
}
.file-type-css {
  color: var(--fileTypeCss);
}
.file-type-js,
.file-type-javascript {
  color: var(--fileTypeJs);
}
.file-type-ts,
.file-type-typescript {
  color: var(--fileTypeTs);
}
.file-type-json {
  color: var(--fileTypeJson);
}
.file-type-md,
.file-type-markdown {
  color: var(--fileTypeMd);
}
.file-type-py,
.file-type-python {
  color: var(--fileTypePy);
}
.file-type-php {
  color: var(--fileTypePhp);
}
.file-type-java {
  color: var(--fileTypeJava);
}
.file-type-cpp {
  color: var(--fileTypeCpp);
}
.file-type-c {
  color: var(--fileTypeC);
}
.file-type-cs {
  color: var(--fileTypeCs);
}
.file-type-rb,
.file-type-ruby {
  color: var(--fileTypeRb);
}
.file-type-go {
  color: var(--fileTypeGo);
}
.file-type-rs,
.file-type-rust {
  color: var(--fileTypeRs);
}
.file-type-yml,
.file-type-yaml {
  color: var(--fileTypeYml);
}
.file-type-xml {
  color: var(--fileTypeXml);
}
.file-type-sql {
  color: var(--fileTypeSql);
}

.fileInfoGroup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Unified container for both input and extension button */
.fileNameContainer {
  display: flex;
  align-items: center;
  background-color: var(--canvasSubtle);
  border: 1px solid var(--borderDefault);
  border-radius: var(--radiusMd);
  padding: 0;
  min-width: 200px;
  height: 32px;
  transition: all 0.2s ease;
  overflow: hidden;
}

.fileNameContainer:hover {
  border-color: var(--borderMuted);
  background-color: var(--canvasDefault);
}

.fileNameContainer:focus-within {
  border-color: var(--accentFg);
  box-shadow: 0 0 0 1px var(--accentSubtle);
}

/* Left side - icon and input */
.fileNameInputWrapper {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 0.25rem 0 0.25rem 0.75rem;
  min-width: 0;
  position: relative;
}

.fileIconInsideInput {
  flex-shrink: 0;
  color: var(--fgMuted);
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
}

.fileNameInput {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--fgDefault);
  font-family: var(--fontText);
  font-size: var(--textSm);
  padding: 0;
  outline: none;
  min-width: 0;
  text-align: right;
  margin-right: 4px;
}

.fileNameInput::placeholder {
  color: var(--fgMuted);
  opacity: 0.7;
  text-align: right;
}

/* Remove focus border from input itself */
.fileNameInput:focus {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Right side - extension button (now inside the container) */
.fileExtensionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background: transparent;
  border: none;
  border-left: 1px solid var(--borderSubtle);
  color: var(--accentFg);
  font-family: var(--fontMono);
  font-size: var(--textSm);
  padding: 0 0.75rem;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 0;
  margin-left: auto;
}

.fileExtensionBtn:hover {
  background: var(--accentSubtle);
}

.fileExtensionBtn:hover .extensionChevron {
  transform: rotate(180deg);
}

.fileExtensionLabel {
  font-weight: var(--weightMedium);
}

.extensionChevron {
  transition: transform 0.2s ease;
  width: 12px;
  height: 12px;
}

.modifiedIndicator {
  flex-shrink: 0;
}

.extensionDropdown {
  position: fixed;
  background: var(--canvasDefault);
  border: 1px solid var(--borderDefault);
  border-radius: var(--radiusMd);
  box-shadow: var(--shadowLg);
  z-index: 10000;
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}

.extensionDropdown.show {
  display: block;
}

/* Divider between input and button */
.fileNameInputWrapper::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background-color: var(--borderSubtle);
}

#languageList .dropdownItem[data-value="javascript"]::before {
  content: "JS";
  background: var(--iconJs);
  color: #000;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
  font-weight: var(--weightBold);
}

#languageList .dropdownItem[data-value="typescript"]::before {
  content: "TS";
  background: var(--iconTs);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
  font-weight: var(--weightBold);
}

#languageList .dropdownItem[data-value="html"]::before {
  content: "HTML";
  background: var(--iconHtml);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
  font-weight: var(--weightBold);
}

#languageList .dropdownItem[data-value="css"]::before {
  content: "CSS";
  background: var(--iconCss);
  color: white;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.625rem;
  font-weight: var(--weightBold);
}

/* Add to your styles.css */

#languageList {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.25rem;
}

#languageList .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radiusMd);
  color: var(--fgDefault);
  font-size: var(--textSm);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

#languageList .dropdown-item:hover {
  background: var(--canvasSubtle);
}

#languageList .dropdown-item.active {
  background: var(--accentSubtle);
  color: var(--accentFg);
}

/* Ensure the dropdown has proper styling */
#languageDropdown {
  background: var(--canvasDefault);
  border: 1px solid var(--borderDefault);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowLg);
  min-width: 200px;
  max-width: 300px;
  overflow: hidden;
}

#languageDropdown .dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid var(--borderDefault);
}

#languageDropdown .dropdown-content {
  padding: 0.25rem;
}

.actionButtons {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.actionButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2rem;
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusSm);
  background-color: var(--btnSecondaryBg);
  color: var(--fgDefault);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.actionButton:hover {
  background-color: var(--btnSecondaryHover);
  border-color: var(--fgMuted);
}
.actionButton.hide {
  display: none;
}

.toolbarScroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--borderMuted) transparent;
  padding: 0.125rem 0;
}
.toolbarScroll::-webkit-scrollbar {
  height: 0.25rem;
}
.toolbarScroll::-webkit-scrollbar-track {
  background: transparent;
}
.toolbarScroll::-webkit-scrollbar-thumb {
  background-color: var(--borderMuted);
  border-radius: 0.125rem;
}

.toolbarButtons {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.25rem;
  min-width: min-content;
}
.toolbarButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusSm);
  background-color: var(--btnSecondaryBg);
  color: var(--fgDefault);
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.toolbarButton:hover {
  background-color: var(--btnSecondaryHover);
  border-color: var(--fgMuted);
}
.toolbarButton.active {
  background-color: var(--btnSecondaryHover);
  border-color: var(--accentFg);
  color: var(--accentFg);
}

.fontSizeControl {
  display: flex;
  align-items: center;
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusSm);
  background-color: var(--btnSecondaryBg);
  height: 2rem;
  overflow: hidden;
  flex-shrink: 0;
}
.fontButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--fgDefault);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}
.fontButton:hover {
  background-color: var(--btnSecondaryHover);
}
.fontSizeDisplay {
  padding: 0 0.625rem;
  font-size: var(--textXs);
  color: var(--fgDefault);
  min-width: 2.75rem;
  text-align: center;
  font-family: var(--fontMono);
  font-weight: var(--weightMedium);
}

.icon {
  width: 1rem;
  height: 1rem;
}
.smallIcon {
  width: 0.875rem;
  height: 0.875rem;
}
.tinyIcon {
  width: 0.75rem;
  height: 0.75rem;
}

.file-menu-popover {
  position: fixed;
  min-width: 15rem;
  background: var(--canvasDefault);
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowLg);
  z-index: 10000;
  opacity: 0;
  transform: translateY(-0.625rem) scale(0.95);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.file-menu-popover.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.file-menu-header {
  padding: 0.75rem 1rem;
  border-bottom: 0.0625rem solid var(--borderDefault);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--weightSemibold);
  color: var(--fgDefault);
  font-size: var(--textSm);
}
.file-menu-items {
  padding: 0.5rem;
}
.file-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  border-radius: var(--radiusMd);
  color: var(--fgDefault);
  font-size: var(--textSm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.file-menu-item:hover {
  background: var(--canvasSubtle);
}
.file-menu-item.danger {
  color: var(--dangerFg);
}
.file-menu-item.danger:hover {
  background: var(--dangerSubtle);
}
.file-menu-shortcut {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--fgMuted);
  font-family: var(--fontMono);
}
.file-menu-divider {
  height: 0.0625rem;
  background: var(--borderDefault);
  margin: 0.375rem 0;
}
.file-more-menu-btn {
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: none;
  color: var(--fgMuted);
  cursor: pointer;
  border-radius: var(--radiusMd);
}
tr:hover .file-more-menu-btn {
  opacity: 1;
}
.file-more-menu-btn:hover {
  background: var(--canvasSubtle);
  color: var(--fgDefault);
}

#searchModal .bg-github-canvas-default {
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-1.25rem) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#searchInput {
  font-size: 1rem;
}
#searchInput::placeholder {
  color: var(--fgMuted);
}
#searchResults::-webkit-scrollbar {
  width: 0.5rem;
}
#searchResults::-webkit-scrollbar-track {
  background: transparent;
}
#searchResults::-webkit-scrollbar-thumb {
  background: var(--borderDefault);
  border-radius: var(--radiusSm);
}
#searchResults::-webkit-scrollbar-thumb:hover {
  background: var(--borderMuted);
}

[data-drop-zone] {
  position: relative;
}
[data-drop-zone].dragging {
  border-color: var(--accentEmphasis);
  background-color: var(--accentSubtle);
}
[data-drop-zone]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.125rem dashed transparent;
  border-radius: var(--radiusMd);
  pointer-events: none;
  transition: all 0.2s ease;
}
[data-drop-zone].dragging::after {
  border-color: var(--accentEmphasis);
}
#uploadDropZone {
  transition: all 0.3s ease;
}
#uploadDropZone:hover {
  border-color: var(--accentEmphasis);
  background-color: var(--accentSubtle);
}

.preview-code {
  background: var(--canvasInset);
  padding: 1rem;
  border-radius: var(--radiusMd);
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  font-family: var(--fontMono);
}
.preview-code code {
  color: var(--fgDefault);
}
.preview-iframe {
  width: 100%;
  height: 37.5rem;
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusMd);
}
.markdown-preview {
  color: var(--fgDefault);
  line-height: 1.6;
}
.markdown-preview h1 {
  font-size: 2em;
  font-weight: var(--weightSemibold);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--borderDefault);
}
.markdown-preview h2 {
  font-size: 1.5em;
  font-weight: var(--weightSemibold);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
}
.markdown-preview h3 {
  font-size: 1.25em;
  font-weight: var(--weightSemibold);
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}
.markdown-preview code {
  background: var(--canvasInset);
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  font-size: 0.9em;
  font-family: var(--fontMono);
}
.markdown-preview pre {
  background: var(--canvasInset);
  padding: 1rem;
  border-radius: var(--radiusMd);
  overflow-x: auto;
  margin: 1rem 0;
}
.markdown-preview pre code {
  background: transparent;
  padding: 0;
}

#importUrlInput,
#exportRepoName {
  font-size: var(--textSm);
}

.animate-slide-up {
  animation: slideUp 0.3s ease forwards;
}
.animate-fade-in {
  animation: fadeIn 0.3s ease;
}
.animate-scale-in {
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radiusFull);
  font-size: 0.6875rem;
  font-weight: var(--weightMedium);
}
.badge-success {
  background: var(--badgeSuccessBg);
  color: var(--badgeSuccessFg);
}
.badge-warning {
  background: var(--badgeWarningBg);
  color: var(--badgeWarningFg);
}
.badge-danger {
  background: var(--badgeDangerBg);
  color: var(--badgeDangerFg);
}
.badge-info {
  background: var(--badgeInfoBg);
  color: var(--badgeInfoFg);
}

[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  background: var(--fgMuted);
  color: #fff;
  font-size: var(--textXs);
  border-radius: var(--radiusMd);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  margin-bottom: 0.3125rem;
  z-index: 1001;
}
[data-tooltip]:hover::before {
  opacity: 1;
}

.shortcut-hint {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--canvasOverlay);
  border: 0.0625rem solid var(--borderDefault);
  border-radius: var(--radiusMd);
  padding: 0.75rem 1rem;
  font-size: var(--textXs);
  color: var(--fgMuted);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
  z-index: 999;
  opacity: 0;
  transform: translateY(0.625rem);
  transition: all 0.3s ease;
  pointer-events: none;
}
.shortcut-hint.show {
  opacity: 1;
  transform: translateY(0);
}
.shortcut-hint kbd {
  background: var(--canvasInset);
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  border: 0.0625rem solid var(--borderDefault);
  font-family: var(--fontMono);
  font-size: 0.6875rem;
}

.file-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-icon.js {
  color: var(--iconJs);
}
.file-icon.ts {
  color: var(--iconTs);
}
.file-icon.html {
  color: var(--iconHtml);
}
.file-icon.css {
  color: var(--iconCss);
}
.file-icon.json {
  color: var(--iconJson);
}
.file-icon.md {
  color: var(--iconMd);
}
.file-icon.py {
  color: var(--iconPy);
}
.file-icon.java {
  color: var(--iconJava);
}
.file-icon.php {
  color: var(--iconPhp);
}
.file-icon.rb {
  color: var(--iconRb);
}
.file-icon.go {
  color: var(--iconGo);
}
.file-icon.rs {
  color: var(--iconRs);
}

.drop-target {
  border: 0.125rem dashed var(--accentEmphasis);
  background-color: var(--accentSubtle);
}
.drop-target::after {
  content: "Drop files here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accentFg);
  font-weight: var(--weightSemibold);
  font-size: 1rem;
  pointer-events: none;
}

.sidebar-title {
  font-size: var(--textXs);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--colorTextPrimary);
  padding: 0.5rem 0.75rem;
  text-align: right;
  opacity: 0.65;
  transition: opacity 0.65s ease-in-out;
}
.sidebar-link {
  display: block;
  font-size: var(--textSm);
  color: var(--colorTextSecondary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radiusMd);
  transition:
    background 0.15s ease-in-out,
    color 0.15s ease-in-out;
  text-decoration: none;
  cursor: pointer;
}
.sidebar-link:hover {
  background-color: var(--btnSecondaryHover);
  color: #ffffff;
}
.sidebar-link.active {
  background-color: var(--btnSecondaryBg);
  color: #ffffff;
  font-weight: 600;
}
aside:hover .sidebar-title {
  opacity: 1;
  transition: opacity 0.65s ease-in-out;
}

.profile-section {
  padding-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--colorBorder);
  margin-bottom: 1rem;
}
.profile-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  margin-bottom: 0.75rem;
  border: 0.125rem solid var(--colorBorder);
}
.profile-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--colorTextPrimary);
  line-height: 1.2;
}
.profile-username {
  font-size: var(--textSm);
  color: var(--colorTextSecondary);
}

.repo-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  color: var(--colorTextPrimary);
  text-decoration: none;
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  transition: all 0.2s ease;
  margin-bottom: 0.125rem;
  cursor: pointer;
}
.repo-item:hover {
  background-color: var(--btnSecondaryHover);
}
.repo-item.active {
  background-color: var(--btnSecondaryBg);
}
.repo-icon {
  font-size: var(--textXs);
  color: var(--colorTextSecondary);
}
.repo-icon.public {
  color: var(--successFg);
}

.recent-file-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  color: var(--colorTextPrimary);
  text-decoration: none;
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  transition: all 0.2s ease;
  margin-bottom: 0.125rem;
  cursor: pointer;
}
.recent-file-item:hover {
  background-color: var(--btnSecondaryHover);
}
.recent-file-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--colorTextSecondary);
}

.navbar-container {
  background-color: #2d333b;
  border-bottom: 0.0625rem solid var(--colorBorder);
  height: 3.875rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
}
.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1rem;
  max-width: 100%;
}
.navDrop {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  padding: 0.35rem 0.75rem;
}
.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.menu-button {
  background: none;
  border: none;
  color: var(--colorTextPrimary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: var(--radiusMd);
  transition: all 0.2s ease;
}
.menu-button:hover {
  background-color: var(--btnSecondaryHover);
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.1875rem;
  background-color: transparent;
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.page-progress.visible {
  opacity: 1;
}
.progress-bar {
  width: 100%;
  height: 100%;
  background-color: #2d333b;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
  box-shadow:
    0 0 0.625rem rgba(220, 38, 38, 0.5),
    0 0 1.25rem rgba(220, 38, 38, 0.3);
  width: 0%;
  transition: width 0.3s ease;
}



.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.rounded {
  border-radius: var(--radiusSm);
}
.rounded-lg {
  border-radius: var(--radiusMd);
}
.rounded-full {
  border-radius: var(--radiusFull);
}
.shadow-lg {
  box-shadow: var(--shadowLg);
}
.shadow-2xl {
  box-shadow: var(--shadowXl);
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  user-select: none;
}

.editorHeader,
.editorHeader .hGroup {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
}
.editorHeader {
  align-items: center;
  justify-content: space-around;
  padding: 0.5rem 1rem;
  background: var(--editorHeaderBg);
  border-bottom: 0.0625rem solid var(--neutralSubtle);
  height: 2.75rem;
  overflow: hidden;
  overflow-x: scroll;
}
.editorHeader::-webkit-scrollbar {
  display: none;
}
.editorHeader .hGroup {
  margin-left: 0.5rem;
  margin-right: 2rem;
}
.fileInfo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fileIcon {
  width: 1rem;
  height: 1rem;
  color: var(--editorTextMuted);
  flex-shrink: 0;
}
.fileName {
  font-size: var(--textSm);
  font-weight: 500;
  color: var(--editorText);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12.5rem;
}
.badgeSecondary {
  background: var(--editorBtnBg);
  color: var(--editorTextMuted);
  border: 0.0625rem solid var(--neutralSubtleMuted);
}
.headerSeparator {
  width: 0.0625rem;
  height: 1rem;
  background: var(--neutralSubtle);
  margin: 0 0.25rem;
}
.languageSelector {
  position: relative;
}
.headerButton {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 1.75rem;
  min-width: 1.75rem;
  padding: 0 0.375rem;
  background: transparent;
  border: none;
  border-radius: var(--radiusSm);
  color: var(--editorTextMuted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: var(--textXs);
  font-family: inherit;
}
.headerButton:hover {
  background: var(--editorBtnBg);
  color: var(--editorText);
}
.headerButton.active {
  background: var(--editorBtnActive);
  color: #ffffff;
}
.headerButton.active:hover {
  background: var(--editorAccentEmphasis);
}
.languageBtn {
  padding: 0 0.5rem;
}
.buttonIcon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}
.chevronIcon {
  width: 0.625rem;
  height: 0.625rem;
  flex-shrink: 0;
}

.dropdown {
  position: fixed;
  background: var(--canvasDefault);
  border: 1px solid var(--borderDefault);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowLg);
  z-index: 10000;
  overflow: hidden;
  display: none;
}

.dropdown.show {
  display: block;
}

.dropdownContent {
  padding: 0.5rem;
}

.dropdownItem {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: var(--radiusMd);
  color: var(--fgDefault);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dropdownItem:hover {
  background: var(--canvasSubtle);
}

.dropdownIcon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fgMuted);
}

.dropdownDivider {
  height: 1px;
  background: var(--borderDefault);
  margin: 0.375rem 0;
}

.fontSizeControl {
  display: flex;
  align-items: center;
  background: var(--editorBtnBg);
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusSm);
  height: 1.75rem;
  overflow: hidden;
}
.fontBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--editorTextMuted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.fontBtn:hover {
  background: var(--editorBtnHover);
  color: var(--editorText);
}
.fontSizeLabel {
  padding: 0 0.5rem;
  font-size: 0.6875rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--editorText);
  min-width: 2.5rem;
  text-align: center;
  border-left: 0.0625rem solid var(--neutralSubtle);
  border-right: 0.0625rem solid var(--neutralSubtle);
}

.editorBody {
  position: relative;
  flex: 1;
  min-height: 25rem;
  max-height: calc(100vh - 15.625rem);
  background: var(--editorBg);
  overflow: hidden;
}
.codeMirrorContainer {
  width: 100%;
  height: 100%;
}
.codeMirrorContainer .CodeMirror {
  height: 100%;
  width: 100%;
  background: var(--editorBg);
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--editorText);
}
.codeMirrorContainer .CodeMirror-scroll {
  overflow: auto;
}
.codeMirrorContainer .CodeMirror-gutters {
  background: var(--editorGutterBg);
  border-right: 0.0625rem solid var(--neutralSubtle);
  padding-right: 0.5rem;
}
.codeMirrorContainer .CodeMirror-linenumber {
  color: var(--editorTextSubtle);
  padding: 0 0.75rem 0 0.5rem;
  font-family: "JetBrains Mono", monospace;
  font-size: var(--textXs);
}
.codeMirrorContainer .CodeMirror-foldgutter {
  width: 0.5rem;
}
.codeMirrorContainer .CodeMirror-foldgutter-open,
.codeMirrorContainer .CodeMirror-foldgutter-folded {
  cursor: pointer;
  color: var(--editorTextSubtle);
  font-size: 1.175rem;
  line-height: 1.25;
  text-align: center;
  transition: color 0.15s ease;
}
.codeMirrorContainer .CodeMirror-foldgutter-open::after {
  content: "▾";
}
.codeMirrorContainer .CodeMirror-foldgutter-folded::after {
  content: "▸";
}
.codeMirrorContainer .CodeMirror-foldgutter-open:hover,
.codeMirrorContainer .CodeMirror-foldgutter-folded:hover {
  color: var(--editorText);
}
.codeMirrorContainer .CodeMirror-activeline-background {
  background: var(--editorLineHighlight);
}
.codeMirrorContainer .CodeMirror-selected {
  background: var(--editorSelection);
}
.codeMirrorContainer .CodeMirror-matchingbracket {
  color: var(--editorAccent);
  background: rgba(83, 155, 245, 0.2);
  border-bottom: 0.0625rem solid var(--editorAccent);
}
.codeMirrorContainer .CodeMirror-cursor {
  border-left: 0.125rem solid var(--editorAccent);
}

.loadingSpinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(34, 39, 46, 0.9);
  backdrop-filter: blur(0.25rem);
  z-index: 100;
}
.loadingSpinner[data-active="true"] {
  display: flex;
}
.spinnerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.spinnerSvg {
  width: 3rem;
  height: 3rem;
  animation: rotate 1s linear infinite;
}
.spinnerTrack {
  fill: none;
  stroke: var(--neutralSubtle);
  stroke-width: 4;
}
.spinnerHead {
  fill: none;
  stroke: var(--editorAccent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 60;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dashoffset: 80;
  }
  50% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 80;
  }
}

.searchPanel {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--editorCardBg);
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusMd);
  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.3);
  z-index: 50;
}
.searchContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
}
.searchInput {
  width: 12.5rem;
  height: 1.75rem;
  padding: 0 0.625rem;
  background: var(--editorBg);
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusSm);
  color: var(--editorText);
  font-size: 0.8125rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
}
.searchInput:focus {
  border-color: var(--editorAccent);
  box-shadow: 0 0 0 0.125rem rgba(83, 155, 245, 0.2);
}
.searchInput::placeholder {
  color: var(--editorTextSubtle);
}
.searchActions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.searchCount {
  font-size: 0.6875rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--editorTextMuted);
  padding: 0 0.375rem;
  min-width: 2.5rem;
  text-align: center;
}
.searchNavBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusSm);
  color: var(--editorTextMuted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.searchNavBtn:hover {
  background: var(--editorBtnBg);
  color: var(--editorText);
  border-color: var(--editorTextMuted);
}

.editorFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 1rem;
  background: var(--editorFooterBg);
  border-top: 0.0625rem solid var(--neutralSubtle);
  font-size: 0.6875rem;
  color: var(--editorTextMuted);
  min-height: 1.75rem;
}
.editorFooterLeft,
.editorFooterCenter,
.editorFooterRight {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.footerItem {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.footerLabel {
  color: var(--editorTextSubtle);
}
.footerValue {
  font-family: "JetBrains Mono", monospace;
  color: var(--editorTextMuted);
}
.footerBullet {
  color: var(--editorTextSubtle);
  margin: 0 0.125rem;
}
.footerIcon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--editorTextSubtle);
}
.footerDivider {
  width: 0.0625rem;
  height: 0.75rem;
  background: var(--neutralSubtle);
}
.statusIndicator {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.statusIcon {
  width: 0.75rem;
  height: 0.75rem;
}
.statusOk {
  color: var(--editorSuccess);
}
.statusError {
  color: var(--editorDanger);
}
.statusWarning {
  color: var(--editorWarning);
}
.footerBadge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  background: transparent;
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusSm);
  font-size: 0.625rem;
  font-family: "JetBrains Mono", monospace;
  color: var(--editorTextMuted);
}
.footerBadgeAccent {
  background: rgba(83, 155, 245, 0.1);
  border-color: rgba(83, 155, 245, 0.3);
  color: var(--editorAccent);
}
.badgeIcon {
  width: 0.625rem;
  height: 0.625rem;
}

.commitPanel {
  background: var(--editorCardBg);
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusMd);
  padding: 1rem;
}
.commitTitle {
  margin: 0 0 0.75rem 0;
  font-size: var(--textSm);
  font-weight: 600;
  color: var(--editorText);
}
.commitContent {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.commitInput,
.commitTextarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--editorBg);
  border: 0.0625rem solid var(--neutralSubtle);
  border-radius: var(--radiusSm);
  color: var(--editorText);
  font-size: var(--textSm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.commitInput:focus,
.commitTextarea:focus {
  border-color: var(--editorAccent);
}
.commitInput::placeholder,
.commitTextarea::placeholder {
  color: var(--editorTextSubtle);
}
.commitTextarea {
  resize: vertical;
  min-height: 4rem;
  line-height: 1.5;
}
.commitActions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.commitBtnPrimary,
.commitBtnSecondary {
  padding: 0.5rem 1rem;
  border-radius: var(--radiusMd);
  font-size: var(--textSm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.commitBtnPrimary {
  background: #347d39;
  border: none;
  color: #ffffff;
}
.commitBtnPrimary:hover {
  background: #46954a;
}
.commitBtnSecondary {
  background: transparent;
  border: 0.0625rem solid var(--neutralSubtle);
  color: var(--editorText);
}
.commitBtnSecondary:hover {
  background: var(--editorBtnBg);
  border-color: var(--editorTextMuted);
}

.dropdown-wrapper {
  max-width: 25rem;
  margin: 0 auto;
}
.dropdown-trigger {
  position: relative;
  display: inline-block;
}
.trigger-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--accentFg);
  border: 0.0625rem solid var(--accentEmphasis);
  border-radius: var(--radiusMd);
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transitionBase);
  font-size: 0.875rem;
}
.trigger-button:hover {
  background-color: var(--accentEmphasis);
}
.btn-divider {
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.7);
}
.more-btn {
  background: transparent;
  border: none;
  color: white;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chevron {
  width: 1rem;
  height: 1rem;
  fill: white;
  transition: transform 0.2s ease;
}
.dropdown-trigger:hover .chevron {
  transform: rotate(180deg);
}
.dropdown-menu {
  position: fixed;
  background-color: var(--canvasSubtle);
  border: 0.0625rem solid var(--borderSubtle);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowLg);
  z-index: 10000;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
.dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 0.0625rem solid var(--borderSubtle);
}
.header-icon {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  color: var(--accentFg);
}
.save-info {
  flex: 1;
  min-width: 0;
}
.save-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fgOnEmphasis);
  margin-bottom: 0.125rem;
}
.save-subtitle {
  font-size: 0.8125rem;
  color: var(--fgSubtle);
  font-weight: 400;
}

.commit-panel {
  padding: 1rem;
  background-color: var(--canvasSubtle);
  border-top: 0.0625rem solid var(--borderDefault);
}
.commit-form {
  padding: 1rem;
}
.commit-input-group {
  margin-bottom: 1rem;
}
.commit-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--fgDefault);
  margin-bottom: 0.375rem;
}
.commit-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--borderSubtle);
  border-radius: var(--radiusSm);
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fgSubtle);
  background-color: var(--canvasDefault);
  resize: vertical;
  min-height: 5rem;
  transition: var(--transitionBase);
}
.commit-textarea:focus {
  outline: none;
  border-color: var(--borderSubtle);
  box-shadow: 0 0 0 0.1875rem rgba(99, 102, 241, 0.1);
}
.commit-textarea::placeholder {
  color: var(--fgSubtle);
}
.form-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radiusSm);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transitionBase);
  white-space: nowrap;
  border: 0.0625rem solid transparent;
}
.btn-primary {
  background-color: var(--btnPrimaryBg);
  color: var(--btnPrimaryText);
  border-color: var(--btnPrimaryText);
}
.btn-primary:hover {
  background-color: transparent;
}
.btn-secondary {
  background-color: var(--canvasOverlay);
  color: var(--fgOnEmphasis);
  border-color: var(--borderDefault);
}
.btn-secondary:hover {
  background-color: transparent;
}



.code-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: var(--canvasSubtle);
  border-bottom: 0.0625rem solid var(--borderDefault);
  min-height: 3rem;
  gap: 1rem;
}
.code-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: var(--canvasSubtle);
  border-bottom: 0.0625rem solid var(--borderDefault);
  gap: 1rem;
}
.gutter-container {
  display: flex;
  flex-shrink: 0;
  background-color: var(--canvasSubtle);
  border-right: 0.0625rem solid var(--borderDefault);
}

#coderWrapper {
  display: flex;
  flex-direction: column;
  height: 65svh;
  min-height: 18.75rem;
  background-color: var(--codeBg);
  border: 0.0625rem solid var(--borderDefault);
  overflow: hidden;
  position: relative;
  margin: 0 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
#codeMirrorContainer {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}
#codeMirrorContainer . co-worker {
  height: 100%;
  background-color: var(--codeBg);
}
#codeMirrorContainer .cm-scroller {
  overflow: auto;
}
#codeMirrorContainer .cm-editor .cm-content,
#codeMirrorContainer .cm-editor .cm-gutters,
#codeMirrorContainer .cm-editor .cm-gutter,
#codeMirrorContainer .cm-editor .cm-activeLineGutter {
  background-color: var(--codeBg);
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  backdrop-filter: blur(5rem);
}
#overlay.active {
  visibility: visible;
  opacity: 0.65;
  pointer-events: all;
}

.loading-spinner {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10;
}
.loading-spinner[data-active="true"] {
  display: flex;
}
.spinner-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.spinner-svg {
  width: 4rem;
  height: 4rem;
}
.spinner-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 6;
}
.spinner-head {
  fill: none;
  stroke: var(--accentFg);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 80;
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.editorContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 90dvh;
  padding-top: 0;
  margin-top: 0;
  
  overflow: hidden;
  overflow-y: auto;
}







.editorContainer.fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  z-index: 10000;
  background: var(--editorBg);
  padding-top: 0;
}
.editorCard {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.editorBody {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.CodeMirror {
  height: 100%;
}

.CodeMirror-gutters {
  background: var(--editorGutterBg);
  border-right: 1px solid var(--editorBorder);
}
.CodeMirror-foldgutter {
  width: 0.9rem;
}
.CodeMirror-foldgutter-open:after {
  content: "▾";
  color: var(--fgMuted);
}
.CodeMirror-foldgutter-folded:after {
  content: "▸";
  color: var(--editorAccent);
}


.breadcrumbNav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-size: 0.875rem;
}
.breadCrumb {
  display: inline-flex;
  align-items: center;
  color: var(--fgMuted);
  text-decoration: none;
  padding: 0.25rem 0.375rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
  font-weight: 500;
}
.breadCrumb:hover {
  color: var(--fgDefault);
  background-color: var(--canvasSubtle);
}
.breadCrumb.current {
  color: var(--fgDefault);
  font-weight: 600;
  pointer-events: none;
}

.headerScrollContainer {
  width: 100%;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  padding: 0.5rem;
}
.headerScrollContainer::-webkit-scrollbar {
  display: none;
}
.headerContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  min-width: min-content;
  padding: 0 0.5rem;
}
.headerScrollBtn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2rem;
  background: var(--canvasOverlay);
  border: none;
  color: var(--fgMuted);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}
.headerScrollBtn:hover {
  background: var(--canvasSubtle);
  color: var(--fgDefault);
}
.headerScrollBtn.left {
  left: 0;
  background: linear-gradient(to right, var(--canvasOverlay) 70%, transparent);
}
.headerScrollBtn.right {
  right: 0;
  background: linear-gradient(to left, var(--canvasOverlay) 70%, transparent);
}
.coderHeader:hover .headerScrollBtn {
  opacity: 1;
}
.headerScrollBtn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.headerScrollBtn.disabled:hover {
  background: var(--canvasOverlay);
  color: var(--fgMuted);
}

.coderHeader .leftSide,
.coderHeader .centerSide,
.coderHeader .rightSide {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
}
.coderHeader .leftSide {
  flex: 1;
  min-width: 0;
}
.coderHeader .centerSide {
  flex-shrink: 0;
}
.coderHeader .rightSide {
  flex-shrink: 0;
}

.modifiedIndicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.modifiedDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00e5ff;
  box-shadow:
    0 0 4px #00e5ff,
    0 0 8px rgba(0, 229, 255, 0.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.modeButtons {
  display: flex;
  background: var(--canvasDefault);
  border: 1px solid var(--borderDefault);
  border-radius: 0.5rem;
  overflow: hidden;
}
.modeButton {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--fgMuted);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modeButton:hover {
  background: var(--canvasSubtle);
  color: var(--fgDefault);
}
.modeButton.active {
  background: var(--accentFg);
  color: white;
}

.coderToolBar::-webkit-scrollbar {
  display: none;
}
.toolbarGroup {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.separator {
  width: 1px;
  height: 1.25rem;
  background: var(--borderDefault);
  flex-shrink: 0;
}



#newFileDropdown {
  position: fixed;
  background: var(--canvasOverlay);
  border: 1px solid var(--borderDefault);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  width: 220px;
  z-index: 10000;
  overflow: hidden;
}
#newFileDropdown .dropdown-header {
  padding: 1rem;
  border-bottom: 1px solid var(--borderDefault);
}
#newFileDropdown .dropdown-content {
  padding: 0.5rem;
}
#newFileDropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  color: var(--fgDefault);
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
#newFileDropdown .dropdown-item:hover {
  background: var(--canvasSubtle);
}
#newFileDropdown .dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

#editorBody {
  min-height: 400px;
}

.searchPanel {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 100;
  background-color: var(--canvasOverlay);
  border: 1px solid var(--borderDefault);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 300px;
  padding: 0.5rem;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}










@media (max-width: 48rem) {
  .file-menu-popover {
    min-width: 12.5rem;
    max-width: calc(100vw - 2rem);
  }
  #searchModal .bg-github-canvas-default {
    max-width: calc(100vw - 1rem);
    margin: 1rem;
  }
  #uploadModal .bg-github-canvas-default,
  #importModal .bg-github-canvas-default,
  #exportModal .bg-github-canvas-default {
    max-width: calc(100vw - 1rem);
    margin: 1rem;
  }
  .navbar-button-label {
    display: none;
  }
  .navbar-button-search {
    min-width: auto;
    padding: 0.5rem;
  }
  .navbar-button-shortcut {
    display: none;
  }
  .navbar-button-text {
    display: none;
  }
  .navbar-button-with-text {
    padding: 0.5rem;
    aspect-ratio: 1;
  }
  .repo-list {
    grid-template-columns: 1fr;
  }
  .coderHeader {
    flex-direction: column;
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    padding: 0.75rem;
    gap: 1rem;
  }

  .coderToolBar {
    display: flex;
    gap: 1rem;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem;
  }

  .coderHeaderLeft {
    width: 100%;
  }
  .coderHeaderRight {
    width: 100%;
  }
  .coderFooter {
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
    text-align: center;
  }
  .coderFooterLeft,
  .coderFooterRight {
    justify-content: center;
  }
  .searchPanel {
    position: fixed;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    min-width: auto;
  }
  .editorHeader {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .editorHeaderLeft,
  .editorHeaderCenter,
  .editorHeaderRight {
    flex-wrap: wrap;
  }
  .fileName {
    max-width: 7.5rem;
  }
  .editorFooter {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .editorFooterLeft,
  .editorFooterCenter,
  .editorFooterRight {
    justify-content: center;
  }
  .searchPanel {
    left: 0.5rem;
    right: 0.5rem;
  }
  .searchInput {
    width: 100%;
    flex: 1;
  }
  
  .fileInfoGroup {
    min-width: 150px;
  }
  .fileNameInput {
    max-width: 150px;
  }
}

@media (max-width: 40rem) {
  .hidden-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
  .spinner-svg {
    animation-duration: 4s;
  }
  .spinner-head {
    animation-duration: 3s;
  }
}

[data-notify="error"] {
  z-index: 9999999999;
}

.sticky-layout {
  position: relative;
  width: 100%;
}



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

.breadCrumb {
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.breadCrumb:hover {
  color: #e2e8f0;
}

.breadCrumb.current {
  color: var(--text);
  font-weight: 500;
  pointer-events: none;
}

.navDivider {
  display: inline-flex;
  align-items: center;
  color: #475569;
  margin: 0;
}

.navDivider svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}



#fileName {
  position: absolute;
  right: 1rem;
}

html {
  font-size: 13px !important;
}

/**
THESE wrapper containers were created because i was under 
the impression that a sticky element has to have a container 
to stick to other than the body container.....
**/
.wrapper[data-wrap="top"],
.wrapper[data-wrap="bottom"] {
  width: 100%;
  margin: 0;
  padding: 0;
}
.wrapper[data-wrap="top"] {
  height: 65px;
}
.wrapper[data-wrap="bottom"] {
  height: calc(100vh - 65px);
}

.upper {
  position: relative;
}































/****************  F I X E D  ******************/
.navbar {
  position: sticky;
  top: 0;
  height: var(--navbar-height);
  background: var(--canvasOverlay);
  border-bottom: 0.0625rem solid var(--borderDefault);
  padding: 0.75rem 1rem;
  z-index: 1000;
  backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.breadCrumbsWrapper {
  position: sticky;
  top: var(--navbar-height);
  height: var(--breadcrumb-height);
  min-height: 0;
  background: var(--canvasOverlay);
  border-bottom: 0.0625rem solid var(--borderDefault);
  z-index: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;  
  display: flex;
  align-items: center;  
}

.coderHeaderWrapper {
  position: sticky;
  top: var(--navbar-height);
  height: var(--coder-header-height);
  background: var(--canvasOverlay);
  border-bottom: 0.0625rem solid var(--borderDefault);
  z-index: 950;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: auto;
  padding: 1rem; 
  justify-content: space-evenly; 
}

.coderToolBarWrapper {
  position: sticky;

  top: calc(var(--navbar-height) + var(--coder-header-height));

  
  height: var(--toolbar-height);
  background: var(--canvasOverlay);
  border-bottom: 0.0625rem solid var(--borderDefault);
  z-index: 850;
  backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow-x: auto;
  padding: 1rem; 
  justify-content: space-evenly;
}









.editorContainer[data-fullscreen="true"] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--canvasDefault);
}

.editorContainer[data-fullscreen="true"] .navbar,
.editorContainer[data-fullscreen="true"] .breadCrumbsWrapper,
.editorContainer[data-fullscreen="true"] .coderHeaderWrapper,
.editorContainer[data-fullscreen="true"] .coderToolBarWrapper {
  position: absolute;
  top: 0;
}