* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:root {
  --bg: #f8f7f4;
  --bg2: #ffffff;
  --bg3: #f0efec;
  --bg4: #e5e3de;
  --tx: #1a1a1d;
  --tx2: #6b6b7b;
  --tx3: #9d9dab;
  --bd: #e2e0db;
  --bd2: #d2d0cb;
  --ac: #0d9488;
  --ac2: #14b8a6;
  --acg: rgba(13, 148, 136, .10);
  --acg2: rgba(13, 148, 136, .20);
  --red: #dc4444;
  --redg: rgba(220, 68, 68, .08);
  --gold: #d97706;
  --goldg: rgba(217, 119, 6, .08);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--tx);
  overflow: hidden;
  height: 100vh;
  height: 100dvh
}

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

button,
input,
textarea,
select {
  font-family: inherit;
  outline: none
}

::-webkit-scrollbar {
  width: 5px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
  border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .2)
}

::selection {
  background: var(--acg2);
  color: var(--tx)
}

.screen {
  display: none;
  width: 100%;
  height: 100vh;
  height: 100dvh
}

.screen.active {
  display: flex
}

/* ─── LOGIN ─── */
.login-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3f1ed 0%, #e8e6e0 50%, #f0eeea 100%);
  padding: 20px;
  position: relative;
  overflow: hidden
}

.login-wrap::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(13, 148, 136, .08) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%
}

.login-wrap::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(217, 119, 6, .06) 0%, transparent 70%);
  bottom: -80px;
  left: -80px;
  border-radius: 50%
}

.login-card {
  max-width: 380px;
  width: 100%;
  padding: 48px 36px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: 20px;
  box-shadow: 0 16px 64px rgba(0, 0, 0, .08);
  animation: slideUp .5s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
  z-index: 1
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.login-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 24px;
  box-shadow: 0 6px 20px var(--acg2)
}

.login-card h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2.5px;
  margin-bottom: 6px;
  color: var(--tx)
}

.login-card .sub {
  color: var(--tx2);
  font-size: 11px;
  margin-bottom: 28px;
  letter-spacing: 1.5px;
  text-transform: uppercase
}

.login-card input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  color: var(--tx);
  font-size: 15px;
  margin-bottom: 16px;
  transition: .25s
}

.login-card input::placeholder {
  color: var(--tx3)
}

.login-card input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
  background: #fff
}

.btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
  box-shadow: 0 4px 16px var(--acg2)
}

.btn-primary:hover {
  box-shadow: 0 6px 24px var(--acg2);
  transform: translateY(-1px)
}

.btn-primary:active {
  transform: scale(.98);
  box-shadow: 0 2px 8px var(--acg2)
}

.login-err {
  color: var(--red);
  font-size: 12px;
  margin-top: 8px;
  min-height: 16px;
  text-align: center
}

/* ─── APP LAYOUT ─── */
.app-layout {
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative
}

/* ─── SIDEBAR ─── */
.sidebar {
  width: 270px;
  background: var(--bg2);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform .3s ease;
  flex-shrink: 0
}

.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--bd)
}

.tab-btn {
  flex: 1;
  padding: 14px 12px;
  background: transparent;
  border: none;
  color: var(--tx3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  cursor: pointer;
  transition: .2s;
  position: relative
}

.tab-btn:hover {
  color: var(--tx);
  background: rgba(0, 0, 0, .02)
}

.tab-btn.active {
  color: var(--ac)
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2.5px;
  background: var(--ac);
  border-radius: 2px 2px 0 0
}

.tab-content {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0
}

.tab-content.active {
  display: flex
}

/* Search */
.search-wrap {
  padding: 10px 12px 4px;
  position: relative
}

.search-input {
  width: 100%;
  padding: 10px 12px 10px 34px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  font-size: 13px;
  color: var(--tx);
  transition: .2s
}

.search-input::placeholder {
  color: var(--tx3)
}

.search-input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
  background: #fff
}

.search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tx3);
  font-size: 14px;
  pointer-events: none
}

/* Actions */
.side-actions {
  padding: 8px 12px;
  display: flex;
  gap: 6px
}

.btn-new,
.btn-fold {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px
}

.btn-new {
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  box-shadow: 0 3px 12px var(--acg2)
}

.btn-new:hover {
  box-shadow: 0 4px 16px var(--acg2);
  transform: translateY(-1px)
}

.btn-new:active {
  transform: scale(.97)
}

.btn-fold {
  background: var(--bg);
  color: var(--tx2);
  border: 1.5px solid var(--bd)
}

.btn-fold:hover {
  background: var(--bg3);
  color: var(--tx);
  border-color: var(--bd2)
}

