.analysis-controls { display: grid; gap: 7px; margin-top: 17px; }
 .analysis-controls label { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
 .analysis-controls select { width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 9px 10px; outline: 0; background: var(--panel); font-size: 11px; }
 .analyze-button { background: var(--ink); color: var(--paper); border-radius: 5px; padding: 10px; font-size: 11px; font-weight: 700; margin-top: 3px; }
 .analyze-button span { color: var(--accent); padding-right: 5px; }
 .analyze-button:disabled { opacity: .4; cursor: not-allowed; }
:root {
  --ink: #20242a;
  --muted: #7d838c;
  --faint: #aeb4bb;
  --line: #e7e8e7;
  --paper: #fbfbf9;
  --panel: #ffffff;
  --sidebar: #f2f3f0;
  --accent: #d7603d;
  --accent-soft: #f8e5dd;
  --sage: #6d816f;
  --shadow: 0 18px 50px rgba(32, 36, 42, .07);
}
[data-theme="dark"] { --ink: #edf0ed; --muted: #9da49f; --faint: #737b76; --line: #2c3331; --paper: #171b1a; --panel: #202522; --sidebar: #111514; --accent: #ef8763; --accent-soft: #442a22; --sage: #98b099; --shadow: 0 18px 50px rgba(0,0,0,.25); }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 14px; transition: background .25s, color .25s; }
button, input, select { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; background: none; }
.app-shell { display: flex; height: 100vh; min-height: 0; overflow: hidden; }
.sidebar { width: 248px; height: 100vh; padding: 25px 18px 18px; background: var(--sidebar); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width .25s, padding .25s; }
.brand-row { display: flex; align-items: center; gap: 10px; padding: 0 10px 30px; }
.brand-mark { background: var(--accent); color: white; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px 8px 8px 2px; font-family: Newsreader, serif; font-size: 19px; }
.brand-name { font-weight: 700; letter-spacing: -.5px; font-size: 18px; }
.icon-button { color: var(--muted); width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; font-size: 20px; transition: background .2s, color .2s; }
.icon-button:hover, .format-toolbar button:hover { color: var(--ink); background: var(--line); }
.sidebar-toggle { margin-left: auto; font-size: 27px; }
.new-note-button { background: var(--ink); color: var(--paper); border-radius: 7px; padding: 11px 12px; text-align: left; font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 21px; }
.new-note-button span { font-size: 20px; line-height: 12px; font-weight: 400; }
kbd { color: var(--muted); font-size: 10px; border: 1px solid var(--line); padding: 2px 4px; border-radius: 3px; margin-left: auto; }
.new-note-button kbd { color: var(--faint); border-color: rgba(255,255,255,.15); }
.main-nav { display: grid; gap: 3px; }
.nav-item, .folder-item { color: var(--muted); display: flex; align-items: center; gap: 10px; border-radius: 6px; padding: 9px 10px; text-align: left; width: 100%; }
.nav-item:hover, .folder-item:hover, .nav-item.active, .folder-item.active { color: var(--ink); background: var(--line); }
.nav-item.active { font-weight: 600; }
.nav-icon { width: 16px; text-align: center; font-size: 17px; color: var(--sage); }
.nav-item strong { margin-left: auto; font-size: 11px; color: var(--faint); font-weight: 500; }
.sidebar-section { margin-top: 30px; }
.section-label-row, .block-title { display: flex; justify-content: space-between; align-items: center; padding: 0 10px 8px; }
.section-label, .eyebrow { text-transform: uppercase; letter-spacing: 1.3px; color: var(--faint); font-size: 10px; font-weight: 700; margin: 0; }
.tiny-button { font-size: 18px; color: var(--muted); padding: 0 4px; }
.folder-list { display: grid; gap: 3px; }
.folder-item .folder-pip { width: 7px; height: 7px; border-radius: 2px; background: var(--folder-color, var(--sage)); }
.folder-item span:nth-child(2) { flex: 1; }
.folder-item small { color: var(--faint); }
.sidebar-footer { margin-top: auto; padding-top: 25px; }
.storage-status { display: flex; gap: 8px; color: var(--muted); font-size: 11px; padding: 0 10px 17px; }
.status-dot { width: 6px; height: 6px; background: #7fa37e; border-radius: 50%; margin-top: 4px; }
.theme-button { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; padding: 10px; width: 100%; text-align: left; border-radius: 6px; }
.theme-button:hover { background: var(--line); color: var(--ink); }
.theme-button span:first-child { color: var(--accent); font-size: 18px; }
.profile-row { display: flex; align-items: center; gap: 9px; padding: 16px 10px 0; border-top: 1px solid var(--line); margin-top: 9px; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 10px; border-radius: 50%; }
.profile-row strong, .profile-row span { display: block; font-size: 12px; }.profile-row span { color: var(--muted); font-size: 10px; margin-top: 2px; }.more-dots { margin-left: auto; letter-spacing: 2px; }
.main-content { flex: 1; min-width: 0; min-height: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 76px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding: 0 34px; }
.breadcrumb { display: flex; gap: 9px; color: var(--muted); font-size: 12px; }.breadcrumb span:last-child { color: var(--ink); font-weight: 600; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }.save-indicator { font-size: 11px; color: var(--faint); margin-right: 5px; }.share-button { background: var(--accent); color: white; border-radius: 5px; padding: 9px 14px; font-size: 12px; font-weight: 600; }.share-button span { padding-left: 7px; }
.workspace { display: grid; grid-template-columns: minmax(230px, 285px) minmax(380px, 1fr) 260px; flex: 1; min-height: 0; overflow: hidden; }
.notes-column { border-right: 1px solid var(--line); padding: 35px 20px 20px; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }.column-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px; }.column-heading h1, .insights-heading h2 { font: 500 27px Newsreader, serif; margin: 7px 0 0; letter-spacing: -.4px; }.search-wrap { height: 36px; border: 1px solid var(--line); border-radius: 5px; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: var(--faint); margin-bottom: 17px; }.search-wrap input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 12px; }.search-wrap kbd { margin: 0; }.notes-list { display: grid; gap: 4px; }.note-list-item { padding: 13px 12px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }.note-list-item:hover, .note-list-item.selected { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); }.note-list-item.selected { border-left: 3px solid var(--accent); padding-left: 10px; }.note-list-item h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.note-list-item p { color: var(--muted); font-size: 11px; margin: 0 0 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.item-meta { color: var(--faint); font-size: 10px; display: flex; justify-content: space-between; }.item-meta span:first-child { color: var(--sage); }.empty-list { color: var(--muted); font-size: 12px; line-height: 1.7; padding: 22px 8px; text-align: center; }.list-footer { color: var(--faint); font-size: 10px; padding: 18px 8px; }
.editor-column { padding: 37px clamp(28px, 5vw, 75px) 25px; display: flex; flex-direction: column; max-width: 800px; width: 100%; min-height: 0; margin: 0 auto; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; }.editor-header { display: flex; justify-content: space-between; align-items: center; }.folder-chip { display: flex; align-items: center; gap: 7px; color: var(--sage); font-size: 11px; }.folder-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }.folder-chip select { border: 0; outline: 0; background: transparent; color: var(--sage); font-size: 11px; cursor: pointer; }.star-button { font-size: 27px; color: var(--faint); line-height: 1; }.star-button.starred { color: #e6a441; }
.note-title { border: 0; outline: 0; background: transparent; font: 600 42px Newsreader, serif; color: var(--ink); margin: 28px 0 9px; width: 100%; letter-spacing: -.7px; }.note-title::placeholder { color: var(--faint); }.note-meta { color: var(--faint); font-size: 10px; display: flex; gap: 9px; align-items: center; }.meta-divider { height: 3px; width: 3px; border-radius: 50%; background: var(--faint); }.format-toolbar { display: flex; align-items: center; gap: 2px; padding: 15px 0 11px; margin-top: 25px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.format-toolbar button { width: 29px; height: 29px; color: var(--muted); border-radius: 4px; font-size: 13px; }.toolbar-divider { width: 1px; height: 18px; background: var(--line); margin: 0 7px; }.editor-body { outline: 0; flex: 1; min-height: 330px; padding-top: 25px; font-size: 15px; line-height: 1.8; color: var(--ink); }.editor-body:empty::before { content: attr(data-placeholder); color: var(--faint); }.editor-body h2 { font: 600 24px Newsreader, serif; }.editor-body blockquote { border-left: 3px solid var(--accent); padding-left: 15px; color: var(--muted); }.editor-bottom { border-top: 1px solid var(--line); padding-top: 13px; display: flex; justify-content: space-between; color: var(--faint); font-size: 10px; }.editor-bottom kbd { margin: 0 2px; }
.insights-column { border-left: 1px solid var(--line); padding: 35px 20px; min-height: 0; background: color-mix(in srgb, var(--sidebar) 30%, transparent); overflow: hidden; }
.sidebar.collapsed { width: 70px; padding-left: 12px; padding-right: 12px; }.sidebar.collapsed .brand-name, .sidebar.collapsed .new-note-button:not(:first-child), .sidebar.collapsed .new-note-button kbd, .sidebar.collapsed .nav-item span:not(.nav-icon), .sidebar.collapsed .nav-item strong, .sidebar.collapsed .section-label-row, .sidebar.collapsed .folder-list, .sidebar.collapsed .storage-status span:last-child, .sidebar.collapsed .theme-button span:last-child, .sidebar.collapsed .profile-row > div:not(.avatar), .sidebar.collapsed .more-dots { display: none; }.sidebar.collapsed .new-note-button { justify-content: center; padding: 11px 8px; }.sidebar.collapsed .brand-row { padding-left: 9px; padding-right: 9px; }.sidebar.collapsed .theme-button { justify-content: center; }
@media (max-width: 1050px) { .workspace { grid-template-columns: 245px minmax(350px, 1fr); }.insights-column { display: none; } }
@media (max-width: 720px) { .sidebar { position: fixed; z-index: 5; height: 100vh; transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow); }.sidebar.mobile-open { transform: translateX(0); }.topbar { padding: 0 16px; height: 64px; }.topbar-actions .save-indicator, .topbar-actions .icon-button { display: none; }.workspace { display: block; }.notes-column { display: none; }.editor-column { padding: 26px 20px; }.note-title { font-size: 35px; }.main-content { width: 100%; }.brand-row { padding-top: 3px; } }

/* Keep the analysis tool visually distinct from the note library. */
.insights-column { border-top: 3px solid var(--accent); padding-top: 30px; background: color-mix(in srgb, var(--sidebar) 38%, transparent); }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.ai-badge span { font-size: 13px; }
.insights-intro { color: var(--muted); font-size: 11px; line-height: 1.55; max-width: 205px; margin: 10px 0 0; }
.upload-zone { padding-top: 26px; padding-bottom: 26px; box-shadow: 0 8px 24px rgba(32,36,42,.05); }
.upload-icon { width: 42px; height: 42px; border-color: var(--accent); background: var(--accent-soft); font-size: 25px; }
.upload-zone strong { font-size: 13px; }
.upload-zone { width: 100%; min-width: 0; max-width: 100%; min-height: 190px; padding: 24px 16px; display: grid; grid-template-rows: auto auto auto; align-content: center; justify-items: center; gap: 12px; overflow: hidden; }
.upload-copy { width: 100%; min-width: 0; display: grid; gap: 5px; justify-items: center; text-align: center; }
.upload-copy strong, .upload-copy span { max-width: 100%; overflow-wrap: anywhere; }
.upload-copy span { color: var(--muted); font-size: 10px; }
.upload-actions { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-width: 0; }
.upload-or { color: var(--faint); font-size: 10px; }
.browse-button { white-space: nowrap; }