:root {
    --editor-font-size: 14px;
    --editor-line-height: 21px;
    --editor-font-family: 'Ubuntu Mono', Monospace;
    --editor-tab-size: 4;
    
    /* Adwaita Light Colors */
    --bg-window: #f6f5f4;
    --bg-header: #ebebeb;
    --border-color: #cdc7c2;
    --btn-bg: #f4f4f4;
    --btn-border: #dcdcdc;
    --btn-hover: #eeeeee;
    --btn-active: #d4d4d4;
    --primary: #3584e4;
    --text-main: #333333;
    --bg-editor: #ffffff;
    --bg-gutter: #fafafa;
    --gutter-text: #b0b0b0;
    --tab-bg: #dcdad8;
    --tab-active-bg: #ffffff;
    --menu-bg: #ffffff;
    --menu-hover: #f0f0f0;
    --modal-bg: #ffffff;
    --input-bg: #ffffff;
    --line-highlight: rgba(0, 0, 0, 0.05);
}

body.dark-mode {
    /* Adwaita Dark Colors */
    --bg-window: #242424;
    --bg-header: #303030;
    --border-color: #1e1e1e;
    --btn-bg: #3a3a3a;
    --btn-border: #2a2a2a;
    --btn-hover: #4a4a4a;
    --btn-active: #2f2f2f;
    --primary: #3584e4; 
    --text-main: #eeeeee;
    --bg-editor: #1e1e1e;
    --bg-gutter: #2a2a2a;
    --gutter-text: #777777;
    --tab-bg: #2a2a2a;
    --tab-active-bg: #1e1e1e;
    --menu-bg: #2d2d2d;
    --menu-hover: #3a3a3a;
    --modal-bg: #2d2d2d;
    --input-bg: #1e1e1e;
    --line-highlight: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Ubuntu', 'Cantarell', 'Segoe UI', sans-serif; }
body, html { height: 100%; display: flex; flex-direction: column; background-color: var(--bg-window); overflow: hidden; color: var(--text-main); transition: background-color 0.2s, color 0.2s; }

/* GNOME HeaderBar */
#headerbar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-header); border-bottom: 1px solid var(--border-color);
    padding: 6px 8px; height: 52px; flex-shrink: 0; z-index: 2000;
}
.header-left, .header-right { display: flex; align-items: center; gap: 4px; }
.header-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; pointer-events: none; }
#header-title { font-weight: bold; font-size: 14px; color: var(--text-main); line-height: 1.2; }
#header-subtitle { font-size: 11px; color: var(--gutter-text); line-height: 1.1; opacity: 0.9; }

