:root{--bg:#0b0f14;--muted:#111827;--card:#0c1218;--text:#e5fbfb;--sub:#a6b3bd;--accent:#2bd4c2;--green:#21cfa3;--red:#f27f7f;--yellow:#f2d56b}
/* Light theme overrides */
[data-theme=light]{--bg:#f7fafc;--muted:#e5e7eb;--card:#ffffff;--text:#0f172a;--sub:#475569;--accent:#0ea5e9;--green:#10b981;--red:#ef4444;--yellow:#eab308}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#06080c,#0b0f14);color:var(--text)}
body[data-theme=light]{background:linear-gradient(180deg,#eef2f7,#f7fafc)}
.app-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;position:sticky;top:0;background:rgba(11,16,32,.6);backdrop-filter:blur(8px);border-bottom:1px solid #1f2937;flex-wrap:nowrap}
body[data-theme=light] .app-header{background:rgba(255,255,255,.7);border-bottom-color:#e5e7eb}
.app-header h1{margin:0;font-size:20px;color:var(--accent)}
.app-header h1.brand{display:flex;align-items:center;gap:8px;color:inherit;flex:0 0 auto}
.app-header h1.brand img{height:32px;display:block;width:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.user-area{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:1 1 auto;justify-content:flex-end;min-width:0;position:relative}
.user-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:9999px;background:rgba(43,212,194,.12);color:var(--accent);border:1px solid rgba(43,212,194,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto;order:1}
.btn.icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0;order:2}
.menu{position:absolute;right:0;top:calc(100% + 8px);background:var(--card);border:1px solid #22314a;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.35);padding:8px;min-width:220px;z-index:20;display:none}
body[data-theme=light] .menu{border-color:#e5e7eb;box-shadow:0 10px 24px rgba(2,6,23,.08)}
.menu.open{display:block}
.menu .menu-section{padding:6px 6px 10px 6px;border-bottom:1px solid #1b2733;margin-bottom:8px}
.menu .menu-label{display:block;color:var(--sub);font-size:12px;margin-bottom:6px}
.menu .menu-item{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer}
.menu .menu-item:hover{background:rgba(255,255,255,.05)}
.menu .menu-item.danger{color:var(--red)}
html[dir=rtl] .menu{left:0;right:auto}
.user-area select,.user-area .btn{flex:0 0 auto}
.card{background:rgba(12,18,24,.8);border:1px solid #1b2733;border-radius:12px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
body[data-theme=light] .card{background:#ffffff;border-color:#e5e7eb;box-shadow:0 6px 18px rgba(2,6,23,.08)}
main{max-width:1100px;margin:20px auto;padding:0 16px}
#authSection{max-width:420px;margin:40px auto}
input,select{width:100%;padding:10px 12px;margin:8px 0;border-radius:8px;border:1px solid #263445;background:#0b1220;color:var(--text)}
body[data-theme=light] input,body[data-theme=light] select{border-color:#cbd5e1;background:#ffffff;color:#0f172a}
.actions{display:flex;gap:8px}
.btn{padding:10px 14px;border-radius:8px;border:1px solid #2b3b52;background:#0b1220;color:var(--text);cursor:pointer}
body[data-theme=light] .btn{background:#ffffff;border-color:#cbd5e1;color:#0f172a}
.btn.primary{background:linear-gradient(180deg,#2bd4c2,#1aa397);border:0}
.btn.secondary{background:#111827;border-color:#374151}
body[data-theme=light] .btn.secondary{background:#f3f4f6;border-color:#e5e7eb}
.error{color:#f87171;margin-top:8px;min-height:20px}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.toolbar .move-mobile{display:none}
.toolbar #newTaskForm{display:flex;gap:8px;align-items:center;flex:1 1 auto;flex-wrap:wrap}
.toolbar #newTaskForm input{order:1;flex:1 1 240px;width:auto;min-width:160px}
.toolbar #newTaskForm select{order:2;flex:0 0 auto;width:auto}
.toolbar #newTaskForm .btn{order:3;flex:0 0 auto}
.stats{margin-left:0;color:var(--sub);flex:1 1 100%}
/* Eisenhower Box Dashboard */
.eisenhower-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:16px;height:calc(100vh - 200px);min-height:500px}
.eisenhower-quadrant{background:var(--card);border:1px solid #1b2733;border-radius:12px;padding:20px;display:flex;flex-direction:column;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease,background-color .2s ease}
body[data-theme=light] .eisenhower-quadrant{border-color:#e5e7eb}

/* Drag and Drop Enhancements */
.dragging{opacity:0.5;transform:rotate(5deg);transition:all 0.2s ease;z-index:1000}
.dragover{background-color:rgba(0,123,255,0.1);border:2px dashed #007bff;transition:all 0.2s ease}
.project-card.dragging{opacity:0.5;transform:rotate(5deg) scale(1.05);transition:all 0.2s ease;z-index:1000}
.task-item.dragging{opacity:0.5;transform:rotate(5deg) scale(1.02);transition:all 0.2s ease;z-index:1000}
.kanban-column.dragover{background-color:rgba(0,123,255,0.1);border:2px dashed #007bff;transition:all 0.2s ease}
.eisenhower-quadrant.dragover{background-color:rgba(0,123,255,0.1);border:2px dashed #007bff;transition:all 0.2s ease}

/* Smooth animations for drag and drop */
.project-card,.task-item{transition:all 0.3s ease}
.project-card:hover,.task-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.task-item,.project-card{transition:all 0.3s ease;cursor:grab}
.task-item:active,.project-card:active{cursor:grabbing}
.task-item:hover,.project-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}
body[data-theme=light] .task-item:hover,body[data-theme=light] .project-card:hover{box-shadow:0 8px 25px rgba(0,0,0,0.1)}

/* Kanban Column Drag States */
.kanban-column{transition:all 0.2s ease;min-height:200px}
.kanban-column.dragover{background-color:rgba(0,123,255,0.1);border:2px dashed #007bff;transform:scale(1.02)}

/* Project Quadrant Drag States */
.eisenhower-quadrant.dragover{background-color:rgba(0,123,255,0.1);border:2px dashed #007bff;transform:scale(1.02)}

/* Smooth Animations for Real-time Updates */
.task-item.animating{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}
.project-card.animating{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}

/* Loading States */
.syncing{position:relative}
.syncing::after{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;border:2px solid #007bff;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.eisenhower-quadrant h3{margin:0 0 8px 0;font-size:18px;color:var(--text)}
.quadrant-description{margin:0 0 16px 0;font-size:14px;color:var(--sub)}
.projects-container{flex:1;overflow-y:auto;min-height:200px}
.projects-container:empty::after{content:"Drop projects here";color:var(--sub);font-style:italic;display:block;text-align:center;padding:20px}
.project-card{background:rgba(43,212,194,.1);border:1px solid rgba(43,212,194,.3);border-radius:12px;padding:12px;margin-bottom:12px;transition:transform .08s ease,box-shadow .12s ease,border-color .12s ease;cursor:pointer;position:relative;min-height:100px;display:flex;flex-direction:column;max-width:100%}
.project-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(43,212,194,.25);border-color:var(--accent)}
.project-card.dragging{opacity:0.5;transform:rotate(5deg)}
.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}
.project-title{margin:0;font-size:16px;color:var(--text);line-height:1.3;font-weight:600;flex:1;word-break:break-word}
.project-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.task-count{font-size:11px;color:var(--sub);background:rgba(43,212,194,.2);padding:2px 6px;border-radius:8px;white-space:nowrap}
.project-description{margin:0 0 6px 0;font-size:13px;color:var(--sub);line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;background:rgba(43,212,194,0.03);padding:6px 10px;border-radius:6px;border-left:3px solid rgba(43,212,194,0.2);font-style:italic}
.project-progress{margin-top:8px;max-width:200px}
.progress-bar{background:rgba(255,255,255,.1);border-radius:6px;height:10px;overflow:hidden;position:relative;width:100%;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}
.progress-fill{background:linear-gradient(90deg,var(--accent),var(--green));height:100%;transition:width .5s cubic-bezier(0.4, 0, 0.2, 1);border-radius:8px;position:relative}
.progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:progress-shine 2s infinite}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;color:var(--text);font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,0.3);transition:all .3s ease}
@keyframes progress-shine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Progress Dashboard Styles */
.progress-dashboard{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index:2000;backdrop-filter:blur(4px)}
.progress-dashboard[hidden]{display:none !important}
.dashboard-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #1b2733;background:var(--card)}
.dashboard-header h3{margin:0;color:var(--text);font-size:20px}
.dashboard-content{padding:20px;background:var(--card);border-radius:12px;max-width:1000px;max-height:80vh;overflow-y:auto;margin:20px}
.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.dashboard-card{background:var(--muted);border:1px solid #1b2733;border-radius:8px;padding:16px}
.dashboard-card h4{margin:0 0 12px 0;color:var(--accent);font-size:16px;border-bottom:1px solid #1b2733;padding-bottom:8px}
.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.stat-item{display:flex;flex-direction:column;gap:4px;text-align:center}
.stat-label{font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:0.5px}
.stat-value{font-size:20px;font-weight:600;color:var(--text)}
.insights-content{display:flex;flex-direction:column;gap:12px}
.insight-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(43,212,194,0.1)}
.insight-label{font-size:14px;color:var(--text)}
.insight-value{font-size:14px;font-weight:500;color:var(--accent)}
.trend-chart{margin-bottom:16px}
.trend-stats{display:flex;flex-direction:column;gap:8px}
.trend-item{display:flex;justify-content:space-between;align-items:center}
.trend-label{font-size:13px;color:var(--sub)}
.trend-value{font-size:13px;font-weight:500;color:var(--text)}
.performance-content{display:flex;flex-direction:column;gap:12px}
.performance-item{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.performance-label{font-size:13px;color:var(--sub)}
.performance-value{font-size:13px;font-weight:500;color:var(--green)}

/* Enhanced Progress Bar Animations */
.progress-fill{position:relative;overflow:hidden}
.progress-fill::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:progress-shine 3s infinite}
.progress-fill.loading::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--green),var(--accent));background-size:200% 100%;animation:progress-loading 2s infinite}

@keyframes progress-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Responsive Progress Dashboard */
@media (max-width:768px){
  .dashboard-content{margin:10px;padding:16px}
  .dashboard-grid{grid-template-columns:1fr;gap:16px}
  .summary-stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat-value{font-size:18px}
}
.eisenhower-quadrant[data-quadrant="urgent-important"]{border-left:4px solid var(--red)}
.eisenhower-quadrant[data-quadrant="not-urgent-important"]{border-left:4px solid var(--green)}
.eisenhower-quadrant[data-quadrant="urgent-not-important"]{border-left:4px solid var(--yellow)}
.eisenhower-quadrant[data-quadrant="not-urgent-not-important"]{border-left:4px solid var(--sub)}
.eisenhower-quadrant.dragover{background:rgba(43,212,194,.1);border-color:var(--accent);transform:scale(1.02)}

/* Project Page */
.project-stats{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.stat{display:flex;flex-direction:column;gap:4px;min-width:120px}
.stat-label{font-size:12px;color:var(--sub);text-transform:uppercase;letter-spacing:0.5px}
.stat-value{font-size:24px;font-weight:600;color:var(--text)}
.progress-bar{width:200px;height:12px;background:#1b2733;border-radius:6px;overflow:hidden;position:relative}
body[data-theme=light] .progress-bar{background:#e5e7eb}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .5s cubic-bezier(0.4, 0, 0.2, 1);position:relative}
.progress-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:progress-shine 2s infinite}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:var(--text);transition:all .3s ease}

/* Task Controls */
.task-controls{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
.task-controls form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.task-controls input,.task-controls select{flex:1;min-width:150px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters select{min-width:120px}

/* Kanban Board */
.kanban-board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.kanban-column{background:rgba(11,17,23,.4);border:1px dashed #274056;border-radius:12px;padding:16px;min-height:400px}
body[data-theme=light] .kanban-column{border-color:#cbd5e1;background:#f8fafc}
.kanban-column h3{margin:0 0 16px 0;color:var(--accent);font-size:16px;font-weight:600;text-align:center;padding-bottom:8px;border-bottom:1px solid #203040}
body[data-theme=light] .kanban-column h3{border-bottom-color:#e5e7eb}
.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:300px}

/* Task Items - Clean Modern Design */
.task-item{background:var(--card);border:1px solid #1b2733;border-radius:8px;padding:16px;transition:all .15s ease;cursor:move;margin-bottom:8px;position:relative}
body[data-theme=light] .task-item{background:#ffffff;border-color:#e5e7eb}
.task-item:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.1)}
body[data-theme=light] .task-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.05)}
.task-item.dragging{opacity:.6;transform:rotate(2deg)}
.kanban-column.dragover{outline:2px solid var(--accent);background:rgba(43,212,194,.05)}

/* Enhanced drag and drop positioning */
.task-item.dragging{opacity:.5;transform:rotate(5deg);transition:all 0.2s ease;z-index:1000}
.task-item.dragging:hover{transform:rotate(5deg) scale(1.05)}
.kanban-column.dragover .task-list{border-top:3px solid var(--accent);padding-top:8px}

.task-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.task-main{flex:1;min-width:0}
.task-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.task-title{font-weight:500;color:var(--text);font-size:14px;margin:0;line-height:1.4;word-break:break-word}
.task-meta-inline{display:flex;align-items:center;gap:8px}
.due-date-inline{font-size:12px;color:var(--sub);background:rgba(43,212,194,.1);padding:2px 6px;border-radius:4px}
.priority-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.priority-dot.priority-high{background:#ef4444}
.priority-dot.priority-medium{background:#f59e0b}
.priority-dot.priority-low{background:#10b981}

.task-actions{display:flex;gap:4px;flex-shrink:0;opacity:1}
.btn-icon{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--sub);cursor:pointer;transition:all .15s ease}
.btn-icon:hover{background:rgba(43,212,194,.1);color:var(--accent);border-color:rgba(43,212,194,.2)}
.btn-icon.danger:hover{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.2)}
/* Enhanced Subtask Styles */
.subtasks-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1b2733;
}

body[data-theme=light] .subtasks-section {
  border-top-color: #e5e7eb;
}

.subtasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.subtasks-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.subtasks-count {
  font-size: 12px;
  color: var(--sub);
  font-weight: 500;
}

.subtask-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(43, 212, 194, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.subtask-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.subtasks-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.subtasks-list.empty {
  color: var(--sub);
  font-size: 12px;
  font-style: italic;
  padding: 8px;
  text-align: center;
  background: rgba(43, 212, 194, 0.02);
  border-radius: 4px;
  border: 1px dashed rgba(43, 212, 194, 0.2);
}

.subtask-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(43, 212, 194, 0.03);
  border-radius: 4px;
  border: 1px solid rgba(43, 212, 194, 0.08);
  transition: all 0.15s ease;
  position: relative;
}

.subtask-item:hover {
  background: rgba(43, 212, 194, 0.06);
  border-color: rgba(43, 212, 194, 0.15);
}

.subtask-checkbox {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}

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

.subtask-title {
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  min-width: 0; /* Allow text to wrap/truncate */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px; /* Limit maximum width */
}

.subtask-description {
  font-size: 11px;
  color: var(--sub);
  line-height: 1.4;
  word-break: break-word;
  background: rgba(43, 212, 194, 0.02);
  padding: 4px 8px;
  border-radius: 3px;
  border-left: 2px solid rgba(43, 212, 194, 0.1);
  font-style: italic;
  margin-top: 2px;
}

.subtask-title.completed {
  text-decoration: line-through;
  opacity: 0.6;
  color: var(--sub);
}

.subtask-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.subtask-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.subtask-item:hover .subtask-actions {
  opacity: 1;
}

.remaining-time {
  font-size: 11px;
  color: var(--sub);
  margin-top: 4px;
  font-weight: 500;
  background: rgba(43, 212, 194, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(43, 212, 194, 0.15);
  display: inline-block;
  transition: all 0.2s ease;
}

.remaining-time.urgent {
  color: #ff6b6b;
  font-weight: 600;
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.subtask-remaining-time {
  font-size: 10px;
  color: var(--sub);
  margin-top: 2px;
  font-weight: 500;
  background: rgba(43, 212, 194, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(43, 212, 194, 0.12);
  display: inline-block;
  transition: all 0.2s ease;
}

.subtask-remaining-time.urgent {
  color: #ff6b6b;
  font-weight: 600;
  background: rgba(255, 107, 107, 0.08);
  border-color: rgba(255, 107, 107, 0.15);
  animation: pulse 2s infinite;
}

.subtask-due-date {
  font-size: 11px;
  color: var(--sub);
  background: rgba(255, 193, 7, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.btn-icon.add-subtask {
  background: rgba(43, 212, 194, 0.1);
  color: var(--accent);
  border-color: rgba(43, 212, 194, 0.2);
}

.btn-icon.add-subtask:hover {
  background: rgba(43, 212, 194, 0.2);
  color: var(--accent);
  border-color: rgba(43, 212, 194, 0.3);
}
.btn-icon.small{width:24px;height:24px}
.icon{width:14px;height:14px}
.btn-icon.small .icon{width:12px;height:12px}
.icon-text{font-size:14px;font-weight:500;line-height:1}
.btn-icon.small .icon-text{font-size:12px}

.task-description{font-size:13px;color:var(--sub);margin:4px 0 0 0;line-height:1.5;word-break:break-word;background:rgba(43,212,194,0.02);padding:6px 10px;border-radius:4px;border-left:2px solid rgba(43,212,194,0.15);font-style:italic;font-size:12px}

/* Subtasks section styling */

/* Task list styling */
.task-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:200px}

/* Modals */
.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000}
.modal[hidden]{display:none !important}
.modal-content{background:var(--card);border:1px solid #1b2733;border-radius:12px;padding:0;min-width:400px;max-width:90vw;max-height:90vh;overflow-y:auto}
body[data-theme=light] .modal-content{border-color:#e5e7eb}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #1b2733}
body[data-theme=light] .modal-header{border-bottom-color:#e5e7eb}
.modal-header h3{margin:0;color:var(--text)}
.modal form{padding:20px}
.modal form input,.modal form textarea,.modal form select{width:100%;margin-bottom:16px}
.modal form textarea{background:rgba(43,212,194,0.03);border:1px solid rgba(43,212,194,0.2);border-radius:6px;padding:8px 12px;font-style:italic;color:var(--text);resize:vertical;min-height:60px;line-height:1.5;transition:all 0.2s ease}
.modal form textarea::placeholder{color:var(--sub);font-style:italic;opacity:0.7}
.modal form textarea:focus{outline:none;border-color:var(--accent);background:rgba(43,212,194,0.05);box-shadow:0 0 0 2px rgba(43,212,194,0.1)}
body[data-theme=light] .modal form textarea{background:rgba(14,165,233,0.03);border-color:rgba(14,165,233,0.2)}
body[data-theme=light] .modal form textarea:focus{background:rgba(14,165,233,0.05);border-color:var(--accent);box-shadow:0 0 0 2px rgba(14,165,233,0.1)}
.form-row{display:flex;gap:12px}
.form-row select{flex:1;min-width:120px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}

/* Responsive Design */
@media (max-width:768px){
  .kanban-board{grid-template-columns:1fr;gap:12px}
  .project-stats{flex-direction:column;align-items:stretch;gap:16px}
  .task-controls form{flex-direction:column;align-items:stretch}
  .filters{flex-direction:column}
  .modal-content{min-width:300px;margin:16px}
  .eisenhower-grid{grid-template-columns:1fr;gap:12px;height:auto}
  .project-card{min-height:90px;padding:10px}
  .project-title{font-size:14px}
  .project-description{font-size:12px;-webkit-line-clamp:2;line-clamp:2}
  .task-item{padding:12px}
  .task-title{font-size:13px}
  .btn-icon{width:24px;height:24px}
  .btn-icon.small{width:20px;height:20px}
  .icon{width:12px;height:12px}
  .btn-icon.small .icon{width:10px;height:10px}
  .icon-text{font-size:12px}
  .btn-icon.small .icon-text{font-size:10px}
  .progress-bar{height:6px}
  .progress-text{font-size:9px}
  .subtasks-section{margin-top:8px;padding-top:8px}
  .subtasks-count{font-size:11px}
  .subtask-item{padding:4px 6px}
  .subtask-title{font-size:12px}
  .subtask-checkbox{width:12px;height:12px}
  .subtask-progress-bar{height:3px}
  .subtask-due-date{font-size:10px;padding:1px 4px}
  .project-description{font-size:12px;padding:6px 10px}
  .task-description{font-size:11px;padding:4px 8px}
  .subtask-description{font-size:10px;padding:3px 6px}
  .modal form textarea{min-height:50px;padding:6px 10px;font-size:13px}
}
@media (max-width:760px){.grid{grid-template-columns:1fr}}
@media (max-width:760px){
  .app-header{padding:10px 12px}
  .app-header h1.brand img{height:36px}
  .user-area{gap:6px}
  .user-chip{flex:0 0 auto}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar #newTaskForm{width:100%}
  .toolbar .stats{order:3;margin-left:0}
  .toolbar .move-mobile{display:block}
}
@media (max-width:480px){
  .toolbar #newTaskForm input{order:1;flex:1 1 100%;min-width:0}
  .toolbar #newTaskForm select{order:2;flex:1 1 60%}
  .toolbar #newTaskForm .btn{order:3}
}