.btn-fold:active {
  transform: scale(.97)
}

/* Notes list */
.side-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 8px;
  -webkit-overflow-scrolling: touch
}

.folder-section {
  margin-bottom: 4px
}

.folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s;
  border: 2px solid transparent;
  user-select: none
}

.folder-head:hover {
  background: var(--bg3)
}

.folder-head.drag-over {
  background: var(--acg);
  border-color: var(--ac);
  transform: scale(1.02);
  box-shadow: 0 0 16px var(--acg2)
}

.folder-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0
}

.folder-arrow {
  font-size: 10px;
  color: var(--tx2);
  transition: transform .15s;
  flex-shrink: 0
}

.folder-head.collapsed .folder-arrow {
  transform: rotate(-90deg)
}

.folder-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.folder-count {
  font-size: 10px;
  color: var(--tx3);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 10px;
  flex-shrink: 0
}

.folder-acts {
  display: flex;
  gap: 3px;
  flex-shrink: 0
}

.folder-act {
  padding: 4px 8px;
  background: var(--bg3);
  border: none;
  border-radius: 6px;
  color: var(--tx2);
  font-size: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: .15s
}

.folder-act:hover {
  background: var(--bg4);
  color: var(--tx)
}

.folder-act.danger:hover {
  background: var(--redg);
  color: var(--red)
}

.folder-notes {
  padding-left: 14px;
  max-height: 2000px;
  overflow: hidden;
  transition: max-height .2s ease
}

.folder-notes.collapsed {
  max-height: 0
}

.note-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 2px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: grab;
  transition: .15s;
  position: relative;
  user-select: none;
  gap: 6px
}

.note-item:hover {
  background: var(--bg3)
}

.note-item.active {
  background: var(--acg);
  border-left: 3px solid var(--ac)
}

.note-item.dragging {
  opacity: .35;
  cursor: grabbing;
  background: var(--bg3)
}

.note-item:active {
  transform: scale(.98)
}

.note-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none
}

.note-title {
  font-weight: 500;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px
}

.note-date {
  font-size: 10px;
  color: var(--tx3)
}

.note-acts {
  display: none;
  gap: 2px;
  flex-shrink: 0
}

.note-item:hover .note-acts {
  display: flex
}

.note-act {
  width: 26px;
  height: 26px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s
}

.note-act:hover {
  background: var(--bg4);
  color: var(--tx)
}

.note-act.danger:hover {
  background: var(--redg);
  color: var(--red);
  border-color: rgba(220, 68, 68, .2)
}

.uncat-section {
  margin-top: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--bd);
  border: 2px solid transparent;
  border-radius: 10px;
  transition: .2s
}

.uncat-section.drag-over {
  background: var(--acg);
  border-color: var(--ac)
}

.uncat-head {
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3);
  letter-spacing: 1.2px;
  text-transform: uppercase
}

.empty-msg {
  padding: 14px;
  text-align: center;
  color: var(--tx3);
  font-size: 12px
}

/* Sidebar footer */
.side-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--bd);
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.btn-logout {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1.5px solid var(--bd);
  border-radius: 8px;
  color: var(--red);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .2s;
  min-width: 100%
}

.btn-logout:hover {
  background: var(--redg);
  border-color: rgba(220, 68, 68, .2)
}

.btn-logout:active {
  transform: scale(.98)
}

.btn-settings {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1.5px solid var(--bd);
  border-radius: 8px;
  color: var(--tx2);
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s
}

.btn-settings:hover {
  background: var(--bg3);
  color: var(--tx);
  border-color: var(--bd2)
}

/* ─── MAIN ─── */
.main-content {
  flex: 1;
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.empty-state-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px;
  display: none
}

@media(max-width:768px) {
  .empty-state-head {
    display: block
  }
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: .5
}

.empty-state h2 {
  color: var(--tx2);
  font-size: 16px;
  letter-spacing: .5px;
  font-weight: 600;
  text-align: center
}

.empty-state .hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--tx3);
  text-align: center
}

.shortcut-hints {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center
}

.shortcut-hint {
  font-size: 11px;
  color: var(--tx3)
}

.shortcut-hint kbd {
  background: var(--bg2);
  border: 1px solid var(--bd);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05)
}

/* Editor */
.note-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeIn .2s ease
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.editor-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--bg2)
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: .2s;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--acg2)
}

.menu-toggle:active {
  transform: scale(.95)
}

.title-input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: var(--tx);
  outline: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: .2s
}

.title-input:focus {
  border-bottom-color: var(--ac)
}

.title-input::placeholder {
  color: var(--tx3)
}