/* Buttons */
.btn {
    background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: 6px;
    padding: 5px 12px; font-size: 13px; color: var(--text-main); cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: all 0.1s; display: flex; align-items: center; justify-content: center;
}
.btn:hover { background: var(--btn-hover); border-color: var(--border-color); }
.btn:active { background: var(--btn-active); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
.btn.icon-btn { padding: 5px 8px; font-weight: bold; font-size: 16px; }
.btn-primary { background: var(--primary); color: white; border-color: #1b6acb; }
.btn-primary:hover { background: #4a90e2; }

/* Hamburger Menu */
.hamburger-container { position: relative; }
.hamburger-menu {
    display: none; position: absolute; top: 110%; right: 0;
    background: var(--menu-bg); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 220px; padding: 6px 0; z-index: 3000;
}
.hamburger-menu.open { display: block; }
.menu-item { padding: 8px 16px; font-size: 13px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; position: relative;}
.menu-item:hover { background: var(--menu-hover); }
.hotkey { color: var(--gutter-text); font-size: 11px; margin-left: 20px; }
.divider { height: 1px; background: var(--border-color); margin: 4px 0; }
.has-submenu::after { content: "▶"; font-size: 9px; color: var(--gutter-text); }
.submenu {
    display: none; position: absolute; top: 0; right: 100%;
    background: var(--menu-bg); border: 1px solid var(--border-color); border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 150px; padding: 6px 0;
}
.has-submenu:hover .submenu { display: block; }
.check-icon { display: inline-block; width: 16px; font-weight: bold; color: var(--primary); }

/* Tab Bar */
#tabbar {
    background: var(--bg-window); border-bottom: 1px solid var(--border-color);
    display: flex; overflow-x: auto; flex-shrink: 0; padding-top: 6px; padding-left: 6px;
}
.tab {
    background: var(--tab-bg); border: 1px solid var(--border-color); border-bottom: none;
    border-radius: 6px 6px 0 0; padding: 6px 14px; margin-right: 2px;
    font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: default; color: var(--gutter-text);
}
.tab.active { background: var(--tab-active-bg); color: var(--text-main); margin-bottom: -1px; padding-bottom: 7px; border-bottom: 1px solid var(--tab-active-bg);}
.tab-close { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; transition: 0.2s;}
.tab-close:hover { background: var(--btn-hover); color: var(--text-main); }
.unsaved-dot { color: var(--primary); font-size: 18px; line-height: 0; margin-right: -4px;}
.tab.dragging { opacity: 0.4; }
.tab.drag-over { box-shadow: inset 0 0 0 2px var(--primary); }

/* Main Workspace & Side Panel */
#main-workspace { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
#side-panel { width: 220px; background: var(--bg-window); border-right: 1px solid var(--border-color); display: none; flex-direction: column; flex-shrink: 0; }
.side-panel-header { padding: 10px 12px; font-weight: bold; font-size: 11px; color: var(--gutter-text); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); }
#document-list { flex-grow: 1; overflow-y: auto; padding: 6px 0; }
.doc-list-item { padding: 6px 16px; font-size: 13px; cursor: pointer; color: var(--text-main); display: flex; align-items: center; }
.doc-list-item:hover { background: var(--menu-hover); }
.doc-list-item.active { background: rgba(53, 132, 228, 0.15); font-weight: bold; border-left: 3px solid var(--primary); padding-left: 13px;}

/* Editor */
#editor-container { display: flex; flex-grow: 1; background: var(--bg-editor); position: relative; overflow: hidden; }
#line-numbers {
    background: var(--bg-gutter); color: var(--gutter-text); padding: 5px 8px 400px 5px; text-align: right;
    border-right: 1px solid var(--border-color); font-family: var(--editor-font-family) !important;
    font-size: var(--editor-font-size); line-height: var(--editor-line-height);
    min-width: 45px; user-select: none; z-index: 5; height: 100%; overflow: hidden; 
}
#code-wrapper { position: relative; flex-grow: 1; overflow: hidden; background: var(--bg-editor); }

/* Active Line Highlight */
#active-line-highlight {
    position: absolute; left: 0; right: 0;
    height: var(--editor-line-height);
    background: var(--line-highlight);
    z-index: 0; pointer-events: none; display: none;
}

/* THE FORTRESS OF SYNC */
#editor, #highlighting, #highlighting-content, #highlighting-content *, #wrap-measurer, #wrap-measurer * { 
    font-family: var(--editor-font-family) !important; font-size: var(--editor-font-size) !important; 
    line-height: var(--editor-line-height) !important; tab-size: var(--editor-tab-size) !important; 
    -moz-tab-size: var(--editor-tab-size) !important; -o-tab-size: var(--editor-tab-size) !important; 
    letter-spacing: 0px !important; word-spacing: 0px !important; font-weight: 400 !important; 
    font-style: normal !important; box-sizing: border-box !important; text-decoration: none !important;
    text-transform: none !important; direction: ltr !important; text-align: left !important;
    vertical-align: top !important; font-kerning: none !important; font-variant-ligatures: none !important;
}

#editor, #highlighting { 
    position: absolute !important; top: 0 !important; left: 0 !important; 
    width: 100% !important; height: 100% !important; margin: 0 !important; 
    padding: 5px 5px 400px 5px !important; white-space: pre !important; 
    word-wrap: normal !important; overflow-wrap: normal !important; 
    border: none !important; outline: none !important; background: transparent !important;
    overflow-anchor: none !important; 
}

#wrap-measurer { position: absolute !important; visibility: hidden !important; z-index: -100 !important; top: 0 !important; left: 0 !important; padding: 5px !important; margin: 0 !important; border: none !important; }

#editor { overflow-y: scroll !important; overflow-x: auto !important; color: transparent !important; caret-color: var(--text-main) !important; z-index: 1 !important; resize: none !important; }

#highlighting { overflow: hidden !important; z-index: 2 !important; color: var(--text-main) !important; pointer-events: none !important; width: calc(100% - 10px) !important; height: calc(100% - 10px) !important; }

#highlighting-content { display: block !important; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important; white-space: inherit !important; }

.word-wrap #editor, .word-wrap #highlighting, .word-wrap #highlighting-content, .word-wrap #highlighting-content *, .word-wrap #wrap-measurer, .word-wrap #wrap-measurer div {
    white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: anywhere !important; word-break: break-all !important; 
}

#editor::-webkit-scrollbar { width: 10px; height: 10px; }
#editor::-webkit-scrollbar-thumb { background: var(--btn-active); border-radius: 5px; }
#editor::selection, #editor::-moz-selection { background-color: rgba(53, 132, 228, 0.3); color: transparent !important; }

/* Status Bar */
#statusbar { background: var(--bg-window); border-top: 1px solid var(--border-color); display: flex; padding: 4px 12px; font-size: 11px; color: var(--gutter-text); flex-shrink: 0; }
.sb-section { padding: 0 10px; border-right: 1px solid var(--border-color); }
.sb-right { border-right: none; margin-left: auto; }

/* Modals */
.modal {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--modal-bg); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 4000; min-width: 350px; max-width: 500px; overflow: hidden;
}
.modal-header { 
    background: var(--bg-window); padding: 12px 16px; font-weight: bold; font-size: 14px; 
    border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; 
    cursor: grab; user-select: none; 
}
.modal-header:active { cursor: grabbing; } 

.close-btn { background: none; border: none; font-size: 14px; cursor: pointer; color: var(--gutter-text); }
.close-btn:hover { color: var(--text-main); }
.modal-body { padding: 20px; }
.gnome-input { width: 100%; padding: 8px 10px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); border-radius: 6px; font-size: 13px; outline: none; transition: 0.2s;}
.gnome-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(53, 132, 228, 0.3); }
.input-row { margin-bottom: 15px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.check-label { display: block; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.pref-group { margin-bottom: 20px; }
.pref-group-title { display: block; font-weight: bold; margin-bottom: 10px; color: var(--text-main); border-bottom: 1px solid var(--border-color); padding-bottom: 4px; opacity: 0.8;}
.shortcut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shortcut-table td { padding: 6px 0; border-bottom: 1px solid var(--border-color); }
.shortcut-table tr:last-child td { border-bottom: none; }
.shortcut-table td:nth-child(2) { text-align: right; color: var(--gutter-text); }

.about-features {
    max-height: 250px; overflow-y: auto; text-align: left; padding: 12px;
    background: var(--bg-gutter); border: 1px solid var(--border-color);
    border-radius: 6px; font-size: 12.5px; color: var(--text-main); line-height: 1.5;
}
.about-features strong { display: block; margin-top: 10px; color: var(--primary); }
.about-features strong:first-child { margin-top: 0; }
.about-features p { margin-top: 2px; opacity: 0.85; }

/* CRITICAL PRISM FIXES */
code[class*="language-"], pre[class*="language-"] {
    color: var(--text-main) !important; font-weight: normal !important; font-style: normal !important;
    font-variant-ligatures: none !important; text-shadow: none !important; background: transparent !important;
    padding: 0 !important; margin: 0 !important; border: none !important;
}

.token {
    font-weight: normal !important; font-style: normal !important; font-variant-ligatures: none !important;
    text-shadow: none !important; background: transparent !important;
}

/* Prism Light Colors */
.token.comment, .token.prolog { color: #8f5902 !important; }
.token.keyword, .token.operator { color: #204a87 !important; }
.token.string { color: #4e9a06 !important; }
.token.function, .token.class-name { color: #000000 !important; }
.token.number { color: #0000cf !important; }
.token.tag { color: #204a87 !important; }
.token.punctuation { color: #555555 !important; }
.token.attr-name { color: #c4a000 !important; }

/* Prism Dark Colors - Comprehensive Overrides */
body.dark-mode #highlighting, body.dark-mode .token { color: var(--text-main) !important; }
body.dark-mode .token.function, body.dark-mode .token.class-name { color: #d2a8ff !important; }
body.dark-mode .token.operator, body.dark-mode .token.punctuation { color: #c9d1d9 !important; }
body.dark-mode .token.keyword { color: #ff7b72 !important; }
body.dark-mode .token.string, body.dark-mode .token.attr-value { color: #a5d6ff !important; }
body.dark-mode .token.comment, body.dark-mode .token.prolog, body.dark-mode .token.doctype, body.dark-mode .token.cdata { color: #8b949e !important; }
body.dark-mode .token.number, body.dark-mode .token.boolean { color: #f2cc60 !important; }
body.dark-mode .token.tag { color: #7ee787 !important; }
body.dark-mode .token.attr-name, body.dark-mode .token.builtin, body.dark-mode .token.constant, body.dark-mode .token.property { color: #79c0ff !important; }