@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0F0E1E;
  --panel:#171529;
  --panel-soft:#1D1B34;
  --card:#211F3A;
  --line:#2E2B4E;
  --text:#EEEEEE;
  --text-soft:#A8A8A8;
  --text-faint:#7A7A7A;
  --gold:#D9A441;
  --green:#3FA85C;
  --red:#D9534F;
}
:root[data-theme="light"]{
  --bg:#F7F5F2;
  --panel:#FFFFFF;
  --panel-soft:#F1EFEA;
  --card:#FFFFFF;
  --line:#E1DED6;
  --text:#211F1D;
  --text-soft:#6B6862;
  --text-faint:#9C9891;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
h1{ font-family:'Fraunces',serif; font-weight:600; margin:0; }
input,textarea,button{ font-family:inherit; }
.hidden{ display:none !important; }

/* ---------- Login ---------- */
#loginScreen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card{ background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:36px 30px; width:100%; max-width:380px; }
.login-card h1{ font-size:24px; text-align:center; margin-bottom:4px; }
.login-card .sub{ text-align:center; color:var(--text-soft); font-size:13.5px; margin-bottom:24px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:12.5px; color:var(--text-soft); margin-bottom:6px; }
input[type=text],input[type=email],input[type=password],input[type=search]{
  width:100%; background:var(--panel-soft); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; color:var(--text); font-size:14px; outline:none;
}
input:focus{ border-color:var(--gold); }
.btn{ border:0; border-radius:10px; padding:11px 18px; font-size:14.5px; font-weight:600; cursor:pointer; }
.btn-gold{ background:var(--gold); color:#2B1A03; }
.btn-block{ width:100%; }
.error{ color:var(--red); font-size:13px; text-align:center; margin-top:12px; }

/* ---------- App shell ---------- */
#app{ display:flex; flex-direction:column; height:100vh; }

.topbar{
  display:flex; align-items:center; gap:18px; padding:10px 16px;
  background:var(--panel); border-bottom:1px solid var(--line); flex-shrink:0; flex-wrap:wrap;
}
.brand{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.brand span{ display:inline; }
.topbar-actions{ display:flex; gap:6px; flex-wrap:wrap; flex:1; }
.tbtn{
  background:var(--panel-soft); border:1px solid var(--line); color:var(--text);
  padding:7px 12px; border-radius:8px; font-size:13px; cursor:pointer; white-space:nowrap;
}
.tbtn:hover{ border-color:var(--text-faint); }
.tbtn-gold{ background:var(--gold); border-color:var(--gold); color:#2B1A03; font-weight:600; }
.tbtn-danger:hover{ background:rgba(217,83,79,.15); border-color:var(--red); color:var(--red); }
.topbar-status{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--text-soft); white-space:nowrap; }
#saveStatus.saving{ color:var(--gold); }
#saveStatus.error{ color:var(--red); }
.topbar-status button{ background:none; border:0; color:var(--text-soft); font-size:18px; cursor:pointer; }

.theme-panel{
  position:absolute; top:44px; right:16px; z-index:20; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.theme-panel p{ font-size:12px; color:var(--text-soft); margin:0 0 10px; }
.theme-mode-row{ display:flex; gap:8px; margin-bottom:16px; }
.theme-mode-btn{
  flex:1; background:var(--panel-soft); border:1px solid var(--line); color:var(--text);
  padding:8px 12px; border-radius:8px; font-size:13px; cursor:pointer;
}
.theme-mode-btn.active{ background:var(--gold); border-color:var(--gold); color:#2B1A03; font-weight:600; }
.theme-swatches{ display:flex; gap:8px; }
.theme-swatches .sw{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; }
.theme-swatches .sw.active{ border-color:var(--text); }

.filter-row{
  display:flex; align-items:center; gap:8px; padding:9px 16px; overflow-x:auto;
  background:var(--panel); border-bottom:1px solid var(--line); flex-shrink:0;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar{ display:none; }
.filter-chip{
  flex-shrink:0; background:var(--panel-soft); border:1px solid var(--line); color:var(--text-soft);
  padding:6px 13px; border-radius:16px; font-size:12.5px; cursor:pointer; white-space:nowrap;
}
.filter-chip.active{ background:var(--gold); border-color:var(--gold); color:#2B1A03; font-weight:600; }
.filter-sep{ width:1px; height:20px; background:var(--line); flex-shrink:0; margin:0 2px; }
.tag-chips-inline{ display:flex; gap:8px; }

/* ---------- Layout principal ---------- */
.main-layout{ flex:1; display:flex; min-height:0; }

.sidebar{
  width:300px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; min-height:0;
}
.sidebar-search{ padding:12px; border-bottom:1px solid var(--line); }
.note-list{ flex:1; overflow-y:auto; }
.note-list-item{
  padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; position:relative;
}
.note-list-item:hover{ background:var(--panel-soft); }
.note-list-item .nli-title{ font-weight:600; font-size:14px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:16px; }
.note-list-item .nli-preview{ font-size:12.5px; color:var(--text-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.note-list-item .nli-meta{ display:flex; align-items:center; gap:6px; margin-top:5px; }
.note-list-item .nli-date{ font-size:11px; color:var(--text-faint); }
.note-list-item .nli-tag{ font-size:10px; background:var(--panel-soft); color:var(--text-soft); padding:1px 7px; border-radius:8px; }
.note-list-item .nli-pin{ position:absolute; top:12px; right:12px; font-size:12px; color:var(--gold); }
.note-list-empty{ text-align:center; color:var(--text-faint); padding:30px 16px; font-size:13.5px; }

/* ---------- Editor ---------- */
.editor-pane{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; }
.no-note-state{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:15px; }
.editor-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; }

.editor-head{ display:flex; align-items:center; gap:10px; padding:14px 20px 8px; }
#noteTitle{ flex:1; background:none; border:0; font-size:19px; font-weight:600; color:var(--text); outline:none; font-family:'Fraunces',serif; }
.editor-head-actions{ display:flex; gap:4px; }
.icon-toggle{ background:none; border:0; color:var(--text-faint); font-size:17px; cursor:pointer; padding:6px; border-radius:8px; }
.icon-toggle:hover{ background:var(--panel-soft); color:var(--text); }
.icon-toggle.active{ color:var(--gold); }
.note-colors{ display:flex; gap:6px; flex-shrink:0; }
.note-colors .sw{ width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent; flex-shrink:0; }
.note-colors .sw.active{ border-color:var(--text); }

.note-list-item{ border-left:3px solid transparent; }
.note-list-item.color-red{ border-left-color:#E05B5B; background:linear-gradient(90deg, #E05B5B18, transparent 60%); }
.note-list-item.color-orange{ border-left-color:#E08A3F; background:linear-gradient(90deg, #E08A3F18, transparent 60%); }
.note-list-item.color-amber{ border-left-color:#D9B341; background:linear-gradient(90deg, #D9B34118, transparent 60%); }
.note-list-item.color-green{ border-left-color:#4CAF7D; background:linear-gradient(90deg, #4CAF7D18, transparent 60%); }
.note-list-item.color-teal{ border-left-color:#3FBFA8; background:linear-gradient(90deg, #3FBFA818, transparent 60%); }
.note-list-item.color-blue{ border-left-color:#4C8FE0; background:linear-gradient(90deg, #4C8FE018, transparent 60%); }
.note-list-item.color-purple{ border-left-color:#9B6FE0; background:linear-gradient(90deg, #9B6FE018, transparent 60%); }
.note-list-item.color-pink{ border-left-color:#D46FA0; background:linear-gradient(90deg, #D46FA018, transparent 60%); }
.note-list-item.color-gray{ border-left-color:#8A879E; background:linear-gradient(90deg, #8A879E18, transparent 60%); }
.note-list-item.active{ border-left-width:3px; border-left-style:solid; box-shadow:inset 0 0 0 1px var(--line); }
.note-list-item.active.color-default{ background:var(--card); border-left-color:var(--gold); }

.rt-toolbar{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 20px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel-soft);
}
.rt-toolbar button{
  background:var(--card); border:1px solid var(--line); color:var(--text);
  min-width:28px; height:28px; border-radius:6px; cursor:pointer; font-size:13px; padding:0 6px;
}
.rt-toolbar button:hover{ border-color:var(--gold); }
.rt-toolbar button.active{ background:var(--gold); border-color:var(--gold); color:#2B1A03; }
.rt-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; flex-shrink:0; }
.rt-label{ font-size:11.5px; color:var(--text-faint); margin-right:2px; }
.rt-colors{ display:flex; gap:4px; }
.rt-colors .sw{ width:18px; height:18px; border-radius:50%; cursor:pointer; border:1.5px solid var(--line); }
#rtClearBtn{ font-size:11.5px !important; color:var(--text-soft); }

.note-body{
  flex:1; overflow-y:auto; padding:16px 20px; font-size:14.5px; line-height:1.7; outline:none;
}
.note-body:empty::before{ content:'Escreva aqui...'; color:var(--text-faint); }
.note-body ul, .note-body ol{ padding-left:24px; }

.editor-footer{
  display:flex; align-items:center; gap:14px; padding:10px 20px; border-top:1px solid var(--line);
}
#noteTagsInput{ flex:1; background:var(--panel-soft); border:1px solid var(--line); border-radius:8px; padding:7px 11px; font-size:13px; }
#wordCount{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }

/* ---------- Mobile ---------- */
@media (max-width:800px){
  .main-layout{ position:relative; }
  .sidebar{ width:100%; position:absolute; inset:0; z-index:5; }
  .sidebar.hidden-mobile{ display:none; }
  .editor-pane.hidden-mobile{ display:none; }
  .topbar{ padding:10px 12px; }
  .brand span{ display:none; }
  .topbar-actions{ order:3; width:100%; }
}

/* ---------- Toast ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel-soft); border:1px solid var(--line); color:var(--text);
  padding:12px 20px; border-radius:12px; font-size:14px; opacity:0; pointer-events:none;
  transition:all .25s ease; z-index:100; max-width:90vw; text-align:center;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Impressão ---------- */
#printArea{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #printArea, #printArea *{ visibility:visible; }
  #printArea{ display:block; position:absolute; top:0; left:0; width:100%; padding:30px; color:#000; background:#fff; }
  #printArea h2{ font-family:serif; }
}