.locale-picker { position: relative; min-width: 8rem; }
.locale-picker-toggle { width: 100%; min-height: 2.5rem; padding: 0 .65rem; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--border-color); border-radius: 6px; outline: 0; background: var(--bg-input); color: var(--text-primary); font: inherit; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.locale-picker-toggle:hover, .locale-picker.is-open .locale-picker-toggle { border-color: var(--primary); background: var(--bg-panel-hover); }
.locale-picker-toggle:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.locale-picker-toggle svg { flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--text-secondary); }
.locale-picker-toggle > svg:last-child { width: .8rem; height: .8rem; margin-left: auto; transition: transform .18s; }
.locale-picker.is-open .locale-picker-toggle > svg:last-child { transform: rotate(180deg); }
.locale-picker-current { min-width: 0; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.locale-picker-menu { position: absolute; top: calc(100% + .45rem); right: 0; width: max-content; min-width: 12rem; padding: .35rem; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--bg-panel); box-shadow: var(--shadow); z-index: 100; }
.locale-picker-menu[hidden] { display: none; }
.locale-picker-option { width: 100%; min-height: 2.65rem; padding: .35rem .5rem; display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: .6rem; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font: inherit; text-align: left; cursor: pointer; }
.locale-picker-option:hover, .locale-picker-option:focus-visible { outline: 0; background: var(--bg-panel-hover); color: var(--text-primary); }
.locale-picker-option.is-selected { color: var(--text-primary); }
.locale-picker-code { width: 2rem; height: 1.8rem; display: grid; place-items: center; border-radius: 4px; background: var(--bg-subtle); color: var(--text-secondary); font-size: .62rem; font-weight: 700; }
.locale-picker-option.is-selected .locale-picker-code { background: var(--primary); color: var(--white); }
.locale-picker-option span:nth-child(2) { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.locale-picker-option svg { width: .9rem; height: .9rem; color: var(--primary-hover); opacity: 0; }
.locale-picker-option.is-selected svg { opacity: 1; }
.locale-picker--topbar .locale-picker-toggle { min-height: 2.35rem; background: var(--bg-panel); }
.locale-picker--inline { min-width: 7.5rem; margin-left: auto; }
.locale-picker--inline .locale-picker-toggle { min-height: 2rem; padding: 0 .25rem; border-color: transparent; background: transparent; color: var(--text-secondary); }
.locale-picker--inline .locale-picker-menu { top: calc(100% + .25rem); }

select option { background: var(--bg-panel); color: var(--text-primary); }

.icon-choice-picker { min-width: 0; }
.category-choice.icon-choice-picker { display: block; }
.icon-choice-search { min-height: 2.2rem; margin: .25rem 0 .6rem; padding: 0 .65rem; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); color: var(--text-muted); }
.icon-choice-search:focus-within { border-color: var(--primary); }
.icon-choice-search svg { width: .9rem; height: .9rem; flex: 0 0 auto; }
.icon-choice-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .68rem; }
.icon-choice-grid { max-height: 15rem; padding: .55rem; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(2.7rem, 1fr)); gap: .45rem; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); }
.icon-choice-grid button { width: 100%; height: 2.7rem; margin: 0; padding: 0; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-panel); color: var(--text-secondary); cursor: pointer; }
.icon-choice-grid button:hover, .icon-choice-grid button.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); box-shadow: 0 0 0 2px var(--primary-soft); }
.icon-choice-grid button[hidden] { display: none; }
.icon-choice-grid svg { width: 1.15rem; height: 1.15rem; }
.note-category-icon-grid.icon-choice-picker { display: block; }

