:root {
  --brain-bg: #0d0e15;
  --brain-panel: #11121a;
  --brain-panel-soft: #151622;
  --brain-line: #252637;
  --brain-text: #f4f2f8;
  --brain-muted: #8e8d9f;
  --brain-purple: #7667ff;
  --brain-purple-soft: #292548;
  --brain-pink: #ef87b8;
  --brain-green: #56d58d;
}

.brain-view[hidden], .dashboard-view[hidden] { display: none !important; }

.workspace.brain-mode { padding: 0; background: var(--brain-bg); color: var(--brain-text); }
.brain-view { min-height: 100vh; background: var(--brain-bg); }
.brain-header { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--brain-line); }
.brain-heading { display: flex; align-items: center; gap: 12px; }
.brain-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2e3 0 18%, #ed8cb8 32%, #9a4d89 70%, #532b63 100%); box-shadow: inset -4px -5px 9px rgba(20, 4, 30, .4); }
.brain-heading h1 { font-size: 18px; letter-spacing: -.01em; }
.brain-heading p { margin: 2px 0 0; color: var(--brain-muted); font-size: 12px; }
.brain-add { border-color: transparent; color: white; background: linear-gradient(135deg, #705eff, #5c4df1); box-shadow: 0 10px 24px rgba(103, 86, 255, .26); }
.brain-shell { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 190px minmax(260px, 330px) minmax(0, 1fr); }
.brain-rail, .brain-list { border-right: 1px solid var(--brain-line); background: #0f1017; }
.brain-rail { padding: 14px 12px; }
.brain-rail .brain-add { width: 100%; margin-bottom: 14px; }
.brain-filter { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; min-height: 39px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; color: var(--brain-muted); background: transparent; text-align: left; font-size: 13px; }
.brain-filter:hover, .brain-filter:focus-visible { color: var(--brain-text); outline: none; background: #181925; }
.brain-filter.active { color: #d9d4ff; border-color: #423b77; background: var(--brain-purple-soft); }
.brain-filter-count { color: #69687a; font-size: 11px; }
.brain-tools { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--brain-line); }
.brain-label { margin: 0 8px 8px; color: #6f6e7d; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.brain-search { width: 100%; border-color: var(--brain-line); color: var(--brain-text); background: #151620; }
.brain-search::placeholder { color: #696879; }
.brain-list { min-width: 0; overflow-y: auto; max-height: calc(100vh - 64px); }
.brain-list-head { position: sticky; top: 0; z-index: 2; padding: 14px 14px 10px; border-bottom: 1px solid var(--brain-line); background: rgba(15,16,23,.94); backdrop-filter: blur(12px); }
.brain-list-head strong { font-size: 13px; }
.brain-list-head span { display: block; margin-top: 3px; color: var(--brain-muted); font-size: 11px; }
.brain-date { padding: 12px 14px 6px; color: #686777; font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.brain-note-row { width: 100%; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; padding: 12px 14px; border: 0; border-left: 2px solid transparent; border-bottom: 1px solid #1b1c27; color: var(--brain-text); background: transparent; text-align: left; }
.brain-note-row:hover, .brain-note-row:focus-visible { background: #151620; outline: none; }
.brain-note-row.active { border-left-color: var(--brain-purple); background: #1a1929; }
.brain-note-row strong { display: block; overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.brain-note-row small { display: block; margin-top: 4px; color: #6f6e7e; font-size: 10px; }
.brain-row-tags { display: flex; gap: 4px; margin-top: 7px; overflow: hidden; }
.brain-row-tags i { display: inline-block; padding: 2px 5px; border: 1px solid #343148; border-radius: 4px; color: #9691bd; background: #191825; font-size: 9px; font-style: normal; white-space: nowrap; }
.brain-empty-list { padding: 30px 18px; color: var(--brain-muted); font-size: 13px; text-align: center; }
.brain-reader { min-width: 0; overflow-y: auto; max-height: calc(100vh - 64px); background: var(--brain-panel); }
.brain-reader-empty { height: 100%; min-height: 520px; display: grid; place-items: center; padding: 30px; color: var(--brain-muted); text-align: center; }
.brain-reader-inner { min-height: 100%; }
.brain-note-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--brain-line); }
.brain-properties { display: flex; gap: 7px; flex-wrap: wrap; }
.brain-chip { padding: 5px 8px; border: 1px solid var(--brain-line); border-radius: 6px; color: #b2b0bf; background: #171823; font-size: 10px; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
.brain-reader-actions { display: flex; gap: 7px; }
.brain-icon-button { min-width: 32px; height: 32px; border: 1px solid var(--brain-line); border-radius: 7px; color: var(--brain-muted); background: #161720; }
.brain-icon-button:hover, .brain-icon-button:focus-visible { color: white; border-color: #4b4862; outline: none; }
.brain-note-main { max-width: 920px; padding: 28px 30px 60px; }
.brain-note-main h2 { max-width: 760px; margin: 0; color: var(--brain-text); font-size: clamp(24px, 3vw, 36px); line-height: 1.12; letter-spacing: -.025em; }
.brain-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: #777687; font-size: 11px; }
.brain-note-body { max-width: 780px; margin-top: 26px; color: #d4d1dc; font: 15px/1.8 Georgia, "Times New Roman", serif; white-space: pre-wrap; }
.brain-wikilink { border: 0; padding: 0; color: #a89fff; background: none; font: inherit; text-decoration: underline; text-decoration-color: #555079; text-underline-offset: 3px; }
.brain-context { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; max-width: 780px; margin-top: 34px; }
.brain-context-card { min-height: 128px; padding: 16px; border: 1px solid var(--brain-line); border-radius: 10px; background: #14151e; }
.brain-context-card h3 { margin: 0 0 12px; color: #8d8b9a; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.brain-backlink { width: 100%; display: block; margin-top: 7px; padding: 0; border: 0; color: #cbc7d7; background: none; text-align: left; font-size: 12px; }
.brain-backlink:hover { color: #a99fff; }
.mini-graph { position: relative; height: 82px; overflow: hidden; }
.graph-line { position: absolute; top: 39px; left: 12%; width: 75%; height: 1px; background: #454258; transform: rotate(-4deg); }
.graph-node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #777487; box-shadow: 0 0 0 4px rgba(119,116,135,.12); }
.graph-node.active { width: 13px; height: 13px; background: var(--brain-purple); box-shadow: 0 0 0 6px rgba(118,103,255,.15); }
.brain-dialog { color: var(--brain-text); background: var(--brain-panel); border-color: var(--brain-line); }
.brain-dialog .modal p { color: var(--brain-muted); }
.brain-dialog label { color: #d7d4df; }
.brain-dialog input, .brain-dialog textarea, .brain-dialog select { border-color: var(--brain-line); color: var(--brain-text); background: #171822; }
.brain-dialog textarea { min-height: 180px; }

@media (max-width: 980px) {
  .brain-shell { grid-template-columns: 160px 280px minmax(0,1fr); }
  .brain-note-main { padding: 24px 22px 50px; }
}
@media (max-width: 820px) {
  .workspace.brain-mode { padding: 0; }
  .brain-shell { grid-template-columns: 160px minmax(240px,1fr); }
  .brain-reader { grid-column: 1 / -1; max-height: none; min-height: 560px; border-top: 1px solid var(--brain-line); }
  .brain-list { max-height: 420px; }
}
@media (max-width: 560px) {
  .brain-header { padding: 0 12px; }
  .brain-shell { display: block; }
  .brain-rail { border-right: 0; border-bottom: 1px solid var(--brain-line); }
  .brain-rail .brain-add { display: none; }
  .brain-filter-list { display: flex; gap: 4px; overflow-x: auto; }
  .brain-filter { min-width: max-content; grid-template-columns: 20px auto auto; }
  .brain-tools { margin-top: 8px; padding-top: 8px; }
  .brain-list { max-height: 340px; border-right: 0; }
  .brain-context { grid-template-columns: 1fr; }
}