*, *::before, *::after { font-family: 'JetBrains Mono', monospace; box-sizing: border-box; }
html, body, input, textarea, select, button, pre { font-family: 'JetBrains Mono', monospace; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }

.task-row:hover .delete-btn { opacity: 1 !important; }
.subtask-row:hover .subtask-del { opacity: 1 !important; }

/* Context menu */
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px; cursor: default;
  font-size: 11.5px; color: #374151; transition: background 0.1s;
}
.ctx-item-parent:hover > .ctx-item { background: #F9FAFB; }
.ctx-submenu {
  display: none; position: absolute; left: 100%; top: -4px;
  background: white; border: 1px solid #E5E7EB; border-radius: 7px;
  padding: 4px; min-width: 190px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  z-index: 1001;
}
.ctx-item-parent:hover > .ctx-submenu { display: block; }
.ctx-btn {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 4px; border: 0;
  cursor: pointer; text-align: left; font-size: 11.5px;
  background: transparent; transition: background 0.1s;
  font-family: inherit;
}
.ctx-btn:hover { background: #F9FAFB; }

/* Date picker */
.dp-panel {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  background: white; border: 1px solid #E5E7EB; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.10); padding: 10px; width: 248px;
  user-select: none;
}
.dp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 8px;
}
.dp-title { font-size: 11px; font-weight: 700; color: #111827; letter-spacing: -0.01em; }
.dp-nav {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 5px; border: none;
  background: transparent; cursor: pointer; color: #9CA3AF;
  transition: background 0.1s, color 0.1s;
}
.dp-nav:hover { background: #F4F4F4; color: #111827; }
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
}
.dp-cell {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; font-size: 10px; color: #374151;
  border: none; background: none; padding: 0; margin: 0 auto;
}
.dp-head { font-size: 9px; font-weight: 700; color: #C4C4C4; text-transform: uppercase; letter-spacing: 0.06em; }
.dp-day {
  border-radius: 5px; cursor: pointer; transition: background 0.1s;
  font-weight: 500;
}
.dp-day:hover { background: #F4F4F4; }
.dp-today { color: #111827; font-weight: 700; box-shadow: inset 0 0 0 1px #E5E7EB; }
.dp-selected { background: #111827 !important; color: white !important; font-weight: 700; }
.dp-shortcuts {
  display: flex; gap: 4px; flex-wrap: wrap;
  padding-top: 8px; margin-top: 6px; border-top: 1px solid #F0F0F0;
}
.dp-shortcut {
  padding: 3px 8px; border-radius: 4px; border: 1px solid #E5E7EB;
  background: white; font-size: 9.5px; font-weight: 600; color: #9CA3AF;
  cursor: pointer; transition: all 0.1s; font-family: inherit;
}
.dp-shortcut:hover { background: #F9FAFB; color: #374151; border-color: #D1D5DB; }
.dp-clear { color: #EF4444; border-color: #FECACA; }
.dp-clear:hover { background: #FEF2F2; color: #EF4444; border-color: #FCA5A5; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Settings components */
.s-card { background:white; border:1px solid #E5E7EB; border-radius:8px; padding:24px; display:flex; flex-direction:column; gap:18px; }
.s-card-title { font-size:13px; font-weight:700; color:#111827; letter-spacing:-0.01em; }
.s-field { display:flex; flex-direction:column; gap:5px; }
.s-label { font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9CA3AF; }
.s-input { width:100%; padding:8px 11px; border-radius:5px; border:1px solid #E5E7EB; font-size:12px; color:#111827; background:white; transition:border-color 0.15s; }
.s-input:focus { border-color:#111827; outline:none; }
.s-textarea { width:100%; padding:8px 11px; border-radius:5px; border:1px solid #E5E7EB; font-size:11.5px; color:#374151; background:white; transition:border-color 0.15s; resize:vertical; line-height:1.6; }
.s-textarea:focus { border-color:#111827; outline:none; }
.s-btn-primary { padding:7px 16px; border-radius:5px; cursor:pointer; background:#111827; color:white; border:none; font-size:11px; font-weight:700; letter-spacing:0.06em; transition:background 0.15s; }
.s-btn-primary:hover { background:#1F2937; }
.s-btn-secondary { padding:6px 14px; border-radius:5px; cursor:pointer; background:white; border:1px solid #E5E7EB; font-size:11px; font-weight:600; color:#374151; transition:background 0.15s; }
.s-btn-secondary:hover { background:#F9FAFB; }
.s-btn-ghost { padding:6px 14px; border-radius:5px; cursor:pointer; background:white; border:1px solid #E5E7EB; font-size:11px; color:#9CA3AF; }
.s-btn-danger { padding:7px 16px; border-radius:5px; cursor:pointer; background:white; color:#EF4444; border:1px solid #FECACA; font-size:11px; font-weight:700; letter-spacing:0.06em; transition:background 0.15s; }
.s-btn-danger:hover { background:#FEF2F2; }
.s-code { background:#F8F8F8; border:1px solid #EEEEEE; border-radius:5px; padding:12px 14px; font-size:11px; line-height:1.65; color:#374151; overflow-x:auto; margin:0; white-space:pre-wrap; word-break:break-all; }
.s-copy-btn { font-size:9.5px; color:#9CA3AF; background:none; border:none; cursor:pointer; padding:0; letter-spacing:0.06em; }
.s-copy-btn:hover { color:#111827; }
.s-toggle { width:36px; height:20px; border-radius:10px; border:none; cursor:pointer; position:relative; flex-shrink:0; transition:background 0.2s; }
.s-toggle-knob { position:absolute; top:3px; width:14px; height:14px; border-radius:50%; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.15); transition:left 0.2s; }