* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Microsoft YaHei', sans-serif;
  background: #f5f5f5;
  min-height: 100vh;
  overflow-x: hidden;
}
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 100;
}
.nav-buttons {
  display: flex;
  gap: 12px;
}
.right-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.nav-btn {
  padding: 10px 20px;
  border: none;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nav-btn:hover {
  background: rgba(129,199,35,0.15);
  color: #81c723;
}
.nav-btn.active {
  background: #81c723;
  color: #fff;
}
.float-completed {
  font-size: 13px;
  color: #666;
  background: rgba(255,255,255,0.9);
  padding: 8px 16px;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.float-completed:hover {
  background: rgba(129,199,35,0.1);
  color: #81c723;
}
.main-canvas {
  padding: 80px 20px 80px;
  min-height: 100vh;
  position: relative;
  transition: background 0.3s;
}
.canvas-grid {
  background-image:
    linear-gradient(#ddd 1px, transparent 1px),
    linear-gradient(90deg, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}
.canvas-dots {
  background-image: radial-gradient(#bbb 1px, transparent 1px);
  background-size: 20px 20px;
}
.canvas-paper {
  background-color: #2d2d2d;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}
.canvas-darkDots {
  background-color: #1a1a2e;
  background-image: 
    radial-gradient(rgba(99, 102, 241, 0.25) 3px, transparent 3px),
    radial-gradient(rgba(236, 72, 153, 0.2) 3px, transparent 3px);
  background-size: 96px 96px;
  background-position: 0 0, 48px 48px;
}
.canvas-plain { background: #f0f0f0; }
.note-card {
  position: absolute;
  width: 280px;
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  cursor: default;
  transition: box-shadow 0.3s;
  user-select: none;
  overflow: hidden;
}
.note-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.note-card.dragging { opacity: 0.9; cursor: grabbing; z-index: 1000; }
.note-card-header {
  padding: 12px 16px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.note-card-header:active { cursor: grabbing; }
.card-title {
  font-weight: bold;
  font-size: 15px;
  color: #fff;
  flex: 1;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.card-radio {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10px;
  transition: all 0.3s;
  background: rgba(255,255,255,0.15);
}
.card-radio:hover { border-color: #fff; background: rgba(255,255,255,0.25); }
.card-radio.checked {
  background: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.9);
}
.card-radio.checked::after {
  content: '✓';
  color: #81c723;
  font-size: 11px;
  font-weight: bold;
}
.card-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  margin-right: 8px;
}
.card-star-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
  margin-right: 8px;
}
.card-star-btn:hover {
  color: rgba(255,255,255,0.9);
}
.card-star-btn.starred {
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255,215,0,0.5);
}
.card-action-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
  background: rgba(255,255,255,0.2);
  color: #fff;
}
.card-action-btn:hover {
  background: rgba(255,255,255,0.35);
}
.note-card-body {
  background: #fffef0;
  padding: 12px 16px;
}
.note-card-body.body-min-height {
  min-height: 80px;
}
.card-content {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  line-height: 1.5;
}
.subtask-list { margin-bottom: 10px; }
.subtask-item {
  display: flex;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  color: #555;
}
.subtask-item.sub-done { color: #aaa; text-decoration: line-through; }
.subtask-checkbox {
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-radius: 3px;
  margin-right: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.subtask-checkbox:hover { border-color: #81c723; }
.subtask-checkbox.checked {
  background: #81c723;
  border-color: #81c723;
}
.subtask-checkbox.checked::after {
  content: '✓';
  color: #fff;
  font-size: 9px;
}
.subtask-text { word-break: break-word; }
.progress-bar {
  height: 5px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #81c723, #9ed444);
  border-radius: 3px;
  transition: width 0.3s;
}
.progress-text {
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.show { display: flex; }
.modal {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  width: 90%;
  max-width: 460px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.modal-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-title-bar {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  flex: 1;
}
.modal-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.2s;
}
.modal-close-btn:hover {
  background: rgba(0,0,0,0.1);
  color: #333;
}
.modal-content {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(90vh - 60px);
}
.form-group { margin-bottom: 16px; }
.form-label {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  display: block;
}
.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  background: rgba(255,255,255,0.9);
}
.form-input:focus { border-color: #81c723; }
textarea.form-input { resize: vertical; min-height: 80px; }
select.form-input { cursor: pointer; }
.subtask-edit-list { margin-bottom: 10px; max-height: 150px; overflow-y: auto; }
.subtask-edit-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0,0,0,0.04);
  border-radius: 8px;
  margin-bottom: 6px;
}
.subtask-edit-text { flex: 1; font-size: 13px; word-break: break-word; }
.subtask-delete-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: #ff6b6b;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}
.subtask-add-row { display: flex; gap: 8px; }
.subtask-add-row .form-input { flex: 1; }
.color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.status-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.status-btn {
  padding: 8px 16px;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.status-btn[data-status="todo"] { color: #666; }
.status-btn[data-status="todo"]:hover, 
.status-btn[data-status="todo"].active { background: #f0f0f0; border-color: #666; color: #333; }
.status-btn[data-status="progress"] { color: #81c723; }
.status-btn[data-status="progress"]:hover, 
.status-btn[data-status="progress"].active { background: rgba(129,199,35,0.1); border-color: #81c723; }
.status-btn[data-status="done"] { color: #f59e0b; }
.status-btn[data-status="done"]:hover, 
.status-btn[data-status="done"].active { background: rgba(245,158,11,0.1); border-color: #f59e0b; }
.status-btn[data-status="paused"] { color: #ef4444; }
.status-btn[data-status="paused"]:hover, 
.status-btn[data-status="paused"].active { background: rgba(239,68,68,0.1); border-color: #ef4444; }
.color-block {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s;
}
.color-block:hover { transform: scale(1.1); }
.color-block.selected { border-color: #333; }
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.modal-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}
.modal-btn.primary { background: #81c723; color: #fff; }
.modal-btn.primary:hover { background: #6ea31c; }
.modal-btn.secondary { background: rgba(0,0,0,0.06); color: #666; }
.modal-btn.secondary:hover { background: rgba(0,0,0,0.1); }
.modal-btn.danger { background: #ff6b6b; color: #fff; }
.modal-btn.danger:hover { background: #ee5a5a; }
.text-btn {
  background: none;
  border: none;
  color: #81c723;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 12px;
  transition: all 0.2s;
}
.text-btn:hover { color: #6ea31c; text-decoration: underline; }
.modal-icon-buttons {
  display: flex;
  gap: 8px;
}
.copy-icon-btn,
.delete-icon-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-icon-btn svg,
.delete-icon-btn svg {
  width: 18px;
  height: 18px;
}
.copy-icon-btn:hover {
  background: #81c723;
  color: #fff;
}
.delete-icon-btn:hover {
  background: #ff6b6b;
  color: #fff;
}
.float-trash-top {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.float-trash-top .trash-icon {
  width: 18px;
  height: 18px;
}
.float-trash-top:hover {
  background: rgba(255,107,107,0.9) !important;
  color: #fff !important;
}
.float-trash {
  display: none;
}
.trash-icon {
  width: 20px;
  height: 20px;
  color: #999;
  transition: color 0.3s;
}
.sidebar-panel {
  position: fixed;
  left: 80px;
  top: 0;
  width: 320px;
  height: 100vh;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
  transform: translateX(-100%);
  transition: transform 0.3s, visibility 0.3s;
  z-index: 200;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
}
.sidebar-panel.show {
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}
.panel-header {
  padding: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.panel-list { padding: 10px; }
.panel-item {
  padding: 14px;
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.panel-item:hover { background: rgba(0,0,0,0.08); }
.panel-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.panel-item-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  flex: 1;
  margin-right: 10px;
}
.panel-item-date {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}
.panel-item-summary {
  font-size: 12px;
  color: #888;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.panel-item-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.status-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 10px;
}
.status-done { background: #55efc4; color: #fff; }
.status-progress { background: #ffeaa7; color: #666; }
.status-pending { background: rgba(0,0,0,0.08); color: #666; }
.item-actions { display: flex; gap: 6px; }
.item-action-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  background: rgba(0,0,0,0.06);
  color: #666;
}
.item-action-btn:hover { background: rgba(0,0,0,0.12); }
.item-action-btn.restore { background: #81c723; color: #fff; }
.item-action-btn.delete { background: #ff6b6b; color: #fff; }
.trash-section { padding: 10px; }
.trash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
}
.trash-empty { text-align: center; padding: 40px; color: #999; font-size: 14px; }
.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}
.stats-section {
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 16px;
}
.stats-section-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}
.stats-row {
  display: flex;
  gap: 12px;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
  flex: 1;
}
.stat-num {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #81c723;
}
.stat-text {
  display: block;
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}
.stat-card {
  background: rgba(0,0,0,0.04);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #81c723;
}
.stat-label {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}
.trash-card {
  position: relative;
  padding: 14px;
  background: rgba(255,255,255,0.8);
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 10px;
}
.trash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.trash-card-title {
  font-weight: bold;
  font-size: 14px;
  color: #333;
  flex: 1;
  margin-right: 10px;
}
.trash-card-date {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}
.trash-card-actions {
  display: flex;
  gap: 8px;
}
.reminder-icon {
  position: absolute;
  top: 50px;
  right: 12px;
  font-size: 14px;
}
.countdown-display {
  position: absolute;
  top: 70px;
  right: 12px;
  font-size: 11px;
  color: #666;
  background: rgba(255,255,255,0.85);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.canvas-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.canvas-btn {
  padding: 12px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
  text-align: left;
}
.canvas-btn:hover { border-color: #81c723; }
.canvas-btn.active { border-color: #81c723; background: rgba(129,199,35,0.1); color: #81c723; font-weight: bold; }
.reminder-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reminder-select {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
  background: rgba(255,255,255,0.9);
}
.reminder-select:focus { border-color: #81c723; }
.reminder-input {
  width: 70px;
  padding: 10px;
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  text-align: center;
  transition: border-color 0.3s;
  background: rgba(255,255,255,0.9);
}
.reminder-input:focus { border-color: #81c723; }
.reminder-separator {
  font-size: 18px;
  color: #999;
}

@keyframes completionBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.05); }
  50% { transform: scale(0.95); }
  70% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes completionGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(129, 199, 35, 0.5); }
  50% { box-shadow: 0 0 20px rgba(129, 199, 35, 0.8); }
}