.devspace-code-editor { min-height: 17rem; position: relative; overflow: hidden; border: 1px solid var(--border-color); border-top: 0; border-radius: 0 0 6px 6px; background: var(--bg-input); }
.devspace-code-editor:focus-within { border-color: var(--primary); }
.devspace-code-highlight { position: absolute; inset: 0; z-index: 0; margin: 0; padding: .8rem; overflow: hidden; pointer-events: none; color: var(--text-primary); font: .72rem/1.7 Consolas, Monaco, monospace; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.devspace-code-input { position: relative; z-index: 1; display: block; box-sizing: border-box; min-height: 17rem; margin: 0; padding: .8rem; resize: vertical; border: 0; border-radius: 0; outline: 0; background: transparent; color: transparent; caret-color: var(--text-primary); font: .72rem/1.7 Consolas, Monaco, monospace; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-text-fill-color: transparent; }
#noteContent.devspace-code-input, #documentContent.devspace-code-input, #snippetCode.devspace-code-input { padding: .8rem; border: 0; border-radius: 0; background: transparent; color: transparent; font: .72rem/1.7 Consolas, Monaco, monospace; -webkit-text-fill-color: transparent; }
.devspace-code-input::placeholder { color: var(--text-muted); opacity: 1; -webkit-text-fill-color: var(--text-muted); }
.devspace-code-input::selection { background: var(--primary-soft); color: transparent; }
.devspace-code-editor.is-fullscreen { position: fixed; inset: 1rem; z-index: 100; min-height: 0; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: var(--shadow); }
.devspace-code-editor.is-fullscreen .devspace-code-input { height: 100%; min-height: calc(100vh - 2rem); resize: none; }
.snippet-editor { position: relative; }
.snippet-editor .devspace-code-highlight { top: 0; right: 0; bottom: 0; left: 2.5rem; padding: .9rem .75rem; overflow: hidden; border-right: 0; color: var(--text-primary); font: .72rem/1.65 Consolas, Monaco, monospace; text-align: left; white-space: pre; }
.snippet-editor .devspace-code-input { grid-column: 2; min-height: 17rem; padding: .9rem .75rem; overflow: auto; white-space: pre; overflow-wrap: normal; }
#snippetCode.devspace-code-input { padding: .9rem .75rem; font: .72rem/1.65 Consolas, Monaco, monospace; }
.snippet-editor.wrap .devspace-code-highlight { white-space: pre-wrap; overflow-wrap: anywhere; }
.snippet-editor.is-fullscreen { position: fixed; inset: 1rem; z-index: 100; min-height: 0; border-color: var(--border-strong); box-shadow: var(--shadow); }
.snippet-editor.is-fullscreen .devspace-code-input { height: calc(100vh - 2rem); min-height: 0; resize: none; }
.snippet-editor.is-fullscreen .devspace-code-highlight { bottom: 0; }
.code-token-comment, .code-token-fence { color: var(--code-comment); font-style: italic; }
.code-token-keyword { color: var(--code-keyword); }
.code-token-string { color: var(--code-string); }
.code-token-number, .code-token-boolean { color: var(--code-number); }
.code-token-function, .code-token-tag { color: var(--code-function); }
.code-token-property, .code-token-attr { color: var(--code-property); }
.code-token-selector { color: var(--code-selector); }
.code-token-variable { color: var(--code-variable); }
.code-token-value { color: var(--text-primary); }
.code-token-operator { color: var(--text-secondary); }

/* Keep modal surfaces compact without changing their content flow. */
dialog.settings-dialog { width: min(28rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.settings-dialog.site-settings-dialog { width: min(66rem, calc(100vw - 2rem));  }
dialog.project-detail-dialog { width: min(38rem, calc(100vw - 2rem)); }
dialog.trash-settings-dialog { width: min(24rem, calc(100vw - 2rem)); }
dialog.task-detail-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.snippet-preview-dialog { width: min(42rem, calc(100vw - 2rem)); }
dialog.document-preview-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.note-category-dialog { width: min(24rem, calc(100vw - 2rem)); }
dialog.note-preview-dialog { width: min(38rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.file-dialog { width: min(24rem, calc(100vw - 2rem)); }
dialog.file-preview-dialog { width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.bookmark-folder-dialog { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
dialog.bookmark-icon-dialog { width: min(60rem, calc(100vw - 2rem)); height: min(42rem, calc(100vh - 3rem)); }
dialog.bookmark-move-dialog { width: min(24rem, calc(100vw - 2rem)); }

@media (max-width: 760px) {
    .locale-picker--topbar { min-width: 6.25rem; }
    .locale-picker--topbar .locale-picker-toggle { padding: 0 .45rem; }
    .locale-picker--topbar .locale-picker-toggle > svg:first-child { display: none; }
}