/* =========================================================
   Glassmorphism Dark Notes App — Core Stylesheet
   ========================================================= */

:root{
  --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
  --bg-root: #000000;
  --bg-graphite: #0a0a0c;
  --glass-bg: rgba(255,255,255,0.05);
  --glass-bg-strong: rgba(255,255,255,0.09);
  --glass-border: rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --accent: #0a84ff;
  --accent-soft: rgba(10,132,255,0.35);
  --danger: #ff453a;
  --success: #30d158;
  --warning: #ff9f0a;
  --text-primary: rgba(255,255,255,0.94);
  --text-secondary: rgba(255,255,255,0.56);
  --text-tertiary: rgba(255,255,255,0.34);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: radial-gradient(circle at 20% -10%, #131316 0%, #000000 55%), #000;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Noto Sans JP", Inter, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#app-root{ height:100vh; width:100vw; position:relative; }

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.15); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.28); }

/* ---------- Utility: Glass panel ---------- */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
}
.glass-strong{
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
}

/* ---------- Transitions ---------- */
.ease-apple{ transition: all 0.45s var(--ease-apple); }
.ease-apple-fast{ transition: all 0.25s var(--ease-apple); }

/* ---------- Auth Screen ---------- */
#auth-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(10,132,255,0.12), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(120,80,255,0.10), transparent 45%),
    #000;
  z-index: 50;
}
.auth-card{
  width: 100%; max-width: 400px; padding: 40px 36px;
  border-radius: 28px;
  animation: floatIn 0.7s var(--ease-apple);
}
@keyframes floatIn{
  from{ opacity:0; transform: translateY(18px) scale(0.97); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.auth-logo{
  width: 56px; height:56px; border-radius:16px;
  background: linear-gradient(145deg, #2a2a2e, #0d0d10);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 18px; font-size: 26px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.auth-input{
  width:100%; padding: 13px 16px; border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 15px; outline: none;
  transition: all 0.25s var(--ease-apple);
}
.auth-input::placeholder{ color: var(--text-tertiary); }
.auth-input:focus{
  background: rgba(255,255,255,0.09);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(10,132,255,0.15);
}
.btn-primary{
  background: linear-gradient(145deg, #0a84ff, #0066d6);
  color: white; border: none; border-radius: 14px;
  padding: 13px 16px; font-weight: 600; font-size: 15px;
  cursor:pointer; transition: all 0.25s var(--ease-apple);
  box-shadow: 0 6px 20px rgba(10,132,255,0.35);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 26px rgba(10,132,255,0.45); }
.btn-primary:active{ transform: translateY(0) scale(0.98); }
.btn-primary:disabled{ opacity:0.5; cursor:not-allowed; box-shadow:none; }

.btn-ghost{
  background: transparent; border: none; color: var(--text-secondary);
  cursor:pointer; font-size: 14px; transition: color 0.2s;
}
.btn-ghost:hover{ color: var(--text-primary); }

.auth-toggle-tab{
  padding: 8px 0; text-align:center; flex:1; cursor:pointer;
  color: var(--text-tertiary); font-weight:600; font-size: 14px;
  border-bottom: 2px solid transparent; transition: all 0.25s var(--ease-apple);
}
.auth-toggle-tab.active{ color: var(--text-primary); border-bottom-color: var(--accent); }

.checkbox-row{ display:flex; align-items:center; gap:10px; user-select:none; cursor:pointer; }
.checkbox-box{
  width:20px; height:20px; border-radius:6px; border: 1.5px solid var(--glass-border-strong);
  display:flex; align-items:center; justify-content:center; transition: all 0.2s var(--ease-apple);
  background: rgba(255,255,255,0.04); flex-shrink:0;
}
.checkbox-box.checked{ background: var(--accent); border-color: var(--accent); }
.checkbox-box i{ font-size: 11px; color:white; opacity:0; transform: scale(0.5); transition: all 0.2s var(--ease-apple); }
.checkbox-box.checked i{ opacity:1; transform: scale(1); }

.auth-error{
  background: rgba(255,69,58,0.12); border: 1px solid rgba(255,69,58,0.3);
  color: #ff8078; padding: 10px 14px; border-radius: 12px; font-size: 13px;
}

/* ---------- App Shell (3-pane) ---------- */
#app-screen{ display:none; height:100vh; width:100vw; }
.app-shell{
  display: flex; height: 100%; width:100%; padding: 10px; gap: 10px;
}

/* ---------- Sidebar ---------- */
#sidebar{
  width: 260px; flex-shrink:0; border-radius: 20px;
  display:flex; flex-direction:column; overflow:hidden;
  transition: width 0.4s var(--ease-apple), opacity 0.3s var(--ease-apple), margin 0.4s var(--ease-apple);
}
#sidebar.collapsed{ width:0; opacity:0; margin-left:-10px; border:none; }

.sidebar-header{ padding: 18px 16px 10px; }
.sidebar-title{ font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.sidebar-user{ font-size: 12px; color: var(--text-tertiary); margin-top:2px; }

.sidebar-scroll{ flex:1; overflow-y:auto; padding: 6px 12px 12px; }
.sidebar-section-label{
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-tertiary); margin: 16px 10px 6px;
}

.nav-item{
  display:flex; align-items:center; gap:10px; padding: 9px 10px; border-radius: 10px;
  cursor:pointer; color: var(--text-secondary); font-size: 14px; font-weight: 500;
  transition: all 0.2s var(--ease-apple); position:relative;
}
.nav-item i.nav-icon{ width:18px; text-align:center; font-size:14px; }
.nav-item:hover{ background: rgba(255,255,255,0.06); color: var(--text-primary); }
.nav-item.active{ background: var(--accent-soft); color: white; }
.nav-item.active i.nav-icon{ color: white; }
.nav-item .count{ margin-left:auto; font-size:11px; color: var(--text-tertiary); }
.nav-item.drop-hover{ background: rgba(10,132,255,0.28); outline: 1.5px dashed var(--accent); }

.category-item{ display:flex; align-items:center; gap:8px; }
.category-item .cat-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.category-item .cat-actions{ margin-left:auto; display:none; gap:6px; }
.category-item:hover .cat-actions{ display:flex; }
.cat-actions i{ font-size:11px; color: var(--text-tertiary); cursor:pointer; padding:3px; }
.cat-actions i:hover{ color: var(--text-primary); }

.add-category-btn{
  display:flex; align-items:center; gap:8px; padding: 9px 10px; border-radius:10px;
  color: var(--text-tertiary); font-size: 13px; cursor:pointer; transition: all 0.2s;
}
.add-category-btn:hover{ color: var(--accent); background: rgba(255,255,255,0.04); }

.cat-inline-input{
  width:100%; background: rgba(255,255,255,0.08); border: 1px solid var(--accent-soft);
  border-radius: 8px; padding: 6px 8px; color: white; font-size: 13px; outline:none;
}

.sidebar-footer{ padding: 12px 14px; border-top: 1px solid var(--glass-border); }
.logout-btn{
  display:flex; align-items:center; gap:8px; color: var(--text-tertiary); font-size: 13px;
  cursor:pointer; transition: color 0.2s;
}
.logout-btn:hover{ color: var(--danger); }

/* ---------- Note List ---------- */
#note-list-pane{
  width: 340px; flex-shrink:0; border-radius: 20px; display:flex; flex-direction:column; overflow:hidden;
  transition: width 0.4s var(--ease-apple);
}
.note-list-header{ padding: 16px 16px 10px; border-bottom: 1px solid var(--glass-border); }
.pane-toolbar{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.icon-btn{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border); color: var(--text-secondary);
  cursor:pointer; transition: all 0.2s var(--ease-apple); flex-shrink:0;
}
.icon-btn:hover{ background: rgba(255,255,255,0.1); color: var(--text-primary); transform: translateY(-1px); }
.icon-btn.accent{ background: var(--accent); color:white; border-color: transparent; }
.icon-btn.accent:hover{ box-shadow: 0 4px 16px rgba(10,132,255,0.4); }

.search-box{
  flex:1; display:flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
}
.search-box input{
  flex:1; background:transparent; border:none; outline:none; color: var(--text-primary); font-size: 13px;
}
.search-box input::placeholder{ color: var(--text-tertiary); }
.search-box i{ color: var(--text-tertiary); font-size: 13px; }

.folder-title{ font-size: 20px; font-weight: 700; padding: 2px 2px 8px; letter-spacing:-0.2px; }

.note-list-scroll{ flex:1; overflow-y:auto; padding: 8px; }
.note-card{
  padding: 12px 12px; border-radius: 14px; margin-bottom: 6px; cursor: pointer;
  transition: all 0.25s var(--ease-apple); border: 1px solid transparent;
}
.note-card:hover{ background: rgba(255,255,255,0.05); }
.note-card.active{ background: var(--accent-soft); border-color: rgba(10,132,255,0.4); }
.note-card.dragging{ opacity: 0.4; }
.note-card-top{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.note-card-title{ font-size:14.5px; font-weight:600; color: var(--text-primary); flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-card-pin{ color: var(--warning); font-size: 11px; }
.note-card-meta{ font-size: 11.5px; color: var(--text-tertiary); margin-bottom: 4px; display:flex; gap:6px; align-items:center;}
.note-card-meta .cat-chip{ padding: 1px 7px; border-radius: 20px; font-size: 10.5px; }
.note-card-preview{
  font-size: 12.5px; color: var(--text-secondary); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; color: var(--text-tertiary); text-align:center; padding: 30px; gap:10px;
}
.empty-state i{ font-size: 34px; opacity:0.5; }

/* ---------- Editor Pane ---------- */
#editor-pane{ flex:1; border-radius: 20px; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.editor-header{
  display:flex; align-items:center; gap:10px; padding: 14px 22px; border-bottom: 1px solid var(--glass-border);
}
.editor-header .spacer{ flex:1; }
.save-indicator{
  display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-tertiary);
  padding: 6px 12px; border-radius: 20px; background: rgba(255,255,255,0.05);
  border:1px solid var(--glass-border); transition: all 0.35s var(--ease-apple);
}
.save-indicator .dot{ width:7px; height:7px; border-radius:50%; background: var(--text-tertiary); transition: all 0.3s; }
.save-indicator.local .dot{ background: var(--warning); }
.save-indicator.syncing .dot{ background: var(--accent); animation: pulse 1s infinite; }
.save-indicator.synced .dot{ background: var(--success); }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.7); } }