.editor-acts {
  display: flex;
  gap: 6px
}

.icon-btn {
  padding: 8px 14px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 8px;
  color: var(--tx);
  cursor: pointer;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .8px;
  transition: .2s
}

.icon-btn:hover {
  background: var(--bg3);
  border-color: var(--bd2)
}

.icon-btn:active {
  transform: scale(.95)
}

.icon-btn.ai {
  border-color: var(--acg2);
  color: var(--ac);
  background: var(--acg)
}

.icon-btn.ai:hover {
  background: var(--acg2)
}

.icon-btn.danger {
  border-color: rgba(220, 68, 68, .2);
  color: var(--red)
}

.icon-btn.danger:hover {
  background: var(--redg);
  border-color: rgba(220, 68, 68, .35)
}

.note-body {
  flex: 1;
  padding: 24px;
  background: var(--bg2);
  border: none;
  font-size: 15px;
  line-height: 1.9;
  color: var(--tx);
  resize: none;
  outline: none;
  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.note-body::placeholder {
  color: var(--tx3)
}

.editor-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--bd);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--tx2);
  letter-spacing: .5px;
  background: var(--bg)
}

.editor-foot .status {
  color: var(--ac)
}

/* ─── FILES VIEW ─── */
.files-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: fadeIn .2s ease;
  min-height: 0
}

.files-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2)
}

.files-head h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .5px;
  flex: 1
}

.upload-btn-main {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 3px 12px var(--acg2)
}

.upload-btn-main:hover {
  box-shadow: 0 5px 18px var(--acg2);
  transform: translateY(-1px)
}

.upload-btn-main:active {
  transform: scale(.98)
}

.files-grid {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-content: start;
  -webkit-overflow-scrolling: touch;
  min-height: 0
}

.file-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 12px;
  transition: .25s;
  cursor: default
}

.file-card:hover {
  background: var(--bg3);
  border-color: var(--bd2);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06)
}

.fc-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0
}

.fc-icon {
  font-size: 28px;
  flex-shrink: 0
}

.fc-details {
  flex: 1;
  min-width: 0
}

.fc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.fc-meta {
  font-size: 11px;
  color: var(--tx2);
  margin-top: 3px
}

.fc-acts {
  display: flex;
  gap: 6px
}

.fc-btn {
  padding: 7px 12px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 6px;
  color: var(--tx);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  cursor: pointer;
  transition: .2s
}

.fc-btn:hover {
  background: var(--bg3);
  border-color: var(--bd2)
}

.fc-btn.danger {
  color: var(--red);
  border-color: rgba(220, 68, 68, .2)
}

.fc-btn.danger:hover {
  background: var(--redg)
}

/* Upload progress */
.upload-bar {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 14px;
  padding: 14px 24px;
  min-width: 280px;
  z-index: 1000;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .1)
}

.upload-bar.active {
  display: block;
  animation: slideUp .3s ease
}

.upload-track {
  height: 3px;
  background: var(--bg4);
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative
}

.upload-track::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--ac), var(--ac2));
  border-radius: 2px;
  animation: progMove 1s ease infinite
}

@keyframes progMove {
  0% {
    left: -30%
  }

  100% {
    left: 100%
  }
}

.upload-txt {
  font-size: 11px;
  color: var(--tx2);
  letter-spacing: .5px
}

/* ─── POPUPS ─── */
.popup-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px)
}

.popup-bg.active {
  display: flex
}

.popup {
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 16px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .12);
  animation: popUp .3s cubic-bezier(.34, 1.56, .64, 1)
}

@keyframes popUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.96)
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
}

.popup h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 16px;
  color: var(--tx)
}

.popup label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tx2);
  letter-spacing: .5px;
  display: block;
  margin-bottom: 6px
}

.popup input,
.popup textarea {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  color: var(--tx);
  font-size: 14px;
  margin-bottom: 12px;
  transition: .2s;
  font-family: inherit
}

.popup input:focus,
.popup textarea:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
  background: #fff
}

.popup input::placeholder,
.popup textarea::placeholder {
  color: var(--tx3)
}

.popup-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px
}

.popup-opt {
  padding: 12px 14px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: .2s;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx)
}

.popup-opt:hover {
  background: var(--bg3);
  border-color: var(--bd2);
  transform: translateX(3px)
}

.popup-opt:active {
  transform: scale(.98)
}

.popup-opt.uncat {
  color: var(--tx2)
}

.popup-btns {
  display: flex;
  gap: 8px;
  margin-top: 4px
}

.popup-cancel {
  flex: 1;
  padding: 12px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 10px;
  color: var(--tx2);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .8px;
  cursor: pointer;
  transition: .2s
}

