:root {
  --tg-theme-bg-color: #ffffff;
  --tg-theme-text-color: #000000;
  --tg-theme-button-color: #2196F3;
  --tg-theme-button-text-color: #ffffff;
  --card-bg: #f5f5f5;
  --border-color: #ddd;
  --text-primary: #000;
  --text-secondary: #666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--tg-theme-bg-color, #f5f5f5); padding: 10px; color: var(--tg-theme-text-color, #000); }
body.dark-theme { background: #1a1a1a; color: #e0e0e0; --card-bg: #3d3d3d; --border-color: #555; --text-primary: #e0e0e0; --text-secondary: #bbb; }
body.dark-theme .task { background: #2d2d2d; color: #e0e0e0; }
body.dark-theme .modal-content { background: #2d2d2d; color: #e0e0e0; }
body.dark-theme input, body.dark-theme textarea, body.dark-theme select { background: #3d3d3d; color: #e0e0e0; border-color: #555; }
body.dark-theme .comment { background: #3d3d3d; color: #e0e0e0; }
body.dark-theme .filters { background: #2d2d2d; }
body.dark-theme .kanban-column { background: #2d2d2d; }
body.dark-theme .subtask { background: #3d3d3d; color: #e0e0e0; }
body.dark-theme .history-item { background: #3d3d3d; color: #e0e0e0; }
body.dark-theme details summary { background: #3d3d3d; color: #e0e0e0; }
body.dark-theme .task-info { color: #bbb; }
body.dark-theme p { color: #ccc; }
body.dark-theme label { color: #e0e0e0; }
body.dark-theme h2, body.dark-theme h3 { color: #fff; }
body.dark-theme .close { color: #fff; }
header { background: var(--tg-theme-button-color, #2196F3); color: white; padding: 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
h1 { font-size: 20px; }
.header-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#userSelect, #themeToggle { padding: 8px; border-radius: 5px; border: none; font-size: 14px; cursor: pointer; }
.filters { background: white; padding: 15px; border-radius: 8px; margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.dark-theme .filters { background: #2d2d2d; }
.filters select, .filters input { padding: 8px; border-radius: 5px; border: 1px solid #ddd; font-size: 14px; }
.filters label { font-weight: bold; margin-right: 5px; }
.view-toggle { display: flex; gap: 5px; }
.view-btn { padding: 8px 15px; border: none; background: #e0e0e0; cursor: pointer; border-radius: 5px; }
.view-btn.active { background: var(--tg-theme-button-color, #2196F3); color: white; }
.controls { margin-bottom: 15px; }
button { background: var(--tg-theme-button-color, #4CAF50); color: var(--tg-theme-button-text-color, white); border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 14px; transition: opacity 0.2s; }
button:hover { opacity: 0.9; }
button:active { opacity: 0.7; }
.kanban { display: flex; gap: 15px; overflow-x: auto; }
.kanban-column { flex: 1; min-width: 300px; background: white; padding: 15px; border-radius: 8px; }
body.dark-theme .kanban-column { background: #2d2d2d; }
.kanban-header { font-weight: bold; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 2px solid #ddd; display: flex; justify-content: space-between; }
.task-count { background: var(--tg-theme-button-color, #2196F3); color: white; padding: 2px 8px; border-radius: 10px; font-size: 12px; }
.task { background: white; padding: 15px; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; transition: transform 0.2s; }
.task:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
body.dark-theme .task { background: #3d3d3d; }
.task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.task-title { font-weight: bold; font-size: 16px; flex: 1; }
.task-status { padding: 5px 10px; border-radius: 5px; font-size: 12px; margin-left: 10px; }
.status-Новая { background: #ffeb3b; }
.status-В_работе { background: #2196F3; color: white; }
.status-Выполнена { background: #4CAF50; color: white; }
.task-info { color: #666; font-size: 13px; margin-top: 5px; }
body.dark-theme .task-info { color: #aaa; }
.task-assignee { display: flex; align-items: center; gap: 5px; font-weight: 500; color: #2196F3; margin-top: 8px; font-size: 14px; }
.assignee-badge { background: #e3f2fd; padding: 5px 12px; border-radius: 15px; display: inline-flex; align-items: center; gap: 5px; }
.assignee-badge strong { color: #1565c0; font-size: 15px; }
.priority { display: inline-block; padding: 3px 8px; border-radius: 3px; font-size: 11px; margin-left: 5px; }
.priority-Высокий { background: #f44336; color: white; }
.priority-Средний { background: #ff9800; color: white; }
.priority-Низкий { background: #4caf50; color: white; }
.category-tag { display: inline-block; padding: 3px 8px; border-radius: 3px; font-size: 11px; background: #9c27b0; color: white; margin-left: 5px; }
.deadline { font-size: 12px; color: #666; margin-top: 5px; }
.deadline.overdue { color: #f44336; font-weight: bold; }
.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); overflow-y: auto; }
.modal-content { background: white; margin: 5% auto; padding: 20px; border-radius: 8px; width: 90%; max-width: 600px; max-height: 85vh; overflow-y: auto; }
.close { float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
input, textarea, select { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; }
textarea { min-height: 80px; resize: vertical; }
.comment { background: #f9f9f9; padding: 10px; margin: 5px 0; border-radius: 5px; font-size: 13px; }
.comment-author { font-weight: bold; color: #2196F3; }
.subtask { display: flex; align-items: center; gap: 10px; padding: 8px; background: #f5f5f5; margin: 5px 0; border-radius: 5px; }
body.dark-theme .subtask { background: #3d3d3d; }
.subtask input[type="checkbox"] { width: auto; margin: 0; cursor: pointer; }
.subtask.completed { text-decoration: line-through; opacity: 0.6; }
.progress-bar { background: #e0e0e0; border-radius: 10px; height: 20px; margin: 10px 0; overflow: hidden; }
.progress-fill { background: #4caf50; height: 100%; transition: width 0.3s; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; font-weight: bold; }
.history-item { padding: 8px; border-left: 3px solid #2196F3; margin: 5px 0; background: #f5f5f5; font-size: 13px; border-radius: 3px; }
body.dark-theme .history-item { background: #3d3d3d; }
details { margin-top: 15px; }
details summary { cursor: pointer; font-weight: bold; padding: 10px; background: #f5f5f5; border-radius: 5px; user-select: none; }
body.dark-theme details summary { background: #3d3d3d; }
details[open] summary { margin-bottom: 10px; }
.attachment { display: inline-block; padding: 5px 10px; background: #e3f2fd; border-radius: 5px; margin: 5px; font-size: 13px; }
.form-row { display: flex; gap: 10px; }
.form-row > * { flex: 1; }
.archived-task { opacity: 0.8; border-left: 4px solid #ff9800; }
