:root{--bg:#fff;--panel:#f5f5f7;--panel2:#fff;--line:#ddd;--text:#111;--muted:#777;--accent:#f5b900;--selected:#fff2bf}
*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit;color:inherit}.app{height:100%;display:grid;grid-template-columns:250px 340px minmax(0,1fr);overflow:hidden}
.sidebar,.list{border-right:1px solid var(--line);overflow:auto}.sidebar{background:var(--panel);padding:14px}.brandrow{display:flex;align-items:center;justify-content:space-between;margin:4px 6px 12px}.brand{font-size:28px;font-weight:750}
.search{width:100%;border:0;border-radius:10px;background:#e7e7ea;padding:10px 12px;outline:none}.section{margin-top:18px;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;padding:0 8px}
.nav{display:flex;align-items:center;gap:8px;padding:10px;border-radius:9px;cursor:pointer}.nav:hover,.nav.active{background:#e5e5e8}.nav .count{margin-left:auto;color:var(--muted)}
.list header{position:sticky;top:0;background:var(--panel2);z-index:2;padding:14px 16px;border-bottom:1px solid var(--line)}.listtop{display:flex;justify-content:space-between;align-items:center}.list h2{margin:0;font-size:24px}
.note{padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer}.note.active{background:var(--selected)}.nt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.nm{font-size:11px;color:var(--muted);margin-top:5px}
.editor{display:flex;flex-direction:column;min-width:0;height:100%}.toolbar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel2)}.toolbar button,.icon{border:0;background:#eee;border-radius:8px;padding:7px 10px;cursor:pointer}.toolbar button:disabled{opacity:.35;cursor:not-allowed}.toolbar .spacer{flex:1}
.title{border:0;outline:0;background:transparent;font-size:26px;font-weight:750;padding:20px 28px 8px}.meta{padding:0 28px 8px;color:var(--muted);font-size:12px}.body{padding:8px 28px 30px;outline:0;overflow:auto;flex:1;font-size:17px;line-height:1.55}.body:empty:before{content:"Start writing…";color:#aaa}.body img{max-width:100%;height:auto;border-radius:8px}.body table{border-collapse:collapse}.body td,.body th{border:1px solid var(--line);padding:6px}
.bottom{border-top:1px solid var(--line);padding:10px 18px;display:flex;gap:8px;align-items:center;overflow:auto}.chip{background:#eee;border-radius:999px;padding:6px 9px;font-size:12px}.attach{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px}
.modalback{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:20}.modal{width:min(680px,94vw);max-height:84vh;overflow:auto;background:var(--panel2);border-radius:14px;padding:20px;box-shadow:0 20px 80px #0005}.modal h3{margin-top:0}.modal input,.modal select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);margin:6px 0 12px}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.danger{color:#b00020}
.login{max-width:380px;margin:14vh auto;padding:28px}.login input{width:100%;padding:12px;margin:6px 0;border:1px solid #ccc;border-radius:10px}.login button{width:100%;padding:12px;background:var(--accent);border:0;border-radius:10px;font-weight:700}
.mobile{display:none}.hidden{display:none!important}.usercard,.sharecard{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}.usercard .top,.sharecard .top{display:flex;align-items:center;gap:8px}.usercard .name,.sharecard .name{font-weight:700;font-size:17px}.usercard .email,.sharecard .email{color:var(--muted);font-size:13px}.badge{display:inline-block;border-radius:999px;padding:3px 7px;background:#eee;font-size:11px}.useractions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.useractions button{border:0;border-radius:8px;padding:7px 9px;background:#eee}
body.theme-dark{--bg:#1c1c1e;--panel:#2c2c2e;--panel2:#1c1c1e;--line:#444;--text:#f5f5f7;--muted:#aaa;--selected:#5b4b10}body.theme-dark .search,body.theme-dark .toolbar button,body.theme-dark .icon,body.theme-dark .chip,body.theme-dark .badge,body.theme-dark .useractions button{background:#3a3a3c}
@media(prefers-color-scheme:dark){body.theme-system{--bg:#1c1c1e;--panel:#2c2c2e;--panel2:#1c1c1e;--line:#444;--text:#f5f5f7;--muted:#aaa;--selected:#5b4b10}body.theme-system .search,body.theme-system .toolbar button,body.theme-system .icon,body.theme-system .chip,body.theme-system .badge,body.theme-system .useractions button{background:#3a3a3c}}
@media(max-width:900px){.app{grid-template-columns:1fr}.sidebar,.list,.editor{grid-column:1;grid-row:1}.sidebar,.editor{display:none}.app.view-sidebar .sidebar{display:block}.app.view-sidebar .list,.app.view-sidebar .editor{display:none}.app.view-list .list{display:block}.app.view-list .sidebar,.app.view-list .editor{display:none}.app.view-editor .editor{display:flex}.app.view-editor .sidebar,.app.view-editor .list{display:none}.mobile{display:inline-block}.title{padding-left:18px;padding-right:18px}.meta,.body{padding-left:18px;padding-right:18px}}

.iconpicker{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin:8px 0 10px}
.emojiChoice{font-size:24px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:8px 4px;cursor:pointer}
.emojiChoice.selected{outline:3px solid var(--accent)}
.settingnote{display:block;color:var(--muted);line-height:1.35;margin:-5px 0 14px}
@media(max-width:520px){.iconpicker{grid-template-columns:repeat(6,1fr)}}

/* Notes v1.5.1 — dark-mode control fix */

/* Keep modal/action buttons readable in every theme */
.modal button,
.useractions button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  background: #f2f2f7;
  color: #111;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  opacity: 1;
}

/* Primary install action */
#installMyIcon,
#publicLink {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #fff;
}

/* Secondary actions */
#saveSet,
#changePassword,
#manageUsers,
#logout,
#savePassword,
#cancelPassword,
#uc,
#us,
#rp {
  background: #f2f2f7;
  color: #111;
}

/* Destructive actions */
#logout,
#stopPublic,
.danger {
  color: #ff3b30;
}

/* Explicit dark theme */
body.theme-dark .modal button,
body.theme-dark .useractions button {
  background: #2c2c2e;
  color: #f5f5f7;
  border-color: #4a4a4d;
}

body.theme-dark #installMyIcon,
body.theme-dark #publicLink {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #fff;
}

body.theme-dark #changePassword {
  background: #1c1c1e;
  color: #0a84ff;
  border-color: #0a84ff;
}

body.theme-dark #saveSet,
body.theme-dark #manageUsers,
body.theme-dark #savePassword,
body.theme-dark #cancelPassword,
body.theme-dark #uc,
body.theme-dark #us,
body.theme-dark #rp {
  background: #2c2c2e;
  color: #f5f5f7;
  border-color: #4a4a4d;
}

body.theme-dark #logout,
body.theme-dark #stopPublic,
body.theme-dark .danger {
  background: #1c1c1e;
  color: #ff453a;
  border-color: #ff453a;
}

/* System dark theme */
@media (prefers-color-scheme: dark) {
  body.theme-system .modal button,
  body.theme-system .useractions button {
    background: #2c2c2e;
    color: #f5f5f7;
    border-color: #4a4a4d;
  }

  body.theme-system #installMyIcon,
  body.theme-system #publicLink {
    background: #0a84ff;
    border-color: #0a84ff;
    color: #fff;
  }

  body.theme-system #changePassword {
    background: #1c1c1e;
    color: #0a84ff;
    border-color: #0a84ff;
  }

  body.theme-system #saveSet,
  body.theme-system #manageUsers,
  body.theme-system #savePassword,
  body.theme-system #cancelPassword,
  body.theme-system #uc,
  body.theme-system #us,
  body.theme-system #rp {
    background: #2c2c2e;
    color: #f5f5f7;
    border-color: #4a4a4d;
  }

  body.theme-system #logout,
  body.theme-system #stopPublic,
  body.theme-system .danger {
    background: #1c1c1e;
    color: #ff453a;
    border-color: #ff453a;
  }
}

