*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#faf8f5;--fg:#1f1a14;--card:#f5f0ea;--card-fg:#1f1a14;
  --primary:#e88a1a;--primary-fg:#fff;--secondary:#ece6df;--secondary-fg:#3d3529;
  --muted:#f0ebe5;--muted-fg:#7a7062;--accent:#fcecd8;--accent-fg:#8b5a0a;
  --destructive:#e04848;--border:#e0d8ce;--ring:#e88a1a;
  --shadow:0 1px 3px rgba(31,26,20,.06);--shadow-hover:0 4px 12px rgba(31,26,20,.1);
  --font:'Inter',system-ui,sans-serif;
}
.dark{
  --bg:#171b24;--fg:#d8dce6;--card:#1e2230;--card-fg:#d8dce6;
  --primary:#e8a020;--primary-fg:#141720;--secondary:#262b38;--secondary-fg:#b8bcc8;
  --muted:#222736;--muted-fg:#7a8098;--accent:#3a2e1e;--accent-fg:#d4a040;
  --destructive:#c84040;--border:#2a2f3e;--ring:#e8a020;
  --shadow:0 1px 3px rgba(0,0,0,.2);--shadow-hover:0 4px 12px rgba(0,0,0,.3);
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body{font-family:var(--font);background:var(--bg);color:var(--fg);height:100vh;display:flex;flex-direction:column;overflow:hidden;transition:background .2s,color .2s}
button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}
input,textarea{font:inherit;color:inherit}

/* Header */
.header{height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--card);flex-shrink:0}
.header-left,.header-right{display:flex;align-items:center;gap:8px}
.header h1{font-size:1.125rem;font-weight:600;letter-spacing:-.02em}
.icon-btn{padding:8px;border-radius:8px;transition:background .15s}
.icon-btn:hover{background:var(--secondary)}
.icon-btn svg{width:20px;height:20px}

/* Layout */
.layout{display:flex;flex:1;overflow:hidden;position:relative}

/* Sidebar */
.sidebar{width:288px;height:100%;border-right:1px solid var(--border);background:var(--card);display:flex;flex-direction:column;transition:transform .2s;z-index:20}
.sidebar.closed{transform:translateX(-100%);position:absolute}
.overlay{display:none;position:absolute;inset:0;background:rgba(31,26,20,.2);z-index:10}
.overlay.show{display:block}
.search-box{padding:12px}
.search-box input{width:100%;padding:8px 12px 8px 36px;border-radius:8px;background:var(--secondary);border:none;outline:none;font-size:.875rem;color:var(--secondary-fg);transition:box-shadow .15s}
.search-box input:focus{box-shadow:0 0 0 2px var(--ring)}
.search-box{position:relative}
.search-box svg{position:absolute;left:24px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-fg)}
.notes-list{flex:1;overflow-y:auto;padding:0 8px 8px}
.note-item{width:100%;text-align:left;padding:12px;border-radius:8px;transition:all .15s;margin-bottom:4px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.note-item:hover{background:var(--secondary)}
.note-item.active{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow)}
.note-item .info{min-width:0;flex:1}
.note-item .title{font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-item .preview{font-size:.75rem;color:var(--muted-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.note-item .date{font-size:10px;color:var(--muted-fg);margin-top:4px}
.note-item .actions{display:flex;gap:4px;opacity:0;transition:opacity .15s;flex-shrink:0}
.note-item:hover .actions{opacity:1}
.note-item .actions button{padding:4px;border-radius:4px}
.note-item .actions button:hover{background:rgba(0,0,0,.06)}
.note-item .actions svg{width:14px;height:14px}
.note-item .pin-active{color:var(--primary);opacity:1!important}
.empty-msg{text-align:center;color:var(--muted-fg);font-size:.875rem;padding:32px 0}

/* Editor */
.editor{flex:1;display:flex;flex-direction:column;overflow:hidden}
.editor-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted-fg);gap:12px}
.editor-placeholder svg{width:64px;height:64px;opacity:.2}
.toolbar{display:flex;align-items:center;justify-content:space-between;padding:18px 156px; margin: 18px; border-bottom:1px solid var(--accent-fg); border-width: 4px; flex-wrap:wrap;gap:8px}
.toolbar-left{display:flex;gap:4px}
.toolbar button{padding:8px;border-radius:6px;transition:background .15s;}
.toolbar button:hover{background:var(--secondary)}
.toolbar svg{width:16px;height:16px}
.toolbar-right{display:flex;align-items:center;gap:12px;font-size:.75rem;color:var(--muted-fg)}
.toolbar-right button{display:flex;align-items:center;gap:4px;transition:color .15s}
.toolbar-right button:hover{color:var(--fg)}
.title-input{padding:24px 24px 8px;font-size:1.5rem;font-weight:600;background:transparent;border:none;outline:none;width:100%}
.title-input::placeholder{color:var(--muted-fg);opacity:.5}
.timestamps{padding:0 24px 12px;display:flex;gap:16px;font-size:11px;color:var(--muted-fg)}
.content-area{flex:1;padding:0 24px 24px;background:transparent;border:none;outline:none;resize:none;font-size:15px;line-height:1.7;width:100%}
.content-area::placeholder{color:var(--muted-fg);opacity:.4}

/* FAB */
.fab{position:absolute;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background-color:rgb(255, 153, 0);color:var(--primary-fg);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:30;transition:transform .15s}
.fab:hover{transform:scale(1.05)}
.fab:active{transform:scale(.95)}
.fab svg{width:24px;height:24px}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:12px;padding:24px;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal h2{font-size:1.25rem;font-weight:600;margin-bottom:4px}
.modal p{color:var(--muted-fg);font-size:.875rem;margin-bottom:16px}
.modal .dev{font-weight:600;color:var(--primary)}
.modal button.close-btn{margin-top:12px;width:100%;padding:10px;border-radius:8px;background:var(--secondary);font-weight:500;transition:background .15s}
.modal button.close-btn:hover{background:var(--border)}

@media(min-width:1024px){
  .sidebar{position:relative!important;transform:none!important}
  .menu-btn{display:none}
  .overlay{display:none!important}
}
@media(max-width:1023px){
  .sidebar{position:absolute}
}

.modal-overlay {
  display: none;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* spacing */
  font-size: 16px;
  gap: 10px;
  flex-wrap: nowrap; /* FORCE single line */
  padding: 12px;
}

.modal-overlay.active {
  display: flex;
}

/* Sidebar default hidden (mobile style) */
.sidebar {
  transform: translateX(-100%);
  transition: 0.3s;
}

/* When active → show */
.sidebar.active {
  transform: translateX(0);
}

/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

@media (max-width: 768px) {
.fab {
  position: fixed;  /* 🔥 KEY FIX */
  bottom: 24px;
  right: 24px;
  z-index: 999;
}

  .note-item .actions {
    opacity: 1;   /* always visible on mobile */
  }
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}