.editor-body{ flex:1; overflow-y:auto; padding: 10px 40px 60px; }
.editor-title-input{
  width:100%; background:transparent; border:none; outline:none; color: var(--text-primary);
  font-size: 30px; font-weight: 700; letter-spacing: -0.4px; margin: 18px 0 6px; font-family: inherit;
}
.editor-title-input::placeholder{ color: var(--text-tertiary); }
.editor-submeta{ font-size: 12px; color: var(--text-tertiary); margin-bottom: 18px; }

.md-toolbar{
  display:flex; gap:4px; opacity: 0.35; transition: opacity 0.3s var(--ease-apple); flex-wrap:wrap;
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--glass-border);
}
.editor-body:focus-within .md-toolbar{ opacity: 1; }
.md-btn{
  width: 30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px;
  color: var(--text-secondary); font-size:12.5px; cursor:pointer; transition: all 0.2s;
}
.md-btn:hover{ background: rgba(255,255,255,0.08); color: var(--text-primary); }

.editor-content-textarea{
  width:100%; min-height: 50vh; background:transparent; border:none; outline:none; resize:none;
  color: var(--text-primary); font-size: 16px; line-height: 1.75; font-family: inherit;
}
.editor-content-textarea::placeholder{ color: var(--text-tertiary); }

