@charset "utf-8";
:root { color-scheme: dark; --accent: #88cfac; --line: #29372f; --muted: #8d9f94; }
body { margin: 0; padding: 0; color: #c8d3cd; background: #111615; font-size: 14px;}
* { box-sizing: border-box; font-family: "Cascadia Code", "Consolas", "Microsoft YaHei", "微软雅黑", monospace; }
*::selection { color: #fff; background-color: #35483d; }
*::-webkit-scrollbar { height: 7px; width: 7px; }
*::-webkit-scrollbar-track { background-color: transparent; }
*::-webkit-scrollbar-thumb { background-color: #5b656f; border-radius: 7px; }
*::-webkit-scrollbar-thumb:hover { background-color: #b4b7ba; cursor: default; }
*::placeholder { color: #74877b; font-weight: normal; }

.main { display: flex; height: 100vh; height: 100dvh; }
.content { flex: 1; min-width: 325px; }
.box { display: flex; flex-direction: column; position: relative; }
.box-title { flex: 0 0 auto; background: #171e1c; font-size: 14px; padding: 4px 10px; display: flex; align-items: center; min-height: 37px; gap: 8px; flex-wrap: wrap; }
.box-title>div { display: flex; align-items: center; }
.box-content { padding: 10px; position: relative; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
.drag { position: absolute; width: 7px; height: 100%; background: #4caf5000; top: 0; right: -4px; cursor: col-resize; z-index: 10; }
.menu>div { cursor: pointer; background: #111615; border-radius: 2px; padding: 0 8px; margin-left: 5px; display: none; align-items: center; height: 23px; }
.menu>div:hover { color: #88cfac; }

/* 文章内容 */
.article { display: flex; flex-direction: column; }
#content-title { margin-right: auto; }
#article-info { font-size: 13px; color: #82988a; text-align: center; }
#article-empty { display: none; text-align: center; color: #7e9586; letter-spacing: 2px; }
.article-empty-icon { margin-top: 40vh; font-size: 38px; font-weight: normal; }
.article-empty-title { display: inline-block; padding-top: 10px; }

/* 文本高亮 */
#article-editor { overflow-y: auto; position: relative; }
#article-highlight { z-index: 1; color: #c8d3cd; background: #111615; height: max-content; }
#article-highlight, #article-textarea { padding: 20px; box-sizing: border-box; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; border: none; margin: 0; height: 100%; overflow-y: hidden; }
#article-textarea { color: transparent; background: transparent; caret-color: #d4d4d4; resize: none; outline: none; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; }
.light-url { color: #6a9955; text-decoration: underline; pointer-events: auto; cursor: pointer; }
.light-bracket1 { color: #4ec9b0; }
.light-bracket2 { color: #9cdcfe; }
.light-bracket3 { color: #ce9178; }
.light-bracket4 { color: #7878ce; }
.light-line1 { color: #9d78ce; }
.light-line2 { color: #ce78ba; }

/* 文章列表 */
#list { order: -1; border-right: 1px solid #2c3932; min-width: 220px; width: 280px; flex-shrink: 0; }
.list-box { overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; }
.list-item { font-size: 14px; padding: 5px 10px; cursor: pointer; display: flex; align-items: center; margin-bottom: 1px; }
.list-item:hover { background: #171e1c; border-radius: 5px; }
.list-item.active { color: #88cfac; background: #171e1c; border-radius: 5px; }
.list-item span { margin-right: 8px; color: #88cfac; flex-shrink: 0; }
.list-item .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item[style*="display: none"] { display: none!important; }

/* 弹窗 */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 1000; justify-content: center; align-items: center; }
.modal-bg { background: #0c100e; }
.modal-content { background-color: #171e1c; border-radius: 5px; width: 350px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); overflow: hidden; }
.modal-title { font-size: 18px; color: #c8d3cd; text-align: center; padding: 20px 20px 0; letter-spacing: 2px; }
.modal-message { color: #c8d3cd; line-height: 1.5; padding: 30px; font-size: 15px; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 15px; padding: 8px 10px; background: #1e2823; }
.modal-button { padding: 4px 12px; background-color: #5b656f; border: none; border-radius: 3px; color: #c8d3cd; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }
.modal-button:hover { background-color: #6a7681; }
.modal-button.confirm { background-color: #70b992; color: #fff; }
.modal-button.confirm:hover { background-color: #8bceaa; }
.modal-button.danger { background-color: #d32f2f; }
.modal-button.danger:hover { background-color: #f44336; }
.modal-buttons.single { justify-content: center; }
.modal-input { width: calc(100% - 60px); padding: 7px 10px; margin: 30px; background: #111615; border: 1px solid #111615; border-radius: 3px; color: #c8d3cd; font-size: 14px; box-shadow: inset 0 0 15px rgb(0 0 0 / 30%); }
.modal-input:focus { outline: none; border-color: #88cfac; }

/* 单选按钮组样式 */
.radio-group { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.radio-label { display: flex; padding: 0 12px; cursor: pointer; transition: all 0.2s ease; align-items: center; }
.radio-label input[type="radio"] { margin-right: 10px; width: 16px; height: 16px; cursor: pointer; appearance: none; -webkit-appearance: none; border: 2px solid #ccc; border-radius: 50%; outline: none; transition: all 0.2s ease; position: relative; }
.radio-label input[type="radio"]:checked { border-color: #70b992; background: #70b992; }
.radio-label input[type="radio"]:checked::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: #fff; border-radius: 50%; }
.radio-label input[type="radio"]:focus { box-shadow: 0 0 0 2px rgba(177, 156, 217, 0.2); }
.radio-text { display: block; margin-right: 10px; font-size: 14px; }
.radio-desc { font-size: 12px; line-height: 1.4; display: block; color: #74877b; }

/* 设置表单样式 */
#setting-panel { display: none; }
.setting-form { padding: 20px; }
.form-group { margin-bottom: 20px; }
.form-group .radio-group { margin-top: 4px; }
.form-label { display: block; margin-bottom: 8px; color: #c8d3cd; font-size: 14px; }
.form-input { width: 100%; padding: 7px 10px; background: #111615; border: 1px solid #35483d; border-radius: 3px; color: #c8d3cd; font-size: 14px; }
.form-input:focus { outline: none; border-color: #88cfac; }
.form-hint { font-size: 12px; color: #74877b; margin-top: 5px; }
.setting-buttons { display: flex; gap: 10px; margin-top: 30px; }
.setting-button { padding: 8px 20px; background: #35483d; border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 14px; }
.setting-button:hover { background: #5b656f; }
.setting-button.primary { background: #70b992; color: #fff; }
.setting-button.primary:hover { background: #8bceaa; }

/* 搜索 */
.search-box { padding-bottom: 10px; flex: 0 0 auto; }
.search-input { width: 100%; padding: 5px 12px; background: #111615; border: 1px solid #35483d; color: #c8d3cd; border-radius: 3px; }
.search-input:focus { outline: none; border-color: #88cfac; box-shadow: 0 0 0 2px rgb(145 0 255 / 10%); }
.search-input::placeholder { color: #74877b; }

/* 移动端适配 */
@media (max-width: 768px) {
  .content { min-width: 0; width: 100%; }
  #list { display: none; position: fixed; inset: 0 auto 0 0; width: min(85vw, 340px)!important; min-width: 0; z-index: 100; background: #111615; box-shadow: 8px 0 24px #0006; }
  .main.directory-open #list { display: flex; }
  .main.directory-open #directory-backdrop { display: block; }
  .drag { display: none; }
  .box-title { font-size: 12px; padding: 6px; }
  .menu>div { font-size: 12px; padding: 4px 6px; min-height: 30px; }
  #article-highlight, #article-textarea { padding: 12px; }
}

.plain-button { color: #c8d3cd; background: #111615; border: 1px solid #35483d; border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.plain-button:hover { color: #88cfac; border-color: #88cfac; }
.plain-button:focus-visible { outline: 2px solid #88cfac; outline-offset: 2px; }
.directory-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 0; box-shadow: none; font: inherit; line-height: 1; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.directory-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#directory-toggle { gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 7px; color: #c8d3cd; background: #ffffff0d; }
#directory-toggle:hover, #directory-toggle:focus-visible { color: #c0ead2; background: #ffffff18; }
#directory-toggle:active { background: #ffffff22; }
.directory-close { margin-left: auto; width: 28px; height: 28px; padding: 0; color: #8d9f94; background: transparent; }
.directory-close:hover, .directory-close:focus-visible { color: #c0ead2; background: transparent; }
.directory-button:focus-visible { outline: none; }
#article-count { color: #8d9f94; font-size: 12px; }
#save-status { color: #91a99a; font-size: 12px; }
.menu { flex-wrap: wrap; gap: 3px; }
.menu.busy { pointer-events: none; opacity: .6; }
#draft-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; padding: 10px; border: 1px solid #4e765f; border-radius: 5px; background: #1e3026; }
#draft-banner[hidden] { display: none; }
#draft-select { flex: 1; min-width: 0; max-width: 100%; color: #c8d3cd; background: #111615; padding: 5px; }
.search-option { display: flex; align-items: center; gap: 4px; padding-top: 7px; color: #8d9f94; font-size: 12px; }
#search-status { font-size: 12px; color: #8d9f94; padding-top: 7px; line-height: 1.5; }
#search-status:empty { display: none; }
#directory-backdrop { display: none; position: fixed; inset: 0; z-index: 90; border: 0; background: #0008; }
.modal-content { max-width: calc(100vw - 24px); }
.drag { touch-action: none; }
@media (min-width: 769px) {
  .main.directory-collapsed #list { display: none; }
}

/* 备忘录保持双栏布局，统一使用低饱和终端配色。 */
[hidden] { display: none!important; }
button, input, textarea { font: inherit; }
button:disabled { opacity: .35; cursor: default; }
#memo-body { max-width: 1120px; padding: 22px 30px 70px; margin: 0 auto; }
#memo-title { width: 100%; border: 0; border-bottom: 1px solid #35483d; background: transparent; color: #e1ebe5; font-size: 25px; padding: 8px 0 15px; outline: none; }
#memo-title:focus { border-color: #88cfac; }
#memo-heading { font-size: 25px; font-weight: 500; color: #e1ebe5; margin: 8px 0 24px; overflow-wrap: anywhere; }
#article-info { text-align: left; padding: 10px 30px 0; max-width: 1120px; margin: auto; font-size: 12px; }
.memo-section { border-bottom: 1px solid #2c3932; padding: 22px 0 28px; }
.memo-section:first-child { padding-top: 6px; }
.section-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.section-bar h2 { font-size: 18px; color: #88cfac; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.section-title { flex: 1; width: 0; min-width: 0; background: transparent; color: #b7d6c5; border: 1px solid transparent; border-radius: 4px; font-size: 16px; padding: 7px; outline: none; }
.section-title:focus { border-color: #4e765f; }
.section-handle, .note-handle { border: 0; background: transparent; color: #82988a; cursor: grab; font-size: 20px; line-height: 1; padding: 4px; flex-shrink: 0; touch-action: none; }
.section-handle:hover, .note-handle:hover { color: #88cfac; }
.note-handle { font-size: 17px; margin-right: 6px; opacity: .4; }
.list-item:hover .note-handle, .note-handle:focus { opacity: 1; }
.section-text { width: 100%; min-height: 130px; resize: vertical; border: 1px solid #2d3b32; border-radius: 5px; background: #101612; color: #c8d3cd; outline: none; padding: 15px; line-height: 1.9; tab-size: 4; }
.section-text:focus { border-color: #8e72b7; }
.section-text::placeholder { color: #7e9586; font-size: 13px; }
.section-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.section-tools span { color: #82988a; font-size: 12px; }
.section-preview { white-space: pre-wrap; line-height: 1.95; overflow-wrap: anywhere; }
.section-preview a { color: #a9c391; }
.section-preview pre { margin: 15px 0; padding: 16px; background: #0d1310; border: 1px solid #2d3b32; border-radius: 5px; overflow-x: auto; white-space: pre; }
.section-preview code { font-family: Consolas, monospace; font-size: 13px; }
.section-preview.editing-preview { margin-top: 14px; padding: 14px; background: #2d323e; border: 1px dashed #35483d; border-radius: 5px; }
.empty-section { color: #8691a4; }
#add-section { margin-top: 22px; padding: 9px 16px; border-style: dashed; color: #88cfac; }
#upload-status { color: #94c7aa; font-size: 12px; margin-top: 12px; }
.sorting { opacity: .45; background: #463b59; outline: 1px dashed #88cfac; }
.file-card { position: relative; display: inline-flex; vertical-align: middle; flex-direction: column; gap: 4px; max-width: min(100%, 300px); min-width: 180px; padding: 12px 14px; margin: 8px 8px 8px 0; background: #323947; border: 1px solid #505a6c; border-radius: 6px; line-height: 1.5; white-space: normal; }
.file-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c8d3cd; max-width: 100%; }
.file-card small { color: #9da9bc; }
.file-card.image-card { padding: 8px; max-width: min(100%, 240px); }
.image-card img { width: 100%; height: 150px; object-fit: cover; border-radius: 3px; cursor: zoom-in; background: #0d1310; }
.file-actions { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0; transition: opacity .15s; }
.file-card:hover .file-actions, .file-card:focus-within .file-actions { opacity: 1; }
.file-actions .plain-button { font-size: 12px; padding: 3px 8px; color: #c8d3cd; text-decoration: none; }
.plain-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1.5; }
#file-viewer { width: min(1250px, 96vw); height: min(940px, 94dvh); padding: 0; color: #c8d3cd; background: #0d1310; border: 1px solid #35483d; border-radius: 8px; }
#file-viewer[open] { display: flex; flex-direction: column; }
#file-viewer::backdrop { background: #000c; }
.viewer-bar { display: flex; gap: 10px; align-items: center; padding: 12px 16px; background: #171e1c; }
#viewer-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewer-content { min-height: 0; flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 14px; }
#viewer-content>img { max-width: 100%; max-height: 100%; object-fit: contain; }
#viewer-content>iframe { width: 100%; height: 100%; border: 0; background: #fff; }
#viewer-content>pre, #viewer-content>p { margin: 0; padding: 16px; align-self: flex-start; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.9; }
.viewer-navigation { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px; }
.form-hint, .radio-desc { color: #8d9f94; }
@media (hover: none) { .file-actions { opacity: 1; } }
@media (max-width: 768px) {
  #memo-body { padding: 18px 4px 50px; }
  #memo-title, #memo-heading { font-size: 21px; }
  #article-info { padding: 8px 4px; }
  .section-bar { flex-wrap: wrap; gap: 4px; }
  .section-title { font-size: 15px; }
  .section-bar .plain-button { padding: 3px 6px; font-size: 12px; }
  .section-text { padding: 10px; }
  .file-actions { opacity: 1; }
  .file-card { min-width: 150px; max-width: 100%; }
  .file-card.image-card { width: min(210px, 100%); }
}

/* 分区和附件区仅以直角细边框区分，阅读和编辑共用同一套内容布局。 */
#memo-title, #memo-heading { font-size: 25px; font-weight: 500; color: #e1ebe5; margin: 8px 0 24px; padding: 0; line-height: 1.5; border: 0; border-radius: 0; }
.memo-section, .memo-section:first-child { border: 1px solid #2c3932; border-radius: 0; background: transparent; box-shadow: none; padding: 20px 24px; margin: 0 0 18px; }
.section-bar { position: relative; display: flex; align-items: start; min-height: 32px; margin-bottom: 12px; gap: 8px; }
.section-title, .section-bar h2 { display: block; flex: 1; min-width: 0; width: auto; margin: 0; padding: 2px 0; border: 0; outline: 0; font-size: 17px; line-height: 1.7; color: #88cfac; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.editing .section-title:empty::before { content: attr(data-placeholder); color: #7e9586; }
.section-title:focus { border: 0; }
.section-controls { display: flex; flex-shrink: 0; gap: 5px; align-items: center; }
.section-controls .plain-button { background: transparent; border: 0; padding: 3px 6px; font-size: 12px; }
.section-handle { font-size: 18px; }
.edit-control { visibility: hidden; }
.editing .edit-control { visibility: visible; }
.section-body { line-height: 1.95; }
.text-block { position: relative; min-height: 1.95em; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-block.empty-text { min-height: 1.95em; }
.text-highlight, .section-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: inherit; tab-size: 4; letter-spacing: normal; word-spacing: normal; }
.text-highlight { min-height: 1.95em; color: #c8d3cd; }
.text-highlight.ends-newline::after { content: '\200b'; }
.text-highlight a { color: #a9c391; }
.editing .text-highlight { pointer-events: none; }
.section-text { display: block; position: absolute; inset: 0; width: 100%; min-height: 100%; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; color: transparent; -webkit-text-fill-color: transparent; background: transparent; caret-color: #eee; outline: 0; resize: none; overflow: visible; }
.section-text:focus { border: 0; }
.section-text::selection, .section-text *::selection { color: #fff; -webkit-text-fill-color: #fff; background: #476e5499; }
.attachment-area { display: block; border: 1px solid #2c3932; border-radius: 0; padding: 0 12px; margin: 12px 0; background: transparent; }
.attachment-bar { display: flex; align-items: center; justify-content: space-between; min-height: 35px; gap: 8px; color: #82988a; font-size: 12px; border-bottom: 1px solid #2c3932; }
.attachment-bar .plain-button { border: 0; background: transparent; color: #94c7aa; font-size: 12px; padding: 2px 0 2px 8px; }
.file-row { display: flex; align-items: center; width: 100%; min-width: 0; gap: 10px; min-height: 42px; padding: 7px 0; border-bottom: 1px solid #2c393266; line-height: 1.6; }
.file-row:last-child { border-bottom: 0; }
.file-icon { color: #82988a; flex-shrink: 0; }
.file-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; padding: 0; color: #ccdcd2; text-align: left; cursor: pointer; }
.file-title:hover { color: #c0ead2; }
.file-size { color: #82988a; font-size: 12px; width: 68px; text-align: right; flex-shrink: 0; }
.file-row .file-actions { display: flex; flex-shrink: 0; gap: 3px; opacity: 0; }
.file-row:hover .file-actions, .file-row:focus-within .file-actions { opacity: 1; }
.file-row .file-actions .plain-button { border: 0; border-radius: 0; background: none; padding: 2px 5px; color: #94c7aa; font-size: 12px; }
.file-row .file-actions .plain-button:hover { color: #c0ead2; }
.drop-target { border-color: #88cfac; }
.missing-file { color: #b59a83; }
@media (hover: none) { .file-row .file-actions { opacity: 1; } }
@media (max-width: 768px) {
  #memo-title, #memo-heading { font-size: 21px; }
  .memo-section, .memo-section:first-child { padding: 12px; margin-bottom: 12px; }
  .section-bar { flex-wrap: wrap; }
  .section-title { flex-basis: 100%; font-size: 16px; }
  .section-controls { min-height: 29px; }
  .attachment-area { padding: 0 8px; }
  .file-row { gap: 6px; }
  .file-size { display: none; }
  .file-row .file-actions { opacity: 1; gap: 0; }
  .file-row .file-actions .plain-button { padding: 2px 4px; }
}

/* 终端风格工作区：克制的强调色、直角边框，以及清晰的阅读层级。 */
body { background: #101512; -webkit-font-smoothing: antialiased; }
*::selection { color: #eefbf3; background: #355b43; }
*::-webkit-scrollbar-thumb { background: #35483d; border-radius: 0; }
.box-title { min-height: 54px; padding: 10px 18px; background: #131a16; border-bottom: 1px solid var(--line); gap: 10px; }
.content > .box-title { padding-left: 22px; }
.content > .box-content { padding: 0 18px; background: #111713; }
#content-title { color: var(--muted); font-size: 12px; letter-spacing: .06em; }
#content-title::before { content: '/ '; color: #567260; }
#list { background: #0d1310; border-color: var(--line); }
#list > .box-title { background: #0d1310; }
#list > .box-content { padding: 20px 12px 12px; overflow: hidden; }
.terminal-symbol { font-family: Consolas, monospace; font-weight: 600; color: var(--accent); }
#article-count { padding: 2px 6px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); }
.directory-close { width: 26px; height: 26px; }
#directory-toggle { min-height: 28px; border-radius: 0; background: transparent; color: #a8bfb0; padding: 0; margin-right: 12px; }
#directory-toggle:hover, #directory-toggle:focus-visible { color: var(--accent); background: transparent; }
.directory-button:focus-visible, .note-handle:focus-visible, .section-handle:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.menu { gap: 6px; }
.menu > div { height: 29px; margin: 0; padding: 0 9px; background: transparent; border: 1px solid transparent; border-radius: 0; font-size: 12px; color: #9db1a4; }
.menu > div:hover { border-color: #354b3d; color: #c2ead2; background: #1b2a20; }
.menu #menu-save, .menu #menu-create { border-color: #395a46; background: #20392a; color: #a7dfbe; }
.menu #menu-delete:hover { color: #e5a6a0; border-color: #68423d; background: #32221f; }
#save-status { color: #829b8b; font-size: 11px; }
.search-box { padding: 0 0 18px; }
.search-field { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border: 1px solid #34473a; background: #121c15; transition: border-color .15s; }
.search-field:focus-within { border-color: #81ba96; }
.search-field > svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: #8da995; stroke-width: 1.5; }
.search-input { flex: 1; min-width: 0; width: 0; padding: 9px 0; border: 0; background: transparent; border-radius: 0; font-size: 12px; color: #d5e5db; }
.search-input:focus { border: 0; box-shadow: none; outline: none; }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
#search-shortcut { white-space: nowrap; font-size: 10px; color: #8a9d90; border: 1px solid #34473a; padding: 1px 4px; }
#search-clear { flex-shrink: 0; width: 24px; height: 26px; padding: 0; border: 0; background: transparent; color: #a0b8a9; cursor: pointer; font-size: 20px; }
#search-clear:hover { color: #e1f5e9; }
#search-clear:focus-visible { outline: 1px solid var(--accent); }
.search-options { display: flex; align-items: center; gap: 2px; padding-top: 9px; min-height: 35px; }
.search-scope { position: relative; cursor: pointer; }
.search-scope input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.search-scope span { display: block; font-size: 11px; color: #8fa496; border: 1px solid transparent; padding: 3px 10px; line-height: 1.5; }
.search-scope:hover span { color: #d3e6da; }
.search-scope input:checked + span { color: #a7dfbe; background: #203326; border-color: #38553f; }
.search-scope input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }
.search-scope-hint { min-width: 0; margin-left: auto; padding-left: 6px; color: #849b8b; font-size: 10px; line-height: 1.5; }
#search-status { color: #96b4a0; padding: 12px 2px 0; font-size: 11px; line-height: 1.8; }
.list-box { min-height: 0; scrollbar-gutter: stable; }
#article-list[aria-busy="true"] { opacity: .5; }
.list-item { position: relative; min-height: 40px; padding: 8px 9px; margin: 2px 0; border: 1px solid transparent; border-left: 2px solid transparent; font-size: 13px; color: #adbbb2; line-height: 1.6; gap: 2px; }
.list-item:hover { background: #17231b; color: #d5e6db; border-radius: 0; }
.list-item.active { color: #b5e1c5; border-color: #2a4031; border-left-color: #88cfac; background: #1b2d21; border-radius: 0; }
.note-handle { font-size: 16px; padding: 2px; margin-right: 6px; color: #9db6a6; opacity: .35; }
.list-item mark { padding: 0; background: #3b5937; color: #e2f3b9; }
.search-hit { padding: 0; color: #f0f8c9; background: #496438; font: inherit; line-height: inherit; }
.directory-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid #233027; font-size: 10px; color: #809587; }
.directory-footer .terminal-symbol { color: #5b8068; }
.drag:hover { background: #88cfac55; }
#memo-body { max-width: 1080px; padding: 28px 28px 80px; }
#memo-heading, #memo-title { margin: 0 0 27px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: #dcebe1; }
#memo-title:focus { outline: none; }
#article-info { max-width: 1080px; padding: 26px 28px 0; color: #819989; font-size: 11px; }
.memo-section, .memo-section:first-child { border-color: #304336; padding: 22px 24px; margin-bottom: 18px; }
.section-title, .section-bar h2 { color: #a2d1b4; font-size: 15px; font-weight: 500; }
.section-bar { margin-bottom: 16px; }
.section-body { font-size: 13px; line-height: 2; }
.text-highlight { color: #becfc3; }
.text-highlight a, .light-url { color: #8cc5a1; text-decoration-color: #486c51; text-underline-offset: 3px; }
.attachment-area { border-color: #304336; }
.attachment-bar { border-color: #293c30; color: #90ac9b; }
.file-row { border-bottom-color: #293c3080; }
.plain-button, .setting-button, .form-input, .modal-input, .modal-button, .section-title, #draft-banner, #file-viewer { border-radius: 0; box-shadow: none; }
.plain-button { background: transparent; border-color: #39513f; font-size: 12px; color: #acc9b6; }
.section-controls .plain-button { color: #8baa98; }
.section-controls .plain-button:hover, .attachment-bar .plain-button:hover { color: #c2ead2; background: #1c2d22; }
#add-section { padding: 8px 12px; margin-top: 4px; }
#article-empty { padding: 0 18px; }
.article-empty-icon { margin-top: 30vh; font-size: 42px; color: #5c8f6c; font-family: Consolas, monospace; }
.article-empty-title { padding-top: 18px; color: #aecbb7; font-size: 16px; letter-spacing: 1px; }
.article-empty-hint { margin-top: 12px; font-size: 12px; color: #8aa292; letter-spacing: 0; line-height: 1.8; }
.modal-content { border: 1px solid #354b3d; border-radius: 0; box-shadow: 0 16px 60px #0005; }
.modal-bg { background: #0c120e; }
.modal-title { padding-top: 28px; font-size: 17px; }
.modal-input { background: #0f1712; border-color: #38523f; padding: 11px 12px; }
.modal-buttons { padding: 12px 18px; gap: 10px; border-top: 1px solid #2f4235; background: #121d16; }
.modal-button { padding: 6px 16px; background: #293b2f; }
.modal-button.confirm, .setting-button.primary { background: #88cfac; color: #102419; }
.modal-button.confirm:hover, .setting-button.primary:hover { background: #a2dfbf; }
.setting-form { max-width: 720px; margin: 12px auto; padding: 28px; }
.form-input { background: #101a13; border-color: #354e3d; padding: 10px; }
.viewer-bar { background: #17231b; border-bottom: 1px solid #304336; }
.sorting { background: #203b29; outline-color: var(--accent); }
@media (max-width: 768px) {
  .box-title, .content > .box-title { padding: 10px 12px; min-height: 52px; gap: 8px; }
  .content > .box-content { padding: 0 12px; }
  #list { background: #0d1310; }
  #list > .box-content { padding-top: 16px; }
  #directory-toggle { margin-right: 4px; }
  .menu { gap: 2px; }
  .menu > div { padding: 0 6px; min-height: 30px; }
  #memo-body { padding: 22px 0 50px; }
  #article-info { padding: 20px 0 0; line-height: 1.8; }
  #memo-heading, #memo-title { font-size: 22px; margin-bottom: 20px; }
  .memo-section, .memo-section:first-child { padding: 14px; }
  .section-bar { margin-bottom: 12px; }
  .setting-form { padding: 20px 4px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }