/* Glassy UI CSS- (c) 2023-2024 CJ3636 (MIT License) */
:root {
   --bg: #0a0c10;
   --glass: rgba(255, 255, 255, 0.06);
   --glass-strong: rgba(255, 255, 255, 0.10);
   --border: rgba(255, 255, 255, 0.12);
   --text: #eaeef5;
   --muted: #b8c0cc;
   --accent: #7aa2ff;
   --accent-2: #6af0d9;
   --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
   --radius-xl: 18px;
   --radius-lg: 14px;
   --radius-md: 12px;
   --radius-sm: 10px;
}

* {
   box-sizing: border-box
}

html,
body {
   height: 100%
}

body {
   margin: 0;
   font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
   color: var(--text);
   background: radial-gradient(1200px 1200px at 10% -10%, #182036 0%, transparent 60%), radial-gradient(1000px 1000px at 110% 10%, #1a2a2b 0%, transparent 50%), var(--bg);
}

.app {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 20px;
   padding: 20px;
}

.app.sidebar-collapsed {
   grid-template-columns: 1fr;
}

@media (max-width:960px) {
   .app {
      grid-template-columns: 1fr
   }
}

.header {
   position: sticky;
   top: 10px;
   z-index: 50;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 12px 16px 20px;
   padding: 12px 16px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
   backdrop-filter: blur(10px);
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow);
}

.brand {
   display: flex;
   align-items: center;
   gap: 12px;
   font-weight: 800;
   letter-spacing: .3px;
}

.brand .dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent), var(--accent-2));
   box-shadow: 0 0 16px rgba(122, 162, 255, 0.55);
}

.actions {
   display: flex;
   gap: 10px
}

.btn {
   appearance: none;
   border: 1px solid var(--border);
   background: var(--glass);
   color: var(--text);
   padding: 8px 12px;
   border-radius: 12px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   backdrop-filter: blur(8px);
   transition: transform .08s ease, border-color .2s ease, background .2s ease;
}

.btn:hover {
   transform: translateY(-1px);
   border-color: var(--glass-strong);
   background: rgba(255, 255, 255, 0.09);
}

.btn:active {
   transform: translateY(0);
}

.btn .icon {
   width: 16px;
   height: 16px;
   display: inline-block;
}

.sidebar {
   position: sticky;
   top: 98px;
   align-self: start;
   max-height: calc(100vh - 118px);
   overflow: auto;
   padding: 14px;
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
   backdrop-filter: blur(10px);
   box-shadow: var(--shadow);
}

.sidebar.hidden {
   display: none;
}

.nav-title {
   font-size: 13px;
   color: var(--muted);
   text-transform: uppercase;
   letter-spacing: .12em;
   margin: 8px 4px 12px;
}

.nav {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.nav-tabs {
   display: flex;
   gap: 6px;
   margin: 0 0 10px;
}

.nav-tabs .tab {
   flex: 1;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid var(--border);
   color: var(--text);
   padding: 8px 10px;
   border-radius: 10px;
   font-size: 12px;
   font-weight: 600;
   cursor: pointer;
}

.nav-tabs .tab.active {
   background: linear-gradient(180deg, rgba(122, 162, 255, 0.18), rgba(106, 240, 217, 0.12));
   border-color: rgba(122, 162, 255, 0.55);
}

.nav[data-list="local"] button {
   background: rgba(255, 255, 255, 0.03);
}

.nav[data-list="local"] button.active {
   background: linear-gradient(180deg, rgba(106, 240, 217, 0.18), rgba(122, 162, 255, 0.12));
   border-color: rgba(106, 240, 217, 0.55);
}

.nav button {
   text-align: left;
   border: 1px solid transparent;
   background: transparent;
   color: var(--text);
   padding: 10px 12px;
   border-radius: 10px;
   cursor: pointer;
   font-weight: 600;
}

.nav button:hover {
   background: var(--glass);
   border-color: var(--border);
}

.nav button.active {
   background: linear-gradient(180deg, rgba(122, 162, 255, 0.16), rgba(106, 240, 217, 0.10));
   border-color: rgba(122, 162, 255, 0.45);
}

.return-to-top {
   position: fixed;
   left: 24px;
   bottom: 24px;
   z-index: 9999;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
   color: var(--text);
   display: none;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: opacity .18s, background .18s, border-color .18s;
   opacity: 0;
   backdrop-filter: blur(10px);
}

.return-to-top svg {
   display: block;
   margin: auto;
}

.return-to-top:hover {
   transform: translateY(-1px);
   border-color: var(--glass-strong);
   background: rgba(255, 255, 255, 0.09);
}

.return-to-top:active {
   background: linear-gradient(180deg, rgba(122, 162, 255, 0.18), rgba(106, 240, 217, 0.12));
   border-color: rgba(122, 162, 255, 0.55);
}

.return-to-top svg {
   display: block;
   margin: auto;
}

.file-row {
   display: flex;
   align-items: center;
   gap: 8px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid var(--border);
   border-radius: 10px;
   padding: 0 6px 0 0;
   min-height: 40px;
}

.file-row:hover {
   background: rgba(255, 255, 255, 0.06);
}

.file-row.active {
   background: linear-gradient(180deg, rgba(122, 162, 255, 0.16), rgba(106, 240, 217, 0.10));
   box-shadow: 0 0 0 1px rgba(122, 162, 255, 0.35);
}

.file-label-btn {
   flex: 1;
   background: transparent;
   border: none;
   color: var(--text);
   text-align: left;
   padding: 10px 12px;
   font-weight: 600;
   cursor: pointer;
   border-radius: 10px;
}

.file-label-btn:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}