.editor-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;
  color: var(--text-tertiary); gap: 14px;
}
.editor-empty i{ font-size: 46px; opacity:0.4; }

/* ---------- Toast ---------- */
#toast-container{ position: fixed; bottom: 24px; right: 24px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.toast{
  padding: 12px 18px; border-radius: 14px; font-size: 13px; min-width: 220px;
  animation: toastIn 0.4s var(--ease-apple);
  display:flex; align-items:center; gap:10px;
}
@keyframes toastIn{ from{ opacity:0; transform: translateX(20px); } to{ opacity:1; transform: translateX(0); } }
.toast.success i{ color: var(--success); }
.toast.error i{ color: var(--danger); }
.toast.info i{ color: var(--accent); }

/* ---------- Modal (confirm) ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,0.55); display:flex; align-items:center; justify-content:center;
  z-index: 150; opacity:0; pointer-events:none; transition: opacity 0.3s var(--ease-apple);
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-box{
  width: 340px; padding: 24px; border-radius: 20px; text-align:center;
  transform: scale(0.92); transition: transform 0.35s var(--ease-apple);
}
.modal-overlay.show .modal-box{ transform: scale(1); }
.modal-box h3{ margin:0 0 8px; font-size:16px; }
.modal-box p{ margin:0 0 18px; font-size:13px; color: var(--text-secondary); }
.modal-actions{ display:flex; gap:10px; }
.modal-actions button{ flex:1; padding:10px; border-radius:12px; font-size:13px; font-weight:600; cursor:pointer; border:none; }
.modal-btn-cancel{ background: rgba(255,255,255,0.08); color: var(--text-primary); }
.modal-btn-danger{ background: var(--danger); color:white; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  #sidebar{ position:absolute; z-index:40; height: calc(100% - 20px); }
  #note-list-pane{ width: 100%; }
  #editor-pane.mobile-hide, #note-list-pane.mobile-hide{ display:none; }
  .mobile-back-btn{ display:flex !important; }
}
.mobile-back-btn{ display:none; }