:root { font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif; font-synthesis:none; color-scheme:dark; --accent:#9489ff; --accent-strong:#7869ed; --accent-soft:rgba(148,137,255,.13); --radius:13px; }
*,*::before,*::after {box-sizing:border-box}
html,body,#app {margin:0;min-height:100%;height:100%}
body {overflow:hidden;font-size:14px;-webkit-font-smoothing:antialiased}
button,input,textarea,select {font:inherit}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.45}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:2px solid var(--accent);outline-offset:2px}
.hidden {display:none!important}
.theme-dark { color-scheme:dark; --bg:#171719;--sidebar:#1e1e21;--surface:#222225;--surface-raised:#29292d;--surface-hover:#303034;--line:#303035;--line-strong:#3d3d43;--text:#f2f1f5;--muted:#929199;--subtle:#62616a;--input:#212124;--shadow:rgba(0,0,0,.35);--danger:#ff888c;--success:#9bdab2 }
.theme-light { color-scheme:light;--bg:#f8f8fa;--sidebar:#ffffff;--surface:#ffffff;--surface-raised:#fff;--surface-hover:#f1f1f6;--line:#e7e7ed;--line-strong:#d6d6e0;--text:#22222a;--muted:#747480;--subtle:#a3a3ae;--input:#f6f6f9;--shadow:rgba(31,30,59,.1);--danger:#c63545;--success:#16855d }
body {background:var(--bg);color:var(--text)}
.app-shell {display:flex;width:100%;height:100%;isolation:isolate}
.sidebar {flex:0 0 256px;width:256px;background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;z-index:20;transition:width .2s,flex-basis .2s,transform .2s}
.sidebar-head {display:flex;align-items:center;gap:12px;padding:26px 18px 19px;min-height:85px}
.app-logo {width:37px;height:37px;border-radius:11px;background:linear-gradient(145deg,#a9a2ff,#7361ed 72%);display:grid;place-items:center;color:#fff;font-size:16px;font-weight:800;letter-spacing:-.9px;box-shadow:0 5px 20px #6b57fb30;flex:none}
.logo-text {display:flex;flex-direction:column;min-width:0;gap:2px}
.logo-text strong {font-size:16px;font-weight:780;letter-spacing:-.55px}
.logo-text span {font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.05em}
.sidebar-content {overflow:auto;overflow-x:hidden;padding:0 12px 22px;flex:1;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.primary-new {width:100%;min-height:41px;border:1px solid transparent;background:var(--accent);color:#17151f;font-weight:750;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:27px;transition:background .15s,transform .15s}
.primary-new:hover {background:#aaa0ff;transform:translateY(-1px)}
.sidebar-section {margin-bottom:23px}
.section-title {display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:var(--muted);font-size:10px;letter-spacing:.12em;font-weight:800;text-transform:uppercase;margin-bottom:9px}
.section-add {width:23px;height:23px;display:grid;place-items:center;color:var(--muted);border:0;background:transparent;border-radius:6px}
.section-add:hover {color:var(--text);background:var(--surface-hover)}
.nav-item {display:flex;align-items:center;gap:12px;min-height:38px;padding:0 11px;color:var(--muted);background:transparent;border:0;border-radius:9px;width:100%;text-align:left;font-size:12.5px;font-weight:580;white-space:nowrap;margin-bottom:3px}
.nav-item .ico {flex:none;opacity:.9}
.nav-item .nav-title {overflow:hidden;text-overflow:ellipsis;flex:1}
.nav-item:hover {color:var(--text);background:var(--surface-hover)}
.nav-item.active {background:var(--accent-soft);color:var(--text);font-weight:710}
.nav-item.active>.ico {color:var(--accent)}
.nav-count {font-size:10px;color:var(--subtle);font-weight:700}
.folder-row {display:flex;align-items:center;position:relative}
.folder-row .nav-item {padding-right:34px}
.folder-more {position:absolute;right:7px;top:5px;width:28px;height:28px;border:0;border-radius:7px;color:var(--muted);background:transparent;display:none;align-items:center;justify-content:center}
.folder-row:hover .folder-more,.folder-more:focus-visible {display:flex}
.folder-more:hover {background:var(--surface-hover);color:var(--text)}
.sidebar-empty {padding:8px 12px;color:var(--subtle);font-size:12px;line-height:1.5}
.sidebar-footer {padding:14px 12px 17px;border-top:1px solid var(--line)}
.footer-button {display:flex;align-items:center;gap:10px;background:transparent;border:0;color:var(--muted);font-size:12px;font-weight:630;border-radius:9px;padding:9px 11px;width:100%;text-align:left}
.footer-button:hover {background:var(--surface-hover);color:var(--text)}
.footer-button span {flex:1}
.footer-note {display:flex;align-items:center;gap:7px;padding:9px 10px 0;color:var(--subtle);font-size:10.5px}
.footer-note .ico {color:var(--success)}
.workspace {flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.topbar {height:76px;min-height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;gap:15px;border-bottom:1px solid var(--line);background:var(--bg)}
.topbar-left,.topbar-right {display:flex;align-items:center;gap:12px;min-width:0}
.topbar-left {flex:1}
.topbar-right {flex:1;justify-content:flex-end}
.topbar-center {width:min(420px,44%);position:relative;flex:none}
.search-icon {position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-input {width:100%;border:1px solid var(--line);border-radius:11px;background:var(--input);height:38px;padding:0 70px 0 41px;color:var(--text);outline:none;font-size:12.5px}
.search-input:focus {border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-input::placeholder {color:var(--subtle)}
.search-kbd {position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--subtle);border:1px solid var(--line);border-radius:5px;padding:3px 6px;font-size:10px;pointer-events:none}
.breadcrumb {color:var(--muted);font-size:12px;display:flex;align-items:center;gap:8px;min-width:0}
.breadcrumb span {max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.breadcrumb strong {color:var(--text);font-weight:600}
.icon-btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:35px;height:35px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);transition:background .15s,color .15s}
.icon-btn:hover {background:var(--surface-hover);color:var(--text)}
.icon-btn.active {color:var(--accent);background:var(--accent-soft)}
.icon-btn.strong {border-color:var(--line);background:var(--surface);color:var(--text)}
.icon-btn.strong:hover {background:var(--surface-hover)}
.icon-btn .ico {flex:none}
.topbar .avatar {width:31px;height:31px;border-radius:50%;background:var(--accent-soft);border:1px solid #9789ff65;color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:800}
.mobile-menu {display:none}
.main-content {flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-color:var(--line-strong) transparent;scrollbar-width:thin}
.page {padding:39px 37px 48px;max-width:1700px;margin:0 auto}
.page-header {display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.eyebrow {font-size:11px;color:var(--accent);letter-spacing:.14em;font-weight:800;text-transform:uppercase;margin-bottom:7px}
h1,h2,h3,p {margin-top:0}
h1 {font-size:29px;letter-spacing:-1.05px;line-height:1.15;margin:0 0 8px;font-weight:775}
.page-subtitle {font-size:12.5px;color:var(--muted);margin:0}
.toolbar {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar-group {display:flex;align-items:center;gap:2px;padding:4px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.toolbar-group .icon-btn {min-width:31px;height:29px;border-radius:7px}
.select-control {border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--surface);height:39px;padding:0 31px 0 12px;outline:0;font-size:12px;max-width:150px}
.search-result-note {font-size:12px;color:var(--muted);margin-bottom:18px}
.notes-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:17px}
.note-card {height:258px;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:19px 18px 16px;text-align:left;position:relative;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s}
.note-card:hover,.note-row:hover {border-color:var(--line-strong);box-shadow:0 6px 24px var(--shadow);transform:translateY(-2px)}
.card-top {display:flex;align-items:flex-start;gap:7px;min-height:23px}
.card-title {font-size:14.5px;font-weight:760;line-height:1.32;letter-spacing:-.2px;word-break:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1;color:var(--text)}
.card-menu {width:27px;height:27px;min-width:27px;position:relative;top:-5px;right:-9px;opacity:0}
.note-card:hover .card-menu,.note-card:focus-within .card-menu {opacity:1}
.card-meta {display:flex;gap:6px;align-items:center;min-width:0;color:var(--muted);font-size:11px;margin-top:8px;white-space:nowrap}
.card-meta .folder-label {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:115px}
.card-separator {height:1px;background:var(--line);margin:15px 0 14px}
.card-preview {color:var(--muted);font-size:11.6px;line-height:1.65;white-space:pre-wrap;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;flex:1}
.card-preview.empty {font-style:italic;color:var(--subtle)}
.card-bottom {display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:var(--subtle);font-size:10.5px;gap:8px}
.card-bottom span {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-star {position:relative;margin:-9px -8px -9px 0;height:30px;width:30px;min-width:30px;color:var(--subtle)}
.card-star.is-starred {color:#e3b65f}
.note-card .card-star:not(.is-starred) {opacity:0}
.note-card:hover .card-star,.note-card:focus-within .card-star {opacity:1}
.notes-list {display:flex;flex-direction:column;gap:9px}
.note-row {background:var(--surface);border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:17px;padding:16px 18px;cursor:pointer;transition:box-shadow .15s,border-color .15s,transform .15s;min-height:70px}
.note-row .row-main {flex:1;min-width:0}
.note-row .row-title {font-size:13px;font-weight:720;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-row .row-preview {color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-row .row-folder {max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.note-row .row-time {min-width:91px;text-align:right;color:var(--muted);font-size:11px}
.note-row .card-star {opacity:1;margin:0}
.note-row .card-menu {opacity:1;top:0;right:0}
.empty-state {min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:400px;margin:auto;padding:40px 18px}
.empty-illustration {width:79px;height:79px;border:1px solid var(--line);background:var(--surface);border-radius:21px;display:grid;place-items:center;color:var(--accent);margin-bottom:22px}
.empty-state h2 {font-size:21px;letter-spacing:-.5px;margin:0 0 7px}
.empty-state p {color:var(--muted);font-size:12.5px;line-height:1.7;margin:0 0 22px}
.action-btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 15px;border-radius:9px;background:var(--accent);color:#16151b;border:1px solid transparent;font-weight:760;font-size:12px}
.action-btn:hover {background:#a79dff}
.action-btn.ghost {background:var(--surface);border-color:var(--line);color:var(--text)}
.action-btn.ghost:hover {background:var(--surface-hover)}
.action-btn.danger {background:#cb4252;color:white}
.action-btn.danger:hover {background:#db5364}
.editor-page {max-width:940px;padding:35px 48px 50px;margin:auto;min-height:100%;display:flex;flex-direction:column}
.editor-actions {display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap;padding-bottom:23px;border-bottom:1px solid var(--line)}
.editor-actions-left,.editor-actions-right {display:flex;align-items:center;gap:9px;min-width:0}
.editor-back {display:flex;align-items:center;gap:7px;font-weight:600;font-size:12px;color:var(--muted);border:0;background:transparent;padding:9px 0}
.editor-back:hover {color:var(--text)}
.save-status {font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.save-status .ico {color:var(--success)}
.editor-title {margin:43px 0 22px;font-weight:750;font-size:36px;line-height:1.2;letter-spacing:-1.2px;background:transparent;border:0;outline:none!important;color:var(--text);width:100%;resize:none;overflow:hidden;min-height:46px;padding:0}
.editor-title::placeholder {color:var(--subtle)}
.editor-meta {display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:11px;border-bottom:1px solid var(--line);padding-bottom:23px}
.editor-meta label {display:flex;align-items:center;gap:6px}
.editor-meta select {border:0;background:transparent;color:var(--text);font-size:11px;max-width:190px;outline:none}
.editor-meta .dot {color:var(--subtle)}
.editor-body {border:0;outline:none!important;background:transparent;width:100%;flex:1;min-height:330px;resize:none;color:var(--text);font-size:14px;line-height:1.85;margin-top:29px;padding:0 0 40px;tab-size:4}
.editor-body::placeholder {color:var(--subtle)}
.editor-bottom {position:sticky;bottom:-50px;background:var(--bg);border-top:1px solid var(--line);padding:13px 0 16px;color:var(--subtle);font-size:11px;display:flex;justify-content:space-between;gap:12px}
.popover {position:fixed;z-index:60;min-width:190px;max-width:250px;background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 15px 50px var(--shadow);padding:6px}
.popover button {width:100%;border:0;border-radius:7px;padding:9px 10px;text-align:left;background:transparent;color:var(--text);display:flex;align-items:center;gap:10px;font-size:12px}
.popover button:hover {background:var(--surface-hover)}
.popover button.danger {color:var(--danger)}
.popover button .ico {color:var(--muted)}
.popover-divider {height:1px;background:var(--line);margin:4px 5px}
.modal-backdrop {position:fixed;inset:0;background:rgba(4,4,9,.63);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(5px)}
.modal {width:min(100%,440px);background:var(--surface-raised);border:1px solid var(--line-strong);border-radius:18px;box-shadow:0 25px 90px var(--shadow);padding:26px}
.modal .modal-head {display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px}
.modal h2 {font-size:20px;letter-spacing:-.55px;margin:0}
.modal p {font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.field-label {display:block;font-weight:680;font-size:11px;margin:14px 0 7px}
.text-field {width:100%;border:1px solid var(--line-strong);border-radius:9px;background:var(--input);padding:11px 12px;color:var(--text);outline:none;font-size:13px}
.text-field:focus {border-color:var(--accent)}
.modal-actions {display:flex;justify-content:flex-end;gap:9px;margin-top:23px;flex-wrap:wrap}
.modal-option {border:1px solid var(--line);border-radius:11px;padding:12px;margin:10px 0;display:flex;gap:12px;align-items:flex-start}
.modal-option .ico {color:var(--accent);margin-top:1px}
.modal-option strong {font-size:12px;display:block;margin-bottom:4px}
.modal-option p {font-size:11px;margin:0}
.toast-container {position:fixed;bottom:24px;right:25px;z-index:150;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast {display:flex;align-items:center;gap:9px;background:var(--surface-raised);border:1px solid var(--line-strong);padding:12px 16px;border-radius:11px;box-shadow:0 8px 26px var(--shadow);font-size:12px;color:var(--text);animation:toastIn .2s ease}
.toast .ico {color:var(--success)}
@keyframes toastIn {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.mobile-backdrop {display:none}
@media (max-width:1200px) {.sidebar{flex-basis:234px;width:234px}.page{padding:32px 28px}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
@media (max-width:900px) {.sidebar{flex-basis:220px;width:220px}.topbar{padding:0 22px}.topbar-center{width:min(330px,45%)}.page{padding:29px 21px}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}.note-card{padding:16px}}
@media (max-width:720px) {
 .sidebar{position:fixed;left:0;top:0;bottom:0;width:265px;transform:translateX(-100%);box-shadow:none}.sidebar.open{transform:translateX(0);box-shadow:10px 0 35px var(--shadow)}.mobile-backdrop.visible{display:block;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.45)}.mobile-menu{display:inline-flex}.topbar{height:64px;min-height:64px;padding:0 15px;gap:8px}.topbar-left,.topbar-right{flex:0 0 auto}.topbar-center{width:auto;flex:1;max-width:none}.topbar .avatar{display:none}.topbar .icon-btn:not(.mobile-menu){min-width:30px;width:30px}.search-kbd{display:none}.search-input{padding-right:12px}.page{padding:27px 17px}.page-header{align-items:flex-start}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}.note-card{height:228px;padding:14px}.card-preview{font-size:11px}.card-meta{font-size:10px}.card-menu{opacity:1}.note-card .card-star{opacity:1}.editor-page{padding:23px 21px 35px}.editor-title{font-size:29px;margin-top:32px}.editor-actions{padding-bottom:13px}.editor-actions-right .save-status{display:none}.note-row .row-folder{display:none}
}
@media (max-width:420px) {.notes-grid{grid-template-columns:1fr 1fr}.note-card{height:209px;padding:12px}.card-title{font-size:13px}.card-separator{margin:10px 0}.note-card .card-meta .folder-label{max-width:64px}.page-header h1{font-size:25px}.toolbar{width:100%;justify-content:space-between}.select-control{max-width:138px}.note-row .row-time{display:none}.editor-page{padding:17px}.editor-actions-right{gap:2px}.editor-meta{gap:9px}.editor-body{font-size:13px}}
@media (prefers-reduced-motion: reduce) {*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v1.1 sync indicators and configuration */
.cloud-pill {display:inline-flex;align-items:center;gap:6px;max-width:195px;min-width:0;min-height:31px;padding:5px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--muted);font-size:10.5px;font-weight:650;white-space:nowrap;}
.cloud-pill span {overflow:hidden;text-overflow:ellipsis;}
.cloud-pill:hover {border-color:var(--accent);background:var(--surface-hover);}
.cloud-synced {color:var(--success)}
.cloud-error,.cloud-offline {color:var(--danger)}
.cloud-pending,.cloud-syncing,.cloud-connecting {color:var(--accent)}
.cloud-info {display:flex;align-items:flex-start;gap:12px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin:4px 0 15px;color:var(--accent);}
.cloud-info div {display:flex;flex-direction:column;gap:5px;min-width:0;}
.cloud-info strong {font-size:12.5px;color:var(--text);}
.cloud-info span:not(.sync-state-dot) {font-size:11.5px;color:var(--muted);line-height:1.55;}
.cloud-helper {font-size:11px;color:var(--muted);line-height:1.55;margin:12px 0;}
.cloud-auth-actions {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:14px 0 4px;}
.inline-link {border:0;background:transparent;padding:0;color:var(--accent);font-weight:700;cursor:pointer;text-align:left;}
.inline-link:hover {text-decoration:underline;}
.sync-state-dot {display:block;flex:none;width:10px;height:10px;margin-top:4px;border-radius:50%;background:var(--accent);}
.sync-synced {background:var(--success)}
.sync-error,.sync-offline {background:var(--danger)}
@media(max-width:1000px){.cloud-pill{max-width:125px}.cloud-pill span{max-width:88px}}
@media(max-width:720px){.topbar .cloud-pill{min-width:31px;width:32px;height:32px;justify-content:center;padding:0}.topbar .cloud-pill span,.topbar .cloud-pill .ico:last-child:not(:first-child){display:none}}


/* eG Notes v1.1.2 — fluid window layouts. No note/storage/sync schema changes. */
.topbar {
  display:grid;
  grid-template-columns:minmax(110px,1fr) minmax(160px,420px) max-content;
  align-items:center;
  gap:clamp(8px,1.4vw,16px);
  padding-inline:clamp(13px,2vw,34px);
}
.topbar-left,.topbar-right {min-width:0;flex:none;}
.topbar-left {overflow:hidden;}
.topbar-right {gap:clamp(5px,.8vw,12px);}
.topbar-center {min-width:0;width:100%;max-width:none;flex:initial;}
.topbar .breadcrumb {min-width:0;overflow:hidden;white-space:nowrap;flex:1;}
.topbar .breadcrumb strong {display:inline-block;max-width:min(24vw,180px);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;}
.topbar .icon-btn,.topbar .avatar {flex-shrink:0;}
.topbar .cloud-pill {min-width:31px;max-width:clamp(34px,11vw,170px);flex-shrink:1;}
.page-header > div:first-child {min-width:0;max-width:100%;}
.page-header h1 {overflow-wrap:anywhere;}
.notes-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,226px),1fr));}
.note-row {min-width:0;}
.editor-actions-right,.editor-actions-left {max-width:100%;}
.editor-actions-right {flex-wrap:wrap;justify-content:flex-end;}
.editor-bottom {flex-wrap:wrap;}
.modal-backdrop {overflow-y:auto;align-items:flex-start;}
.modal {max-height:calc(100dvh - 24px);overflow-y:auto;flex-shrink:0;margin:auto;}
.toast-container {max-width:calc(100vw - 24px);}
.toast {overflow-wrap:anywhere;}

/* Below laptop width, navigation is a drawer: content never competes with a fixed sidebar. */
@media (max-width:1100px) {
  .sidebar {position:fixed;left:0;top:0;bottom:0;width:min(275px,calc(100vw - 28px));flex:0 0 auto;transform:translateX(-105%);box-shadow:none;z-index:40;}
  .sidebar.open {transform:translateX(0);box-shadow:10px 0 35px var(--shadow);}
  .mobile-backdrop.visible {display:block;position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.48);}
  .mobile-menu {display:inline-flex;}
  .workspace {min-width:0;width:100%;}
  .topbar {grid-template-columns:minmax(100px,1fr) minmax(140px,420px) max-content;}
  .topbar .cloud-pill {min-width:31px;max-width:34px;height:32px;padding:0;justify-content:center;}
  .topbar .cloud-pill span,.topbar .cloud-pill .ico:last-child:not(:first-child) {display:none;}
}
@media (max-width:900px) {
  .topbar {grid-template-columns:minmax(95px,1fr) minmax(130px,420px) max-content;}
  .topbar .avatar {display:none;}
  .topbar .breadcrumb strong {max-width:18vw;}
}
@media (max-width:720px) {
  .topbar {display:grid;grid-template-columns:35px minmax(0,1fr) max-content;height:64px;min-height:64px;padding-inline:13px;gap:8px;}
  .topbar-left,.topbar-right {min-width:0;}
  .topbar-left .breadcrumb {display:none;}
  .topbar-center {min-width:0;width:100%;}
  .topbar .icon-btn {flex-shrink:0;}
  .search-input {min-width:0;}
  .notes-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));}
  .page {padding:25px 17px;}
  .editor-page {padding:23px 21px 35px;}
}
/* For phone-width windows, move the search box to its own row. No squeezed controls. */
@media (max-width:540px) {
  .topbar {
    grid-template-columns:minmax(0,1fr) max-content;
    grid-template-rows:43px 43px;
    height:96px;
    min-height:96px;
    padding:5px 12px 7px;
    column-gap:8px;
    row-gap:0;
  }
  .topbar-left {grid-column:1;grid-row:1;gap:8px;min-width:0;}
  .topbar-left .breadcrumb {display:flex;overflow:hidden;min-width:0;max-width:100%;font-size:11px;}
  .topbar .breadcrumb span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
  .topbar .breadcrumb strong {max-width:clamp(50px,23vw,120px);}
  .topbar-center {grid-column:1 / -1;grid-row:2;width:100%;min-width:0;}
  .topbar-right {grid-column:2;grid-row:1;justify-content:flex-end;min-width:0;gap:6px;}
  .search-input {height:35px;}
  .search-kbd {display:none;}
  .editor-actions {gap:7px;}
  .editor-actions-right .save-status {display:none;}
  .page-header {gap:13px;}
  .toolbar {width:100%;justify-content:space-between;}
}
@media (max-width:420px) {
  .notes-grid {grid-template-columns:minmax(0,1fr);}
  .note-card {height:210px;padding:15px;}
  .note-card .card-meta .folder-label {max-width:125px;}
  .note-row {padding:12px 10px;gap:8px;}
  .note-row .row-time,.note-row .row-folder {display:none;}
  .page {padding:19px 13px 30px;}
  .toolbar {justify-content:flex-start;}
  .select-control {max-width:calc(100vw - 125px);}
  .editor-page {padding:18px 14px 30px;}
  .editor-title {font-size:27px;}
  .editor-bottom {gap:5px;}
  .editor-bottom span:last-child {display:none;}
  .modal-backdrop {padding:10px;}
  .modal {padding:18px;max-height:calc(100dvh - 20px);}
  .toast-container {left:12px;right:12px;bottom:12px;}
}
@media (max-width:310px) {
  .topbar {padding-inline:8px;column-gap:4px;}
  .topbar-left,.topbar-right {gap:4px;}
  .topbar .breadcrumb {font-size:10px;}
  .topbar .breadcrumb span {max-width:58px;}
  .topbar .breadcrumb strong {max-width:55px;}
  .topbar-right .icon-btn[data-action="theme-toggle"] {display:none;}
  .page-header h1 {font-size:23px;}
  .select-control {max-width:110px;}
}
@media (max-width:240px) {
  .topbar-left .breadcrumb {display:none;}
  .topbar .cloud-pill {min-width:28px;width:28px;}
  .topbar .icon-btn {min-width:28px;width:28px;}
  .topbar-right {gap:2px;}
  .page {padding:12px 8px;}
  .note-card {padding:10px;}
}