.popup-cancel:hover {
  background: var(--bg3)
}

.popup-ok {
  flex: 1;
  padding: 12px;
  background: linear-gradient(135deg, var(--ac), var(--ac2));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .8px;
  cursor: pointer;
  transition: .2s
}

.popup-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--acg2)
}

.popup-hint {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 8px;
  line-height: 1.5
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  padding: 12px 22px;
  border-radius: 12px;
  color: var(--tx);
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .1);
  opacity: 0;
  transition: .3s cubic-bezier(.16, 1, .3, 1);
  z-index: 5000;
  white-space: nowrap;
  letter-spacing: .3px
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

/* AI loading */
.ai-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg2);
  border: 1.5px solid var(--bd);
  border-radius: 16px;
  padding: 32px 40px;
  z-index: 1002;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
  text-align: center;
  display: none
}

.ai-loading.active {
  display: block;
  animation: popUp .3s ease
}

.ai-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--bg4);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 12px
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.ai-loading p {
  font-size: 13px;
  color: var(--tx2);
  font-weight: 500
}

.side-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 150;
  backdrop-filter: blur(2px)
}

.side-overlay.active {
  display: block
}

/* Mobile */
@media(max-width:768px) {
  .menu-toggle {
    display: flex
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 270px;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .08);
    background: var(--bg2)
  }

  .sidebar.mobile-open {
    transform: translateX(0)
  }

  .editor-head {
    padding: 10px 14px;
    gap: 8px
  }

  .note-body {
    padding: 16px;
    font-size: 14px
  }

  .editor-foot {
    padding: 8px 14px;
    font-size: 10px
  }

  .icon-btn {
    padding: 6px 10px;
    font-size: 10px
  }

  .files-head {
    padding: 12px 14px
  }

  .files-grid {
    grid-template-columns: 1fr;
    padding: 12px
  }

  .shortcut-hints {
    display: none
  }
}

@media(max-width:480px) {
  .sidebar {
    width: 260px
  }

  .login-card {
    padding: 36px 24px
  }

  .note-body {
    padding: 14px;
    font-size: 14px;
    line-height: 1.75
  }
}

/* ─── MIC BUTTON ─── */
.mic-btn {
  transition: .2s
}

.mic-btn.recording {
  background: var(--redg) !important;
  color: var(--red) !important;
  border-color: var(--red) !important;
  animation: pulse 1.5s infinite
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 68, 68, 0.3)
  }

  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(220, 68, 68, 0)
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 68, 68, 0)
  }
}

/* ─── LOGIN ERROR ─── */
.login-err {
  color: var(--red);
  font-size: 12px;
  margin-top: 10px;
  min-height: 16px;
  font-weight: 500
}

/* ─── LOADING OVERLAY ─── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(248, 247, 244, .7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px)
}

.loading-overlay.active {
  display: flex
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--bg4);
  border-top-color: var(--ac);
  border-radius: 50%;
  animation: spin .7s linear infinite
}

/* ─── SYNC STATUS ─── */
.sync-dot {
  font-size: 10px;
  margin-left: 8px;
  letter-spacing: .5px
}

/* ─── FILE ITEMS (Sidebar) ─── */
.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: 8px;
  cursor: grab;
  transition: .15s;
  user-select: none;
  gap: 6px
}

.file-item:hover {
  background: var(--bg3)
}

.file-item.dragging {
  opacity: .35;
  cursor: grabbing
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0
}

.file-icon {
  font-size: 16px;
  flex-shrink: 0
}

.file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.file-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0
}

.file-size {
  font-size: 10px;
  color: var(--tx3)
}

.file-acts {
  display: none;
  gap: 3px;
  flex-shrink: 0
}

.file-item:hover .file-acts {
  display: flex
}

.file-act-btn {
  width: 26px;
  height: 26px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s
}

.file-act-btn:hover {
  background: var(--bg4)
}

.file-act-btn.danger:hover {
  background: var(--redg);
  color: var(--red)
}

/* ─── GHOST DRAGGING ─── */
.ghost-dragging {
  opacity: .8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  border-radius: 8px;
  background: var(--bg2) !important;
  border: 2px solid var(--ac) !important
}

/* ─── FOLDER GRID HEADER ─── */
.folder-grid-header {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx2);
  padding: 8px 0 4px;
  margin-top: 8px
}

.folder-grid-header:first-child {
  margin-top: 0
}

/* ─── POPUP OPT ACTIVE ─── */
.popup-opt.active {
  background: var(--acg);
  border-color: var(--ac);
  color: var(--ac);
  font-weight: 600
}