/* Do not let inherited disabled-looking colors wash out active controls */
.modal button:not(:disabled) {
  -webkit-text-fill-color: currentColor;
}

/* Disabled controls only */
.modal button:disabled {
  opacity: .4;
}

/* Notes editor scrolling fix — iOS/PWA */
.editor {
    min-height: 0;
    overflow: hidden;
}

.body {
    min-height: 0;
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.toolbar,
.title,
.meta,
.bottom {
    flex-shrink: 0;
}

/* Notes v1.5.3 — reliable iPhone/PWA editor scrolling */

html,
body,
#root {
    height: 100%;
}

@media (max-width:900px) {

    .app {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .app.view-editor .editor {
        display: block;
        height: 100dvh;
        min-height: 0;
        overflow-y: auto !important;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    .editor .toolbar {
        position: relative;
        flex-shrink: 0;
    }

    .editor .body {
        display: block;
        height: auto !important;
        min-height: 50vh;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        padding-bottom: 80px;
        touch-action: auto;
    }

    .editor .bottom {
        flex-shrink: 0;
    }
}

/* Notes v1.5.4 — iOS full-page editor scrolling */
@media (max-width: 900px) {

    html,
    body,
    #root {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body {
        -webkit-overflow-scrolling: touch;
    }

    .app,
    .app.view-editor {
        display: block !important;
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .app.view-editor .editor {
        display: block !important;
        position: relative !important;
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .editor .body {
        display: block !important;
        position: relative !important;
        height: auto !important;
        min-height: 60vh !important;
        max-height: none !important;
        overflow: visible !important;
        flex: none !important;
        padding-bottom: 120px !important;
    }

    .editor .toolbar,
    .editor .title,
    .editor .meta,
    .editor .bottom {
        position: relative !important;
    }
}