.nav .mini {
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.05);
   color: var(--muted);
   padding: 4px 6px;
   border-radius: 8px;
   font-size: 10px;
   line-height: 1;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}

.nav .mini:hover {
   background: rgba(255, 255, 255, 0.10);
   color: var(--text);
}

.file-actions {
   display: flex;
   align-items: center;
   gap: 4px;
}

.file-dirty-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ffa94d;
   box-shadow: 0 0 6px #ffa94dcc;
   display: none;
   opacity: 0;
   transform: scale(.6);
   transition: opacity .18s ease, transform .18s ease;
}

.file-dirty-dot[data-dirty="1"] {
   display: inline-block;
   opacity: 1;
   transform: scale(1);
}

.file-actions .mini svg {
   width: 16px;
   height: 16px;
}

.file-actions .mini {
   padding: 6px 6px;
   font-size: 11px;
}

.content {
   min-height: 70vh;
   padding: 26px;
   border-radius: var(--radius-xl);
   border: 1px solid var(--border);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
   box-shadow: var(--shadow);
   backdrop-filter: blur(12px);
}

#md {
   line-height: 1.65;
}

#md h1,
#md h2,
#md h3,
#md h4,
#md h5,
#md h6 {
   margin: 1.2em 0 .6em;
   font-weight: 800;
   line-height: 1.25;
}

#md h1 {
   font-size: 2rem;
}

#md h2 {
   font-size: 1.6rem;
}

#md h3 {
   font-size: 1.3rem;
}

#md p,
#md ul,
#md ol,
#md blockquote,
#md table {
   margin: .9em 0;
}

#md a {
   color: var(--accent);
   text-decoration: none;
   border-bottom: 1px dotted rgba(122, 162, 255, 0.35);
}

#md a:hover {
   border-bottom-style: solid;
}

#md blockquote {
   padding: 12px 16px;
   border-left: 3px solid var(--accent);
   background: rgba(122, 162, 255, 0.06);
   border-radius: 8px;
}

#md table {
   width: 100%;
   border-collapse: collapse;
   overflow: hidden;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.03);
}

#md th,
#md td {
   padding: 10px 12px;
   border-bottom: 1px solid var(--border);
}

#md tr:last-child td {
   border-bottom: none;
}

pre {
   position: relative;
   margin: 1.1em 0;
   padding-top: 56px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

pre code {
   display: block;
   padding: 12px 16px 16px;
}

pre::before {
   content: attr(data-lang);
   position: absolute;
   top: 8px;
   left: 12px;
   font-size: 12px;
   color: var(--muted);
   background: rgba(255, 255, 255, 0.06);
   padding: 4px 8px;
   border-radius: 8px;
   border: 1px solid var(--border);
}

.copy-btn {
   position: absolute;
   top: 8px;
   right: 8px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.04);
   color: var(--text);
   padding: 6px 8px;
   border-radius: 10px;
   cursor: pointer;
   backdrop-filter: blur(6px);
}

.copy-btn:hover {
   background: rgba(255, 255, 255, 0.08);
}

#md :not(pre)>code {
   position: relative;
   padding: 2px 6px;
   border-radius: 6px;
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.06);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
   font-size: .95em;
   cursor: pointer;
   transition: box-shadow .15s ease, border-color .15s ease;
}

#md :not(pre)>code:hover {
   border-color: rgba(122, 162, 255, 0.55);
   box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.15) inset;
}

.toast {
   position: fixed;
   top: 16px;
   right: 16px;
   z-index: 9999;
   border: 1px solid var(--border);
   background: rgba(30, 200, 160, 0.10);
   color: var(--text);
   padding: 10px 14px;
   border-radius: 12px;
   backdrop-filter: blur(8px);
   transform: translateY(-20px);
   opacity: 0;
   transition: all .2s ease;
}

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

.modal {
   position: fixed;
   inset: 0;
   display: none;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   background: rgba(0, 0, 0, 0.45);
}

.modal.open {
   display: flex;
}

.modal-card {
   width: auto;
   max-width: 420px;
   min-width: 300px;
   height: auto;
   max-height: 80vh;
   display: flex;
   flex-direction: column;
   gap: 10px;
   border: 1px solid var(--border);
   border-radius: var(--radius-xl);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
   padding: 18px 18px 16px;
   box-shadow: var(--shadow);
   backdrop-filter: blur(14px);
}

.modal-card h3 {
   margin: 4px 2px 4px;
}

.modal-card textarea {
   flex: 1;
   width: 100%;
   resize: none;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.35);
   color: var(--text);
   padding: 12px;
   font-family: ui-monospace, Menlo, Consolas, monospace;
}

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

.small {
   font-size: 12px;
   color: var(--muted);
}

.edit-bar {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0 16px 14px;
   padding: 10px 12px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   backdrop-filter: blur(10px);
}

.edit-bar.docked {
   position: fixed;
   top: 70px;
   left: 50%;
   transform: translateX(-50%);
   width: calc(100% - 260px);
   max-width: 1200px;
   z-index: 60;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
   margin: 0;
   border-radius: var(--radius-xl);
}

@media (max-width:960px) {
   .edit-bar.docked {
      width: calc(100% - 40px);
      left: 50%;
   }
}

.header+.app .content {
   position: relative;
}

.edit-bar-spacer {
   height: 0;
   transition: height .2s ease;
}

.edit-bar .group {
   display: flex;
   gap: 6px;
}

#editorArea {
   width: 100%;
   min-height: 50vh;
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.35);
   color: var(--text);
   padding: 14px 16px;
   font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   border-radius: var(--radius-lg);
   box-sizing: border-box;
}

.split-wrap.source-mode {
   display: block !important;
}
.split-wrap.source-mode .pane-src {
   display: block !important;
   width: 100%;
}
.split-wrap.source-mode .pane-preview,
.split-wrap.source-mode .resizer {
   display: none !important;
}
.split-wrap.source-mode #editorArea {
   width: 100%;
   min-height: 60vh;
   height: calc(100vh - 220px);
   resize: none;
}
}

.split-wrap {
   position: relative;
   display: flex;
   width: 100%;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
}

.split-wrap .pane {
   flex: 1 1 50%;
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.split-wrap .pane-src textarea {
   flex: 1;
   width: 100%;
   border: none;
   outline: none;
   background: transparent;
}

.split-wrap .resizer {
   width: 6px;
   cursor: col-resize;
   background: rgba(255, 255, 255, 0.05);
   border-left: 1px solid var(--border);
   border-right: 1px solid var(--border);
   transition: background .2s ease;
}

.split-wrap .resizer:hover {
   background: rgba(122, 162, 255, 0.25);
}

@media (max-width:1100px) {
   .split-wrap {
      flex-direction: column;
   }

   .split-wrap .resizer {
      height: 6px;
      width: 100%;
      cursor: row-resize;
      border-left: none;
      border-right: none;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
   }
}

#editorPreview {
   flex: 1;
   border-left: 1px solid var(--border);
   padding: 20px;
   overflow: auto;
}

.badge-disabled {
   opacity: .5;
   cursor: not-allowed;
}

#authModal .modal-card input,
#profileModal .modal-card input {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.35);
   color: var(--text);
}

#profileModal .info-grid {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 6px 14px;
   font-size: 13px;
}

#profileModal .info-grid div:nth-child(odd) {
   color: var(--muted);
}

#profileModal .danger {
   color: #ff8686;
}

/* new file modal adjustments */
#newFileModal input {
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.35);
   color: var(--text);
}

/* Generic dialog modal */
.dialog-card {
   max-width: 420px;
}

.dialog-message {
   margin: 6px 2px 14px;
   line-height: 1.4;
   font-size: 14px;
}

.dialog-input-wrap input {
   width: 100%;
   padding: 10px 12px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.35);
   color: var(--text);
}

/* Tooltip system */
.mdv-tooltip {
   position: fixed;
   z-index: 99999;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
   border: 1px solid var(--border);
   backdrop-filter: blur(10px);
   color: var(--text);
   padding: 6px 9px 7px;
   font-size: 12px;
   line-height: 1.2;
   border-radius: 8px;
   max-width: 260px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
   opacity: 0;
   transform: translateY(4px) scale(.96);
   transition: opacity .16s ease, transform .16s ease;
}

.mdv-tooltip[data-show="1"] {
   opacity: 1;
   transform: translateY(0) scale(1);
}

.mdv-tooltip[data-pos="top"]::after,
.mdv-tooltip[data-pos="bottom"]::after,
.mdv-tooltip[data-pos="left"]::after,
.mdv-tooltip[data-pos="right"]::after {
   content: "";
   position: absolute;
   width: 8px;
   height: 8px;
   background: inherit;
   transform: rotate(45deg);
}

.mdv-tooltip[data-pos="top"]::after {
   bottom: -4px;
   left: calc(50% - 4px);
   border-bottom: 1px solid var(--border);
   border-right: 1px solid var(--border);
}

.mdv-tooltip[data-pos="bottom"]::after {
   top: -4px;
   left: calc(50% - 4px);
   border-top: 1px solid var(--border);
   border-left: 1px solid var(--border);
}

.mdv-tooltip[data-pos="left"]::after {
   right: -4px;
   top: calc(50% - 4px);
   border-top: 1px solid var(--border);
   border-right: 1px solid var(--border);
}

.mdv-tooltip[data-pos="right"]::after {
   left: -4px;
   top: calc(50% - 4px);
   border-bottom: 1px solid var(--border);
   border-left: 1px solid var(--border);
}

/* File row hover refine (actions) */
.file-row .file-actions .mini {
   position: relative;
}