/* ================================================================
   TASKBOT MINI APP — Complete UI v56
   Design: Dark Professional, clean & modern
   ================================================================ */

/* ── Variables ── */
:root {
    --bg:      #0A0A14;
    --bg2:     #11111E;
    --bg3:     #18182A;
    --card:    #14142280;
    --card2:   #1C1C30;
    --border:  rgba(255,255,255,0.07);
    --border2: rgba(255,255,255,0.12);
    --accent:  #6366F1;
    --accent2: #8B5CF6;
    --green:   #10B981;
    --yellow:  #F59E0B;
    --orange:  #F97316;
    --red:     #EF4444;
    --cyan:    #06B6D4;
    --pink:    #EC4899;
    --text:    #EEEEF8;
    --text2:   #9090B0;
    --text3:   #55557A;
    --safe-b:  env(safe-area-inset-bottom, 0px);
    --header-h: 60px;
    --nav-h:    62px;
    --r:        12px;
    --r-sm:     8px;
    --r-lg:     16px;
    --r-xl:     20px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: none; outline: none; background: none; }
input, textarea, select { font-family: inherit; outline: none; }
a { color: inherit; text-decoration: none; }

/* ── Base ── */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg) !important;
    color: var(--text) !important;
    color-scheme: dark;
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Prevent Telegram light theme from overriding text colors */
.app, .app * {
    color: inherit;
}
.app {
    color: var(--text);
}

/* Background gradient */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 70% 50% at 15% 0%, rgba(99,102,241,0.1) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 100%, rgba(139,92,246,0.09) 0%, transparent 50%),
        linear-gradient(160deg, #0A0A18 0%, #0D0D1F 50%, #0A0A14 100%);
}

/* ── Utilities ── */
.hidden { display: none !important; }

/* ── Loading ── */
.loading-screen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg); gap: 18px;
    transition: opacity 0.4s;
}
.loading-screen.fade-out { opacity: 0; pointer-events: none; }
.loading-spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid rgba(99,102,241,0.12);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: var(--text2); font-size: 13px; font-weight: 500; }

/* ================================================================
   APP SHELL
   ================================================================ */
.app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0;
}
@keyframes appIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ================================================================
   HEADER
   ================================================================ */
.header {
    position: sticky; top: 0; z-index: 100;
    flex-shrink: 0;
    padding: 0 16px;
    height: var(--header-h);
    display: flex; align-items: center;
    background: rgba(10,10,20,0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}
.header-content {
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    height: 56px; width: 100%;
}
.header-center {
    flex: 1; overflow: hidden;
}
.header-title {
    font-size: 17px; font-weight: 800; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0;
}
.header-left {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
}
.header-right {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
}
.back-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); transition: background 0.15s;
}
.back-btn:active { background: var(--bg2); }
.back-btn.hidden { display: none !important; }

/* Avatar */
.avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.header-info { min-width: 0; }
.header-name {
    font-size: 15px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.header-subtitle { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* Workspace select */
.workspace-select {
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 20px;
    color: var(--text);
    font-size: 12px; font-weight: 600;
    padding: 6px 12px 6px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    max-width: 130px;
}

/* Leave workspace btn */
.leave-workspace-btn {
    width: 34px; height: 34px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: 10px; color: #f87171;
    font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.leave-workspace-btn:active { background: rgba(239,68,68,0.2); transform: scale(0.9); }

/* ================================================================
   QUICK STATS
   ================================================================ */
.stat-card {
    flex: 1; min-width: 0;
    background: var(--bg3);
    border-radius: var(--r);
    border: 1px solid var(--border);
    padding: 8px 6px 7px;
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; position: relative; overflow: hidden;
    cursor: default;
}
.stat-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; border-radius: 2px 2px 0 0;
}
.stat-total::after    { background: linear-gradient(90deg, var(--cyan), var(--accent)); }
.stat-active::after   { background: linear-gradient(90deg, var(--yellow), var(--orange)); }
.stat-done::after     { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.stat-overdue::after  { background: linear-gradient(90deg, var(--red), var(--pink)); }

.stat-number {
    font-size: 17px; font-weight: 800; line-height: 1;
}
.stat-total .stat-number    { color: var(--cyan); }
.stat-active .stat-number   { color: var(--yellow); }
.stat-done .stat-number     { color: var(--green); }
.stat-overdue .stat-number  { color: var(--red); }

.stat-label {
    font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase; color: var(--text3);
}

/* Quick stats compact spacing */
.quick-stats {
    display: flex; gap: 6px;
    padding: 8px 12px 6px;
    flex-shrink: 0;
}

/* ================================================================
   TAB CONTENT
   ================================================================ */
.tab-content { flex: 1; position: relative; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
@keyframes tabIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.tab-pane.active { animation: tabIn 0.22s ease both; }

/* ================================================================
   TASKS TAB — Subtab Bar
   ================================================================ */
.tasks-subtab-bar {
    display: flex;
    padding: 10px 16px 0;
    border-bottom: 1px solid var(--border);
    background: rgba(10,10,20,0.9);
    backdrop-filter: blur(12px);
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    gap: 4px;
}
.tasks-subtab {
    flex: 1;
    padding: 8px 4px 10px;
    background: none; border: none;
    border-bottom: 2.5px solid transparent;
    color: var(--text3);
    font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.tasks-subtab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ================================================================
   FILTER CHIPS — Segmented control
   ================================================================ */
#panel-regular, #panel-workflow {
    padding: 10px 16px 0;
    width: 100%;
    box-sizing: border-box;
}

.filter-chips, .wf-filter-chips {
    display: flex;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 30px;
    padding: 3px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar,
.wf-filter-chips::-webkit-scrollbar { display: none; }

.chip {
    flex: 1; min-width: fit-content;
    padding: 7px 12px;
    border-radius: 24px;
    border: none; background: transparent;
    color: var(--text3);
    font-size: 12px; font-weight: 600;
    white-space: nowrap; text-align: center;
    cursor: pointer; transition: all 0.18s;
}
.chip.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99,102,241,0.35);
}
.chip:active { transform: scale(0.96); }

/* ================================================================
   TASK LIST & CARDS
   ================================================================ */
.task-list {
    display: flex; flex-direction: column; gap: 8px;
    padding-bottom: 20px;
}

.tc-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 14px 12px 18px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    position: relative; overflow: hidden;
}
.tc-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.tc-card[data-priority="low"]::before    { background: var(--green); }
.tc-card[data-priority="medium"]::before { background: var(--yellow); }
.tc-card[data-priority="high"]::before   { background: var(--orange); }
.tc-card[data-priority="urgent"]::before { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,0.5); }

.tc-card:active { transform: scale(0.985); box-shadow: 0 2px 16px rgba(0,0,0,0.3); }
.tc-card[data-status="done"] { opacity: 0.65; }
.tc-card[data-status="done"] .tc-title { text-decoration: line-through; color: var(--text2); }
.tc-card[data-status="cancelled"] { opacity: 0.4; }
.tc-card[data-status="cancelled"] .tc-title { text-decoration: line-through; color: var(--text3); }

/* Card content */
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tc-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; flex: 1; }
.tc-status-badge {
    flex-shrink: 0;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; display: flex; align-items: center; gap: 4px;
}
.tc-status-badge.s-new        { background: rgba(99,102,241,0.15); color: #818CF8; }
.tc-status-badge.s-in_progress{ background: rgba(245,158,11,0.15);  color: #FBBF24; }
.tc-status-badge.s-review      { background: rgba(6,182,212,0.15);   color: #22D3EE; }
.tc-status-badge.s-done        { background: rgba(16,185,129,0.15);  color: #34D399; }
.tc-status-badge.s-cancelled   { background: rgba(107,114,128,0.15); color: #9CA3AF; }
.tc-status-badge.s-overdue     { background: rgba(239,68,68,0.15);   color: #F87171; }

.tc-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tc-priority {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px;
}
.tc-priority.p-low    { background: rgba(16,185,129,0.12);  color: var(--green);  border: 1px solid rgba(16,185,129,0.2); }
.tc-priority.p-medium { background: rgba(245,158,11,0.12);  color: var(--yellow); border: 1px solid rgba(245,158,11,0.2); }
.tc-priority.p-high   { background: rgba(249,115,22,0.12);  color: var(--orange); border: 1px solid rgba(249,115,22,0.2); }
.tc-priority.p-urgent { background: rgba(239,68,68,0.12);   color: var(--red);    border: 1px solid rgba(239,68,68,0.2); }

.tc-deadline { font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 3px; }
.tc-deadline.overdue { color: var(--red); font-weight: 700; }
.tc-deadline.soon    { color: var(--orange); font-weight: 700; }

.tc-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 6px; }
.tc-assignees { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; flex: 1; }
.tc-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #fff;
    border: 1.5px solid var(--bg3);
    flex-shrink: 0;
}
.tc-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tc-name { font-size: 11px; color: var(--text2); }
.tc-subtasks { font-size: 11px; color: var(--text3); }

/* Empty state */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 60px 20px; gap: 10px; text-align: center;
}
.empty-icon { font-size: 48px; opacity: 0.6; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--text2); }
.empty-state p { font-size: 13px; color: var(--text3); }

/* ================================================================
   WORKFLOW LIST
   ================================================================ */
.workflow-list { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; }

.wf-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
    position: relative; overflow: hidden;
}
.wf-card:active { transform: scale(0.985); }

.wf-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wf-card-title { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; line-height: 1.4; }
.wf-card-progress { font-size: 12px; font-weight: 700; color: var(--text3); }
.wf-card-bar { height: 3px; background: var(--border); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.wf-card-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.wf-bar-done { background: var(--green); }
.wf-bar-active { background: var(--accent); }
.wf-bar-new { background: var(--text3); }

.wf-card-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; margin-top: 8px;
}
.wf-status-active { background: rgba(99,102,241,0.15); color: #818CF8; }
.wf-status-done   { background: rgba(16,185,129,0.15);  color: var(--green); }
.wf-status-new    { background: rgba(107,114,128,0.15); color: var(--text3); }

.wf-card-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.wf-card-meta span { font-size: 11px; color: var(--text3); }

.wf-step-line {
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 12px; color: var(--text2);
    display: flex; align-items: center; gap: 6px;
}

.wf-empty { padding: 60px 20px; text-align: center; color: var(--text3); font-size: 14px; }
.wf-tip {
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: var(--r);
    padding: 12px 14px;
    font-size: 12px; color: var(--text2);
    margin-top: 12px;
}
.wf-tip code {
    background: rgba(99,102,241,0.2); color: var(--accent);
    padding: 2px 6px; border-radius: 4px; font-size: 11px;
}

/* ================================================================
   CREATE FORM
   ================================================================ */
.create-form { padding: 16px 16px 24px; }
.form-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.form-hint { font-size: 12px; color: var(--text3); margin-top: 4px; }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.4px; }

.form-input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--r);
    color: var(--text);
    font-size: 14px;
    padding: 11px 14px;
    transition: border-color 0.18s;
    resize: none;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text3); }
.form-textarea { min-height: 80px; resize: vertical; }

.char-count { font-size: 11px; color: var(--text3); text-align: right; margin-top: 4px; display: block; }

/* Task type selector */
.task-type-selector { display: flex; gap: 8px; }
.task-type-btn {
    flex: 1; padding: 12px 8px;
    background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: var(--r); color: var(--text2);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    transition: all 0.18s; cursor: pointer;
}
.task-type-btn.selected {
    border-color: var(--accent);
    background: rgba(99,102,241,0.1);
    color: var(--text);
}
.task-type-icon { font-size: 20px; }
.task-type-text { font-size: 12px; font-weight: 700; }

/* Workspace pill */
.workspace-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 13px; font-weight: 600; color: var(--text);
    cursor: pointer;
}

/* Priority selector */
.priority-selector { display: flex; gap: 6px; flex-wrap: wrap; }
.priority-btn {
    flex: 1; min-width: calc(50% - 3px);
    padding: 9px 8px;
    background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: var(--r-sm); color: var(--text2);
    font-size: 12px; font-weight: 700;
    transition: all 0.18s; cursor: pointer; text-align: center;
}
.priority-btn.selected { color: #fff; }
.priority-btn[data-priority="low"].selected    { background: rgba(16,185,129,0.25);  border-color: var(--green); }
.priority-btn[data-priority="medium"].selected { background: rgba(245,158,11,0.25);  border-color: var(--yellow); }
.priority-btn[data-priority="high"].selected   { background: rgba(249,115,22,0.25);  border-color: var(--orange); }
.priority-btn[data-priority="urgent"].selected { background: rgba(239,68,68,0.25);   border-color: var(--red); }

/* Deadline picker */
.dl-picker-btn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--r); padding: 11px 14px;
    color: var(--text2); font-size: 14px;
    transition: border-color 0.18s; cursor: pointer;
}
.dl-picker-btn:hover { border-color: var(--accent); }
.dl-picker-icon { font-size: 16px; }
.dl-picker-text { flex: 1; text-align: left; }
.dl-picker-clear { color: var(--text3); font-size: 13px; padding: 2px; }
.dl-quick-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.dl-quick-btn {
    flex: 1; min-width: fit-content;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
    border-radius: 20px; color: var(--accent);
    font-size: 11px; font-weight: 700;
    padding: 6px 10px; cursor: pointer; white-space: nowrap;
    transition: all 0.15s;
}
.dl-quick-btn:active { background: rgba(99,102,241,0.2); }

/* Assignees */
.assignees-list { display: flex; flex-direction: column; gap: 4px; }
.assignee-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-sm); cursor: pointer;
    transition: all 0.15s;
}
.assignee-item.selected { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.assignee-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.assignee-item.selected .assignee-check { background: var(--accent); border-color: var(--accent); }
.assignee-item.selected .assignee-check::after { content: '✓'; font-size: 10px; color: #fff; font-weight: 800; }
.assignee-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.assignee-name { font-size: 13px; font-weight: 600; color: var(--text); }

/* Responsible display */
#resp-display { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm); }

/* Workflow steps */
.workflow-steps-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

/* ── Yangi workflow qadam kartochkasi ── */
.wf-step-card {
    background: var(--bg3);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.wf-step-card:focus-within {
    border-color: rgba(99,102,241,0.5);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
}
/* Yuqori qator: badge + sarlavha input + o'chirish */
.wf-step-head {
    display: flex; align-items: center; gap: 10px;
}
.wf-step-badge {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff; font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.wf-step-title-inp {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text); font-size: 14px; font-weight: 600;
    padding: 0; min-width: 0;
}
.wf-step-title-inp::placeholder { color: var(--text3); font-weight: 400; font-size: 13px; }
.wf-step-del {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.18);
    color: var(--red); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s;
}
.wf-step-del:active { background: rgba(239,68,68,0.18); transform: scale(0.93); }

/* Pastki qator: ijrochi select + deadline */
.wf-step-foot {
    display: flex; gap: 8px; align-items: center;
}
.wf-step-sel {
    flex: 1; min-width: 0;
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 8px; color: var(--text); font-size: 12px;
    padding: 7px 10px; outline: none; cursor: pointer;
    transition: border-color 0.15s;
}
.wf-step-sel:focus { border-color: var(--accent); }
.wf-step-dl-pill {
    flex-shrink: 0; display: flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.22);
    color: var(--accent); font-size: 11px; font-weight: 700;
    transition: all 0.15s;
}
.wf-step-dl-pill.has-dl {
    border-color: rgba(16,185,129,0.4); color: var(--green);
    background: rgba(16,185,129,0.08);
}
.wf-step-dl-pill:active { transform: scale(0.96); }

/* Eski editor klasslari — orqaga moslik */
.wf-step-editor { display: none; }
.wf-step-assign-btn, .wf-step-dl-btn {
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
    border-radius: 8px; color: var(--accent); font-size: 11px; font-weight: 700;
    padding: 5px 8px; cursor: pointer; white-space: nowrap; transition: all 0.15s; flex-shrink: 0;
}
.wf-step-dl-btn.has-dl { border-color: var(--green); color: var(--green); background: rgba(16,185,129,0.08); }
.btn-remove-step {
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px; width: 28px; height: 28px;
    color: var(--red); font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: all 0.15s;
}
.btn-remove-step:active { background: rgba(239,68,68,0.25); }

.btn-add-step {
    width: 100%; padding: 10px;
    background: rgba(99,102,241,0.06); border: 1px dashed rgba(99,102,241,0.3);
    border-radius: var(--r); color: var(--accent); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.18s;
}
.btn-add-step:active { background: rgba(99,102,241,0.12); }

/* Create button */
.btn-create {
    width: 100%; padding: 15px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border-radius: var(--r-lg); color: #fff;
    font-size: 15px; font-weight: 800;
    cursor: pointer; transition: all 0.18s; margin-top: 8px;
    box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.btn-create:active { transform: scale(0.98); box-shadow: 0 2px 12px rgba(99,102,241,0.25); }
.btn-text { display: inline; }
.btn-loading { display: none; }
.btn-create.loading .btn-text { display: none; }
.btn-create.loading .btn-loading { display: inline; }

/* ================================================================
   CALENDAR TAB
   ================================================================ */
.cal-wrap { padding: 14px 16px 24px; }

/* Header */
.cal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.cal-month-label { font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.3px; }
.cal-nav-btn {
    width: 36px; height: 36px; border-radius: 12px;
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text2); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s; font-size: 0;
}
.cal-nav-btn:active { background: var(--border2); transform: scale(0.93); }

/* Legend */
.cal-legend {
    display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--bg3); border-radius: var(--r); border: 1px solid var(--border);
}
.cal-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); font-weight: 600; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-dot-overdue { background: var(--red); box-shadow: 0 0 4px rgba(239,68,68,0.6); }
.cal-dot-urgent  { background: var(--orange); }
.cal-dot-high    { background: var(--yellow); }
.cal-dot-normal  { background: var(--accent); }
.cal-dot-done    { background: var(--green); }

/* Day names */
.cal-day-names {
    display: grid; grid-template-columns: repeat(7,1fr);
    text-align: center; margin-bottom: 4px;
}
.cal-day-names span {
    font-size: 11px; color: var(--text3); font-weight: 700;
    padding: 6px 0; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Calendar grid */
.cal-grid {
    display: grid; grid-template-columns: repeat(7,1fr);
    gap: 4px; margin-bottom: 16px;
}

/* Each calendar cell */
.cal-cell {
    aspect-ratio: 1; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; position: relative;
    transition: background 0.15s, transform 0.1s;
    padding: 0;
}
.cal-cell:active { transform: scale(0.9); }
.cal-cell-empty { cursor: default; }
.cal-cell:not(.cal-cell-empty):hover { background: var(--bg3); }

.cal-day-num {
    font-size: 13px; font-weight: 600; color: var(--text2);
    line-height: 1; margin-bottom: 3px;
}
.cal-cell.cal-has-tasks .cal-day-num { color: var(--text); font-weight: 700; }
.cal-cell.cal-past-tasks .cal-day-num { color: var(--red); }

.cal-cell.cal-today {
    background: rgba(99,102,241,0.15);
    border: 1.5px solid rgba(99,102,241,0.4);
}
.cal-cell.cal-today .cal-day-num { color: var(--accent); font-weight: 800; }

.cal-cell.cal-selected {
    background: var(--accent);
    box-shadow: 0 3px 14px rgba(99,102,241,0.4);
}
.cal-cell.cal-selected .cal-day-num { color: #fff; font-weight: 800; }
.cal-cell.cal-selected .cal-dot { opacity: 0.8; }

/* Dots inside cell */
.cal-dots {
    display: flex; gap: 2px; align-items: center;
    min-height: 5px;
}
.cal-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cal-more { font-size: 8px; font-weight: 800; color: var(--text3); }

/* ── Day Panel (selected date tasks) ── */
.cal-day-panel {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-xl); overflow: hidden;
}

.cal-panel-header {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}
.cal-panel-date { font-size: 15px; font-weight: 800; color: var(--text); }
.cal-panel-today-badge {
    background: var(--accent); color: #fff;
    font-size: 10px; font-weight: 800; padding: 3px 8px;
    border-radius: 20px; letter-spacing: 0.2px;
}
.cal-panel-count {
    margin-left: auto; font-size: 11px; color: var(--text3); font-weight: 700;
    background: var(--bg2); padding: 3px 10px; border-radius: 20px;
}

.cal-panel-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; padding: 30px 20px;
    color: var(--text3); font-size: 13px; text-align: center;
}
.cal-panel-empty span { font-size: 32px; opacity: 0.5; }

/* Task rows in panel */
.cal-panel-tasks { display: flex; flex-direction: column; }

.cal-task-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s;
}
.cal-task-row:last-child { border-bottom: none; }
.cal-task-row:active { background: rgba(255,255,255,0.04); }
.cal-task-row.cal-task-overdue { background: rgba(239,68,68,0.04); }

.cal-task-time {
    font-size: 12px; font-weight: 800; color: var(--text3);
    min-width: 36px; text-align: center;
    padding: 4px 6px; background: var(--bg2);
    border-radius: 8px; flex-shrink: 0;
}
.time-overdue { color: var(--red); background: rgba(239,68,68,0.1); }

.cal-task-info { flex: 1; min-width: 0; }
.cal-task-title {
    font-size: 14px; font-weight: 700; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 5px;
}
.cal-task-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-task-assignees { font-size: 11px; color: var(--text3); }
.cal-task-arrow { color: var(--text3); flex-shrink: 0; }

/* ================================================================
   KANBAN TAB
   ================================================================ */
.kanban-wrap { display: flex; flex-direction: column; height: calc(100dvh - var(--header-h)); }

/* Member bar */
.kanban-member-bar {
    display: flex; gap: 10px; padding: 10px 16px 8px;
    overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
    background: rgba(10,10,20,0.9); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: var(--header-h); z-index: 40;
}
.kanban-member-bar::-webkit-scrollbar { display: none; }

.kmb-chip {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex-shrink: 0; cursor: pointer;
}
.kmb-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--bg3);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: var(--text2);
    border: 2px solid transparent; transition: all 0.18s;
    position: relative;
}
.kmb-avatar.all-icon { font-size: 18px; }
.kmb-chip.active .kmb-avatar { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.2); }
.kmb-badge {
    position: absolute; top: -2px; right: -2px;
    background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 800;
    min-width: 16px; height: 16px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; border: 2px solid var(--bg);
}
.kmb-name {
    font-size: 10px; color: var(--text3); font-weight: 600;
    max-width: 50px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kmb-chip.active .kmb-name { color: var(--accent); }

/* Column tabs (mobile) */
.kanban-col-tabs {
    display: flex; flex-shrink: 0;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}
.kct-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 4px 7px;
    font-size: 10px; font-weight: 700; color: var(--text3);
    cursor: pointer; border-bottom: 2.5px solid transparent;
    transition: all 0.15s; white-space: nowrap;
}
.kct-icon { font-size: 14px; }
.kct-count { font-size: 13px; font-weight: 800; color: inherit; }
.kct-new.active      { color: #818CF8; border-color: #818CF8; }
.kct-progress.active { color: #FBBF24; border-color: #FBBF24; }
.kct-review.active   { color: #22D3EE; border-color: #22D3EE; }
.kct-done.active     { color: #34D399; border-color: #34D399; }

/* Board */
.kanban-board {
    display: flex; flex: 1;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.kanban-board::-webkit-scrollbar { display: none; }

.kanban-col {
    width: 100%; min-width: 100%; flex-shrink: 0;
    scroll-snap-align: start;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.kanban-col-header {
    display: none;
    align-items: center; gap: 8px;
    padding: 12px 16px 10px;
    font-size: 14px; font-weight: 800;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
}
.kanban-new-h     { color: #818CF8; }
.kanban-progress-h{ color: #FBBF24; }
.kanban-review-h  { color: #22D3EE; }
.kanban-done-h    { color: #34D399; }
.kanban-col-count {
    margin-left: auto; background: var(--bg3);
    border-radius: 20px; padding: 2px 8px; font-size: 12px; font-weight: 700;
}

.kanban-cards {
    flex: 1; overflow-y: auto;
    padding: 12px 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.kanban-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 40px 20px;
    color: var(--text3); font-size: 13px; text-align: center;
    flex: 1;
}
.kanban-empty-icon { font-size: 32px; opacity: 0.5; }

/* Kanban cards */
.kanban-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 12px 12px 10px 16px;
    cursor: pointer; position: relative; overflow: hidden;
    transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    box-shadow: 0 1px 6px rgba(0,0,0,0.2);
}
.kanban-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; border-radius: var(--r) 0 0 var(--r);
}
.kanban-card[data-priority="low"]::before    { background: var(--green); }
.kanban-card[data-priority="medium"]::before { background: var(--yellow); }
.kanban-card[data-priority="high"]::before   { background: var(--orange); }
.kanban-card[data-priority="urgent"]::before { background: var(--red); box-shadow: 0 0 8px rgba(239,68,68,0.5); }
.kanban-card:active { transform: scale(0.975); }

.kanban-card-title { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.4; margin-bottom: 8px; }
.kanban-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kanban-card-prio { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 700; }
.prio-low    { background: rgba(16,185,129,0.12);  color: var(--green); }
.prio-medium { background: rgba(245,158,11,0.12);  color: var(--yellow); }
.prio-high   { background: rgba(249,115,22,0.12);  color: var(--orange); }
.prio-urgent { background: rgba(239,68,68,0.12);   color: var(--red); }

.kanban-card-dl { font-size: 10px; color: var(--text3); margin-left: auto; }
.kanban-card-dl-urgent { color: var(--red); font-weight: 700; }
.kanban-card-resp { font-size: 11px; color: #A78BFA; margin-top: 6px; }
.kanban-card-subtasks { font-size: 10px; color: var(--text3); margin-top: 4px; }

/* ================================================================
   STATS TAB
   ================================================================ */
.stats-container { padding: 16px 16px 24px; }
.stats-header { margin-bottom: 16px; }
.stats-header h2 { font-size: 18px; font-weight: 800; }
.stats-period { font-size: 12px; color: var(--text3); margin-top: 3px; }

.progress-section {
    display: flex; flex-direction: column; align-items: center;
    padding: 20px 0 16px; margin-bottom: 16px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-xl);
}
.progress-circle-container { position: relative; width: 130px; height: 130px; }
.progress-circle { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-bg { fill: none; stroke: var(--border2); stroke-width: 8; }
.progress-bar {
    fill: none; stroke: url(#progress-gradient);
    stroke-width: 8; stroke-linecap: round;
    stroke-dasharray: 326.7; stroke-dashoffset: 326.7;
    transition: stroke-dashoffset 1s ease;
}
.progress-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 1px;
}
.progress-value { font-size: 30px; font-weight: 800; color: var(--text); }
.progress-label { font-size: 14px; color: var(--text2); align-self: flex-end; padding-bottom: 6px; }
.progress-desc { font-size: 12px; color: var(--text3); margin-top: 10px; font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.stats-item {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r); padding: 12px;
    display: flex; align-items: center; gap: 10px;
}
.stats-item-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.stats-item-icon .ic { width: 18px; height: 18px; }
.stats-item-value { font-size: 20px; font-weight: 800; color: var(--text); display: block; }
.stats-item-label { font-size: 11px; color: var(--text3); font-weight: 600; }

.chart-section {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 16px; margin-bottom: 10px;
}
.chart-title { font-size: 13px; font-weight: 800; color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.chart-title .ic { width: 15px; height: 15px; flex-shrink: 0; }
.chart-wrap { position: relative; height: 200px; }
.chart-wrap-tall { height: 280px; }
#stats-tab-title { font-size: 18px; font-weight: 800; }

/* ================================================================
   STATS MEMBER FILTER PANEL
   ================================================================ */
.smf-panel {
    margin: 0 0 12px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: var(--r-lg);
    padding: 12px 14px;
}
.smf-title {
    font-size: 12px; font-weight: 700;
    color: var(--text3); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 10px;
    display: flex; align-items: center; gap: 6px;
}
.smf-chips-row {
    display: flex; gap: 8px;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none;
}
.smf-chips-row::-webkit-scrollbar { display: none; }

/* Each member chip */
.smf-chip {
    flex-shrink: 0;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding: 8px 12px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 70px;
}
.smf-chip:active { transform: scale(0.95); }
.smf-chip.smf-chip-active {
    border-color: var(--accent);
    background: rgba(99,102,241,0.10);
}

/* "Hammasi" chip — wider, horizontal */
.smf-chip:first-child {
    flex-direction: row; gap: 6px;
    min-width: auto; padding: 8px 14px;
}
.smf-chip-icon { font-size: 16px; line-height: 1; }
.smf-chip-top {
    display: flex; align-items: center; gap: 4px;
}
.smf-chip-role-icon { font-size: 14px; line-height: 1; }
.smf-chip-name {
    font-size: 12px; font-weight: 700;
    color: var(--text); white-space: nowrap;
}
.smf-chip-stats {
    display: flex; flex-direction: column;
    align-items: center; gap: 1px;
}
.smf-chip-pct {
    font-size: 13px; font-weight: 800;
    color: var(--accent);
}
.smf-chip-sub {
    font-size: 10px; color: var(--text3); font-weight: 600;
}

/* Role-based border accent */
.smf-role-owner  { border-color: rgba(245,158,11,0.4); }
.smf-role-admin  { border-color: rgba(99,102,241,0.4); }
.smf-role-manager{ border-color: rgba(6,182,212,0.4); }
.smf-role-member { border-color: var(--border); }

.smf-role-owner.smf-chip-active  { background: rgba(245,158,11,0.10); border-color: var(--yellow); }
.smf-role-admin.smf-chip-active  { background: rgba(99,102,241,0.10); border-color: var(--accent); }

/* Selected member label */
.smf-selected-label {
    margin-top: 8px; padding: 6px 10px;
    background: rgba(99,102,241,0.08);
    border-radius: 8px; font-size: 12px;
    color: var(--text2);
}

/* ================================================================
   NAVIGATION — faqat sidebar orqali
   ================================================================ */
.bottom-nav { display: none; }
.top-nav    { display: none; }

/* Floating Action Button — vazifa qo'shish */
.fab-create {
    position: fixed;
    bottom: calc(24px + var(--safe-b));
    right: 20px;
    z-index: 250;
    width: 56px; height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(99,102,241,0.55);
    transition: transform 0.18s, box-shadow 0.18s;
}
.fab-create:active {
    transform: scale(0.92);
    box-shadow: 0 3px 12px rgba(99,102,241,0.35);
}

.bnav-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding: 5px 12px; border-radius: var(--r);
    color: var(--text3); font-size: 10px; font-weight: 700;
    transition: color 0.15s, background 0.15s; cursor: pointer;
    border: none; background: none; min-width: 52px;
}
.bnav-btn.active { color: var(--accent); }
.bnav-icon { font-size: 0; line-height: 0; }
.bnav-icon svg { display: block; }
.bnav-label { font-size: 10px; font-weight: 700; }

/* Create button */
.bnav-create {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff !important; padding: 0;
    box-shadow: 0 4px 16px rgba(99,102,241,0.45);
    display: flex; align-items: center; justify-content: center;
    flex-direction: row; gap: 0;
    transition: transform 0.15s, box-shadow 0.15s;
    min-width: 44px;
}
.bnav-create:active { transform: scale(0.93); box-shadow: 0 2px 10px rgba(99,102,241,0.3); }
.bnav-create-icon { font-size: 0; }

/* ================================================================
   MODAL — Task Detail
   ================================================================ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
}
.modal-overlay.hidden { display: none; }
.modal {
    width: 100%; max-height: 92dvh;
    background: var(--bg2); border-radius: 24px 24px 0 0;
    display: flex; flex-direction: column;
    animation: slideUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes slideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title { font-size: 16px; font-weight: 800; color: var(--text); flex: 1; margin-right: 10px; }
.modal-close {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg3); border: 1px solid var(--border);
    color: var(--text2); font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; transition: all 0.15s;
}
.modal-close:active { background: var(--bg); }
.modal-body {
    flex: 1; overflow-y: auto; padding: 10px 16px;
    -webkit-overflow-scrolling: touch;
}
.modal-actions {
    padding: 5px 12px calc(5px + var(--safe-b));
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
    background: var(--bg2);
}

/* Modal content elements */
.modal-section { margin-bottom: 16px; }
.modal-section-title { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.modal-desc { font-size: 14px; color: var(--text2); line-height: 1.6; }
.modal-info-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.modal-info-row:last-child { border-bottom: none; }
.modal-info-key { font-size: 13px; color: var(--text3); }
.modal-info-val { font-size: 13px; font-weight: 600; color: var(--text); }
.modal-assignee-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }

/* Action buttons inside modal */
.modal-btn {
    flex: 1; min-width: calc(50% - 4px);
    padding: 12px 8px;
    border-radius: var(--r); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; text-align: center;
}
.modal-btn-primary { background: var(--accent); color: #fff; }
.modal-btn-secondary { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); }
.modal-btn-success { background: var(--green); color: #fff; }
.modal-btn-danger { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: var(--red); }
.modal-btn:active { transform: scale(0.97); }

/* Subtask section in modal */
.subtask-section { margin-top: 12px; }
.subtask-section-title { font-size: 12px; font-weight: 700; color: var(--text3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.4px; }
.subtask-item {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-sm); margin-bottom: 4px; cursor: pointer;
    transition: border-color 0.15s;
}
.subtask-item:active { border-color: var(--accent); }
.subtask-status { font-size: 14px; }
.subtask-title { flex: 1; font-size: 13px; color: var(--text); }
.subtask-done .subtask-title { text-decoration: line-through; color: var(--text3); }
.subtask-add-btn {
    width: 100%; padding: 9px; margin-top: 6px;
    background: transparent; border: 1px dashed var(--border2);
    border-radius: var(--r-sm); color: var(--accent);
    font-size: 13px; font-weight: 600; cursor: pointer; text-align: center;
}

/* Step completion modal */
.step-modal-overlay, .sc-modal-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
}
.step-modal-overlay.hidden, .sc-modal-overlay.hidden { display: none; }
.step-modal-sheet, .sc-modal-sheet {
    width: 100%; background: var(--bg2);
    border-radius: 24px 24px 0 0;
    padding: 16px 18px calc(16px + var(--safe-b));
    animation: slideUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.step-modal-title, .sc-modal-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.step-modal-files-wrap { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.step-file-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: 8px 12px; font-size: 12px; color: var(--text2);
}
.step-file-rm { color: var(--red); font-size: 14px; cursor: pointer; padding: 2px 6px; }
.step-modal-hint { font-size: 12px; color: var(--text3); text-align: center; padding: 10px 0; }
.step-modal-actions { display: flex; gap: 8px; margin-top: 10px; }

/* Subtask modal overlay */
.st-modal-overlay {
    position: fixed; inset: 0; z-index: 350;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
}
.st-modal-overlay.hidden { display: none; }
.st-modal-sheet {
    width: 100%; background: var(--bg2);
    border-radius: 24px 24px 0 0;
    padding: 18px 18px calc(18px + var(--safe-b));
    animation: slideUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.st-modal-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.st-input {
    width: 100%; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--r); color: var(--text); font-size: 14px; padding: 11px 14px;
    margin-bottom: 10px;
}
.st-input:focus { border-color: var(--accent); }
.st-actions { display: flex; gap: 8px; }

/* Media preview overlay */
/* ═══════════════════════════════════════════════
   MEDIA GALLERY — Full redesign
   ═══════════════════════════════════════════════ */
.media-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(12px) saturate(1.4);
    display: flex; align-items: flex-end; justify-content: center;
}
.media-overlay.hidden { display: none; }

/* Bottom sheet */
.media-sheet {
    width: 100%;
    background: var(--bg1);
    border-radius: 24px 24px 0 0;
    padding: 0 0 calc(8px + var(--safe-b));
    max-height: 88dvh;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.media-sheet.media-sheet-open { transform: translateY(0); }

/* Drag handle */
.media-sheet::before {
    content: '';
    display: block; width: 40px; height: 4px;
    background: var(--border2); border-radius: 2px;
    margin: 12px auto 0; flex-shrink: 0;
}

/* Header */
.media-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.media-sheet-title {
    font-size: 16px; font-weight: 700; color: var(--text1);
    display: flex; align-items: center; gap: 8px;
}
.media-sheet-title::before {
    content: '';
    display: inline-block; width: 8px; height: 8px;
    background: var(--accent); border-radius: 50%;
}
.media-sheet-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg3); border: none;
    color: var(--text2); font-size: 16px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.media-sheet-close:active { background: var(--border2); transform: scale(.9); }

/* Upload area */
.mg-upload-area {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Input row: textarea + send button */
.mg-input-row {
    display: flex; align-items: flex-end; gap: 8px;
}
.mg-comment-input {
    flex: 1;
    background: var(--bg3);
    border: 1.5px solid var(--border2);
    border-radius: 14px;
    color: var(--text1);
    font-size: 14px;
    padding: 10px 14px;
    resize: none;
    height: 42px;
    min-height: 42px;
    max-height: 120px;
    line-height: 1.45;
    transition: border-color .2s, background .15s;
    font-family: inherit;
    overflow-y: auto;
}
.mg-comment-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg1);
}
.mg-comment-input::placeholder { color: var(--text3); }

.mg-send-btn {
    width: 42px; height: 42px; flex-shrink: 0;
    background: var(--accent);
    border: none; border-radius: 13px;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 2px 8px rgba(99,102,241,.4);
}
.mg-send-btn:active { opacity: .8; transform: scale(.93); }
.mg-send-btn:disabled { opacity: .4; pointer-events: none; }

/* File upload button — secondary row */
.mg-upload-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--bg3);
    border: 1.5px solid var(--border2);
    color: var(--text2);
    border-radius: 12px;
    padding: 9px 16px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s, transform .1s;
    align-self: flex-start;
}
.mg-upload-btn:active { border-color: var(--accent); background: var(--bg1); transform: scale(.97); }
.mg-upload-btn svg { flex-shrink: 0; }

/* Scrollable list */
.mg-list {
    flex: 1; overflow-y: auto;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 14px;
}

/* Empty state */
.mg-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 14px;
    padding: 48px 24px;
    color: var(--text3);
    text-align: center;
}
.mg-empty::before {
    content: '📂';
    font-size: 52px; opacity: .6;
}
.mg-empty {
    font-size: 15px; font-weight: 500;
}

/* Single media card */
.mg-item {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.mg-item:active { border-color: var(--accent); }

/* Preview area */
.mg-preview { width: 100%; background: var(--bg3); }

/* Image */
.mg-img-link { display: block; }
.mg-img {
    width: 100%; max-height: 280px;
    object-fit: cover; display: block;
    border-radius: 0;
}

/* Video */
.mg-video {
    width: 100%; max-height: 260px;
    display: block; background: #000;
    border-radius: 0;
}

/* Round video note */
.mg-vidnote-wrap {
    display: flex; justify-content: center;
    padding: 14px; background: var(--bg3);
}
.mg-vidnote {
    width: 160px; height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent);
}

/* Audio / voice */
.mg-audio-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; background: var(--bg3);
}
.mg-audio-icon { font-size: 28px; flex-shrink: 0; }
.mg-audio-info { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mg-audio-label { font-size: 12px; color: var(--text3); font-weight: 600; }
.mg-audio-player { width: 100%; height: 36px; accent-color: var(--accent); }

/* Document / file */
.mg-file-link {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    background: var(--bg3);
    transition: background .15s;
}
.mg-file-link:active { background: var(--bg2); }
.mg-file-icon { font-size: 32px; flex-shrink: 0; }
.mg-file-name {
    flex: 1; font-size: 14px; color: var(--text1);
    font-weight: 600; word-break: break-all; line-height: 1.35;
}

/* Meta row */
.mg-meta {
    padding: 10px 16px 13px;
    display: flex; flex-direction: column; gap: 4px;
    border-top: 1px solid var(--border);
}
.mg-uploader {
    font-size: 12px; color: var(--text2); font-weight: 600;
}
.mg-date { font-size: 11px; color: var(--text3); }
.mg-download-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; padding: 7px 14px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 10px; color: var(--text2);
    font-size: 12px; font-weight: 600; text-decoration: none;
    transition: background .15s, border-color .15s;
    align-self: flex-start;
}
.mg-download-btn:active { background: var(--bg1); border-color: var(--accent); color: var(--accent); }

/* Attachment list */
.attachment-list { display: flex; flex-direction: column; gap: 6px; }
.attachment-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
    transition: border-color 0.15s;
}
.attachment-item:active { border-color: var(--accent); }
.attachment-icon { font-size: 18px; }
.attachment-name { flex: 1; font-size: 12px; color: var(--text2); word-break: break-all; }
.attachment-size { font-size: 10px; color: var(--text3); }

/* Comment section */
.comment-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.comment-item {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r); padding: 10px 12px;
}
.comment-header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--accent); }
.comment-time { font-size: 11px; color: var(--text3); }
.comment-text { font-size: 13px; color: var(--text2); line-height: 1.5; }
.comment-input-row { display: flex; gap: 8px; }
.comment-input {
    flex: 1; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--r); color: var(--text); font-size: 13px; padding: 10px 12px;
}
.comment-input:focus { border-color: var(--accent); }
.comment-send {
    width: 40px; height: 40px; border-radius: var(--r);
    background: var(--accent); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer; transition: all 0.15s;
}

/* History */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.history-item:last-child { border-bottom: none; }
.history-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.history-text { font-size: 12px; color: var(--text2); flex: 1; line-height: 1.5; }
.history-time { font-size: 10px; color: var(--text3); flex-shrink: 0; }

/* ================================================================
   SHEETS (Group Picker, Responsible, Deadline, Invite)
   ================================================================ */
.gp-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
}
.gp-overlay.hidden { display: none; }
.gp-sheet {
    width: 100%; background: var(--bg2);
    border-radius: 24px 24px 0 0;
    max-height: 75dvh; display: flex; flex-direction: column;
    animation: slideUp 0.28s cubic-bezier(0.22,1,0.36,1) both;
}
.gp-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.gp-sheet-title { font-size: 15px; font-weight: 800; color: var(--text); }
.gp-close-btn {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg3); border: 1px solid var(--border);
    color: var(--text2); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.gp-back-btn {
    color: var(--accent); font-size: 14px; font-weight: 700; background: none; border: none; cursor: pointer; padding: 0 4px;
}
.gp-sheet-body { flex: 1; overflow-y: auto; padding: 12px 18px 16px; }
.gp-sheet.dl-sheet { max-height: 85dvh; }

/* Group / member items */
.gp-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer;
    transition: opacity 0.15s;
}
.gp-item:last-child { border-bottom: none; }
.gp-item:active { opacity: 0.7; }
.gp-item-icon { font-size: 20px; width: 36px; text-align: center; }
.gp-item-name { font-size: 14px; font-weight: 600; color: var(--text); }
.gp-item-sub  { font-size: 11px; color: var(--text3); }

/* Invite link */
.invite-link-box {
    background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--r);
    padding: 12px 14px; word-break: break-all;
}
.invite-link-text { font-size: 12px; color: var(--accent); font-weight: 600; }
.gp-invite-btn {
    width: 100%; padding: 13px 16px; border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none; color: #fff; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 4px 16px rgba(99,102,241,0.3);
    margin-top: 8px;
}
.gp-invite-btn:active { transform: scale(0.97); opacity: 0.9; }

/* Group row in picker */
.gp-group-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; margin-bottom: 8px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 14px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.gp-group-row:active { background: var(--card2); border-color: var(--accent); }
.gp-group-icon { font-size: 22px; flex-shrink: 0; }
.gp-group-name { flex: 1; font-size: 14px; font-weight: 700; color: var(--text); }
.gp-arrow { font-size: 18px; color: var(--text3); font-weight: 600; }
.gp-divider { height: 1px; background: var(--border); margin: 10px 0; }
.gp-loading, .gp-empty {
    text-align: center; padding: 24px; font-size: 13px; color: var(--text3);
}

/* Member row in group/resp picker */
.gp-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin-bottom: 6px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 12px; cursor: pointer;
    transition: all 0.15s;
}
.gp-member-row.selected { border-color: var(--accent); background: rgba(99,102,241,0.08); }
.gp-member-row:active { opacity: 0.75; }
.gp-member-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff; font-size: 14px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.gp-member-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.gp-check { font-size: 16px; }

/* ================================================================
   DEADLINE CALENDAR PICKER
   ================================================================ */
.dl-cal-wrap { padding: 14px 16px 6px; }
.dl-cal-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.dl-cal-month { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.2px; }
.dl-cal-nav {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text); font-size: 18px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.15s;
}
.dl-cal-nav:active { background: var(--border2); transform: scale(0.92); }
.dl-cal-days-h {
    display: grid; grid-template-columns: repeat(7,1fr);
    text-align: center; margin-bottom: 4px;
}
.dl-cal-days-h span { font-size: 10px; color: var(--text3); font-weight: 700; padding: 4px 0; text-transform: uppercase; }
.dl-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 8px; padding: 0 2px; }
.dl-d {
    aspect-ratio: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s;
    border: 1px solid transparent;
}
.dl-d:not([disabled]):hover { background: rgba(255,255,255,0.07); }
.dl-d:not([disabled]):active { transform: scale(0.88); }
.dl-d.dl-d-today {
    color: var(--accent); font-weight: 800;
    border-color: var(--accent);
    background: rgba(99,102,241,0.12);
}
.dl-d.dl-d-sel {
    background: var(--accent); color: #fff !important;
    font-weight: 800;
    box-shadow: 0 2px 10px rgba(99,102,241,0.6);
    border-color: transparent;
    transform: scale(1.1);
}
.dl-d.dl-d-today.dl-d-sel {
    background: var(--accent); color: #fff;
}
.dl-d.dl-d-past { color: var(--text3); opacity: 0.35; cursor: default; }
.dl-d.dl-d-out  { color: var(--text3); opacity: 0.2; cursor: default; }

/* Deadline picker selected preview */
.dl-sel-preview {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 16px 6px;
    padding: 10px 14px;
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: var(--r-lg);
    min-height: 42px;
}
.dl-sel-icon { font-size: 18px; flex-shrink: 0; }
.dl-sel-text { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }

/* Role Assignment Sheet */
.role-option {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: var(--r-lg);
    border: 1.5px solid var(--border);
    margin-bottom: 8px; cursor: pointer;
    transition: all 0.15s; background: var(--bg3);
}
.role-option.role-selected {
    border-color: var(--accent);
    background: rgba(99,102,241,0.1);
}
.role-option:active { transform: scale(0.97); }
.role-option-icon { font-size: 22px; flex-shrink: 0; }
.role-option-info { flex: 1; }
.role-option-label { font-size: 14px; font-weight: 700; color: var(--text); }
.role-option-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.role-current { font-size: 11px; font-weight: 700; color: var(--accent); flex-shrink: 0; }

/* Member role button */
.member-role-btn {
    padding: 5px 9px; border-radius: var(--r-sm);
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.25);
    color: var(--accent); font-size: 11px; font-weight: 700; cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
}
.member-role-btn:active { background: rgba(99,102,241,0.2); }

/* Task comments */
.task-comments-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.task-comment {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r); padding: 10px 12px;
}
.comment-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
}
.comment-author { font-size: 12px; font-weight: 700; color: var(--text); }
.comment-time { font-size: 10px; color: var(--text3); }
.comment-text { font-size: 13px; color: var(--text2); line-height: 1.5; }
.comment-media-link {
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 6px; font-size: 12px; color: var(--accent);
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2);
    border-radius: 8px; padding: 4px 10px; cursor: pointer;
    text-decoration: none;
}

.dl-time-wrap { padding: 0 16px; }
.dl-time-label { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.dl-time-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.dl-time-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dl-time-arrow {
    width: 36px; height: 32px; border-radius: var(--r-sm);
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text); font-size: 16px; cursor: pointer; transition: background 0.15s;
}
.dl-time-arrow:active { background: var(--bg); }
.dl-time-val {
    width: 56px; height: 44px; border-radius: var(--r);
    background: var(--bg3); border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: var(--text);
}
.dl-time-sep { font-size: 24px; font-weight: 800; color: var(--text3); }
.dl-time-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.dl-time-pre {
    padding: 6px 10px; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 20px; color: var(--text2); font-size: 12px; font-weight: 700; cursor: pointer;
    transition: all 0.15s;
}
.dl-time-pre:active { background: rgba(99,102,241,0.15); color: var(--accent); border-color: var(--accent); }

.dl-foot { display: flex; gap: 8px; padding: 0 16px 8px; }
.dl-btn-cancel {
    flex: 1; padding: 12px; border-radius: var(--r);
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text2); font-size: 14px; font-weight: 700; cursor: pointer;
}
.dl-btn-ok {
    flex: 2; padding: 12px; border-radius: var(--r);
    background: var(--accent); color: #fff;
    font-size: 14px; font-weight: 800; cursor: pointer;
    box-shadow: 0 3px 14px rgba(99,102,241,0.4);
}

/* ================================================================
   TOAST
   ================================================================ */
.toast {
    position: fixed; bottom: calc(var(--nav-h) + 12px + var(--safe-b));
    left: 50%; transform: translateX(-50%);
    background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 30px; padding: 10px 20px;
    font-size: 13px; font-weight: 700; color: var(--text);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
    z-index: 1000; white-space: nowrap;
    animation: toastIn 0.25s ease both;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.toast.hidden { display: none; }

/* ================================================================
   AI CHAT
   ================================================================ */
.ai-chat-wrap { padding: 14px 16px; }
.ai-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; max-height: 45dvh; overflow-y: auto; }
.ai-message {
    max-width: 85%; border-radius: 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.ai-message.user { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 16px 16px 4px 16px; }
.ai-message.bot { align-self: flex-start; background: var(--bg3); border: 1px solid var(--border); color: var(--text); border-radius: 16px 16px 16px 4px; }
.ai-input-row { display: flex; gap: 8px; }
.ai-input {
    flex: 1; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 24px; color: var(--text); font-size: 14px; padding: 10px 16px;
}
.ai-send {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}

/* ================================================================
   PRIORITY TAB
   ================================================================ */
.priority-header { padding: 16px 16px 0; }
#priority-list { padding: 12px 16px 20px; }
.priority-group { margin-bottom: 16px; }
.priority-group-title {
    font-size: 12px; font-weight: 800; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 8px; padding: 0 2px;
    display: flex; align-items: center; gap: 6px;
}
.priority-group-bar { width: 4px; height: 14px; border-radius: 2px; }

/* ================================================================
   KANBAN INLINE VIEW (Tasks tab)
   ================================================================ */
#task-kanban-inline { padding-top: 0; }
.kanban-inline-board { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 16px; }
.kanban-inline-board::-webkit-scrollbar { display: none; }
.kanban-inline-col { min-width: 90%; scroll-snap-align: start; margin-right: 12px; }
.kanban-inline-col:last-child { margin-right: 0; }

/* Toggle kanban btn */
.btn-toggle-kanban {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text2); font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.btn-toggle-kanban.active { background: rgba(99,102,241,0.12); border-color: var(--accent); color: var(--accent); }

/* ================================================================
   MISC
   ================================================================ */
.chip-view {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: var(--bg3); border: 1px solid var(--border2);
    color: var(--text2); font-size: 11px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.chip-view.active { background: rgba(99,102,241,0.12); border-color: var(--accent); color: var(--accent); }

/* Focus visible */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* ================================================================
   RESPONSIVE — DESKTOP (≥ 700px)
   ================================================================ */
@media (min-width: 700px) {
    /* Full-width app */
    .app { max-width: 100%; }

    /* Header: wider */
    .header { padding: 0 28px; }
    .header-content { max-width: 1400px; margin: 0 auto; width: 100%; }

    /* Stats: wider */
    .quick-stats { padding: 12px 28px 8px; max-width: 1400px; margin: 0 auto; gap: 12px; }
    .stat-card { padding: 12px 14px 10px; }
    .stat-number { font-size: 26px; }

    /* Tab content: no padding, handled inside */
    .tab-content { padding: 0; max-width: 100%; }

    /* Tasks: single column, full width */
    .tasks-subtab-bar { padding: 10px 28px 0; max-width: 1400px; margin: 0 auto; }
    #panel-regular, #panel-workflow { padding: 12px 28px 0; max-width: 1400px; margin: 0 auto; }
    #task-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
    .empty-state { width: 100%; }

    /* Create form: centered */
    .create-form { max-width: 700px; margin: 0 auto; padding: 20px 28px 100px; }

    /* Calendar */
    .cal-wrap { max-width: 700px; margin: 0 auto; padding: 16px 28px 20px; }

    /* Kanban: all columns visible */
    .kanban-wrap { height: calc(100dvh - var(--header-h) - var(--nav-h)); }
    .kanban-member-bar { padding: 10px 28px 8px; }
    .kanban-col-tabs { display: none; }
    .kanban-board {
        scroll-snap-type: none; overflow-x: visible; overflow-y: visible;
        flex: 1; display: flex; gap: 12px; padding: 14px 28px 16px;
        height: 100%; flex-wrap: nowrap;
    }
    .kanban-col {
        flex: 1; min-width: 180px; width: auto;
        background: rgba(255,255,255,0.03);
        border: 1px solid var(--border);
        border-radius: var(--r-xl); overflow: hidden;
    }
    .kanban-col-header { display: flex !important; }
    .kanban-cards { max-height: none; flex: 1; padding: 8px 10px 12px; gap: 8px; }

    /* Stats */
    #tab-stats .stats-container { max-width: 960px; margin: 0 auto; padding: 16px 28px 100px; }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }

    /* Priority */
    .priority-header { padding: 16px 28px 0; max-width: 1400px; margin: 0 auto; }
    #priority-list { padding: 12px 28px 20px; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }

    /* Top nav on desktop: horizontal with labels */
    .top-nav { height: 54px; padding: 4px 28px; justify-content: center; gap: 4px; }
    .bnav-btn { flex-direction: row; gap: 7px; padding: 8px 18px; border-radius: var(--r); min-width: auto; }
    .bnav-label { font-size: 13px; }
    .bnav-create { flex-direction: row; width: 44px; height: 40px; border-radius: 12px; margin: 0 8px; }

    /* Modals: centered dialog */
    .modal-overlay, .gp-overlay, .step-modal-overlay, .sc-modal-overlay,
    .st-modal-overlay, .media-overlay {
        align-items: center; justify-content: center;
    }
    .modal, .gp-sheet, .step-modal-sheet, .sc-modal-sheet,
    .st-modal-sheet, .media-sheet {
        max-width: 580px; width: 94%;
        border-radius: 24px;
        max-height: 85dvh;
    }
    .modal { border-radius: 24px; }
    .modal-actions { padding: 12px 18px 16px; }
    .gp-sheet { max-height: 75dvh; }
    .gp-sheet.dl-sheet { max-height: 90dvh; }

    .chart-container { height: 260px; }
}

@media (min-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================
   JS-RENDERED TASK CARD INTERNALS
   ================================================================ */

/* Card inner layout */
.tc-header {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 8px;
}
.tc-title {
    flex: 1; font-size: 14px; font-weight: 700; color: var(--text);
    line-height: 1.4; word-break: break-word;
}
.tc-body {
    display: flex; flex-direction: column; gap: 5px;
}

/* Status badge */
.tc-badge {
    flex-shrink: 0; font-size: 10px; font-weight: 700;
    padding: 3px 9px; border-radius: 20px;
    white-space: nowrap;
}
.tc-badge-new         { background: rgba(99,102,241,0.15);   color: #818CF8; }
.tc-badge-in_progress { background: rgba(245,158,11,0.15);   color: #FBBF24; }
.tc-badge-review      { background: rgba(6,182,212,0.15);    color: #22D3EE; }
.tc-badge-done        { background: rgba(16,185,129,0.15);   color: #34D399; }
.tc-badge-cancelled   { background: rgba(107,114,128,0.15);  color: #9CA3AF; }

/* Meta rows */
.tc-row {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text2); flex-wrap: wrap;
}
.tc-avatar {
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; color: #fff; flex-shrink: 0;
    border: 1.5px solid var(--bg3);
}
.tc-av-done        { background: linear-gradient(135deg, var(--green), #059669); }
.tc-av-in_progress { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.tc-av-review      { background: linear-gradient(135deg, var(--cyan), var(--accent)); }
.tc-meta-name { font-size: 12px; color: var(--text3); font-weight: 500; }

/* Deadline rows + live countdown */
.tc-dl-urgent { color: var(--red); font-weight: 700; }
.tc-dl-soon   { color: var(--orange); font-weight: 700; }
.tc-dl-normal { color: var(--text3); }
.tc-countdown-txt {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    transition: color 0.3s;
}

/* Ref rows */
.tc-parent-ref   { color: var(--text3); font-size: 11px; }
.tc-subtask-ref  { color: var(--text3); font-size: 11px; }

/* Task group (parent + children) */
.tc-group { display: flex; flex-direction: column; }
.tc-parent-wrap { position: relative; }
.tc-children { padding-left: 16px; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.tc-child-wrap { position: relative; display: flex; align-items: stretch; gap: 4px; }
.tc-child-dot {
    width: 2px; background: var(--border2); border-radius: 2px;
    flex-shrink: 0; margin: 4px 0;
}
.tc-parent-dot, .tc-parent-wrap::before { display: none; }
.tc-card-child { opacity: 0.88; }

/* Done/cancelled task cards */
.tc-card[data-status="done"] .tc-title { text-decoration: line-through; color: var(--text3); }
.tc-card[data-status="done"] { opacity: 0.6; }
.tc-card[data-status="cancelled"] .tc-title { text-decoration: line-through; color: var(--text3); }
.tc-card[data-status="cancelled"] { opacity: 0.4; }

/* ================================================================
   ASSIGNEE CHIPS — Create Form
   ================================================================ */
.assignee-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: var(--bg3); border: 1.5px solid var(--border);
    border-radius: var(--r); cursor: pointer;
    transition: all 0.18s; margin-bottom: 6px;
}
.assignee-chip:active { transform: scale(0.98); }
.assignee-chip.selected {
    border-color: var(--accent);
    background: rgba(99,102,241,0.08);
}
.assignee-chip .assignee-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; color: var(--text2);
    flex-shrink: 0;
}
.assignee-chip.selected .assignee-avatar {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff; border-color: transparent;
}
.assignee-chip .assignee-name {
    flex: 1; font-size: 13px; font-weight: 600; color: var(--text);
}
.assignee-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: transparent;
    flex-shrink: 0; transition: all 0.18s;
}
.assignee-chip.selected .assignee-check {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.remove-ext {
    background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3);
    color: var(--red) !important;
}

.assignee-ext-header {
    font-size: 11px; font-weight: 700; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.4px;
    padding: 10px 0 6px; margin-top: 4px;
}
.ext-group-tag {
    font-size: 10px; color: var(--accent);
    background: rgba(99,102,241,0.1); padding: 2px 6px; border-radius: 8px;
    margin-left: 4px;
}

.assignee-add-group-btn {
    width: 100%; padding: 11px;
    background: rgba(99,102,241,0.07); border: 1px dashed rgba(99,102,241,0.35);
    border-radius: var(--r); color: var(--accent);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: all 0.18s; margin-top: 4px;
}
.assignee-add-group-btn:active { background: rgba(99,102,241,0.15); }

/* Responsible display */
/* resp-pick-btn and resp-chip defined below */
.resp-chosen {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px;
    background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.3);
    border-radius: var(--r); font-size: 14px; font-weight: 700; color: var(--text);
}
.resp-clear-btn {
    color: var(--text3); font-size: 13px;
    background: none; border: none; cursor: pointer; padding: 0 2px;
}
/* Multiple responsible chips */
#resp-display {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.resp-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3);
    color: var(--accent); font-size: 13px; font-weight: 700;
}
.resp-pick-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: var(--bg3); border: 1px dashed var(--border2);
    color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s;
}
.resp-pick-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ================================================================
   GROUP PICKER SHEET — Members list
   ================================================================ */
.gp-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer; transition: opacity 0.15s;
}
.gp-member-row:last-child { border-bottom: none; }
.gp-member-row:active { opacity: 0.7; }
.gp-member-row.already-added { opacity: 0.4; cursor: default; }
.gp-member-row.selected .gp-member-name { color: var(--accent); font-weight: 700; }

.gp-member-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff;
    flex-shrink: 0;
}
.gp-member-name {
    flex: 1; font-size: 14px; font-weight: 600; color: var(--text);
}
.gp-check {
    font-size: 14px; font-weight: 800;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.3);
    color: var(--accent); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ================================================================
   TASK DETAIL MODAL — Content Styles
   ================================================================ */
.modal-detail {
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.modal-detail:last-child { border-bottom: none; }

.modal-detail-label {
    font-size: 10px; font-weight: 700; color: var(--text3);
    text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px;
}
.modal-detail-value {
    font-size: 13px; color: var(--text); line-height: 1.4;
}

/* Status badges in modal */
.badge-new         { color: #818CF8; font-weight: 700; }
.badge-in_progress { color: var(--yellow); font-weight: 700; }
.badge-review      { color: var(--cyan); font-weight: 700; }
.badge-done        { color: var(--green); font-weight: 700; }
.badge-cancelled   { color: var(--text3); font-weight: 700; }

/* Priority colors in modal */
.priority-low    { color: var(--green); font-weight: 700; }
.priority-medium { color: var(--yellow); font-weight: 700; }
.priority-high   { color: var(--orange); font-weight: 700; }
.priority-urgent { color: var(--red); font-weight: 700; }

/* Responsible badge */
.resp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25);
    color: var(--yellow); padding: 4px 12px; border-radius: 20px;
    font-size: 13px; font-weight: 700;
}

/* Assignee rows in modal */
.assignees-status-list { display: flex; flex-direction: column; gap: 6px; }
.assignee-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--r-sm);
    justify-content: space-between;
}
.assignee-row-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; }
.asgn-role-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; flex-shrink: 0;
}
.asgn-resp { background: rgba(245,158,11,0.12); color: var(--yellow); }
.asgn-obs  { background: rgba(107,114,128,0.12); color: var(--text3); }
.assignee-row-status {
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 20px; flex-shrink: 0;
}

/* Media section */
.media-section-row { padding: 5px 0; border-bottom: 1px solid var(--border); }
.media-open-btn {
    width: 100%; padding: 8px 12px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--r); color: var(--text);
    font-size: 14px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    transition: border-color 0.15s;
}
.media-open-btn:active { border-color: var(--accent); }
.media-count-badge {
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
}

/* Task chart */
.task-chart-wrap { min-height: 60px; }
.task-chart-loading { font-size: 12px; color: var(--text3); padding: 16px 0; text-align: center; }

/* Timeline / history */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0; margin-top: 5px;
}
.timeline-content { flex: 1; }
.timeline-text { font-size: 12px; color: var(--text2); line-height: 1.5; }
.timeline-time { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Observer badge */
.observer-badge {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.2);
    border-radius: var(--r); padding: 12px 14px;
    font-size: 13px; color: var(--cyan); font-weight: 600;
    width: 100%;
}
.observer-hint { font-size: 11px; color: var(--text3); font-weight: 400; }

/* ================================================================
   TIMELINE — Task history
   ================================================================ */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
    display: flex; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
    background: var(--bg3); border: 1px solid var(--border2);
}
.dot-green  { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); }
.dot-red    { background: rgba(239,68,68,0.15);  border-color: rgba(239,68,68,0.3); }
.dot-yellow { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); }
.dot-purple { background: rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.3); }
.dot-indigo { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); }
.dot-gray   { background: rgba(107,114,128,0.12); border-color: rgba(107,114,128,0.2); }
.tl-dot-svg .ic { width: 14px; height: 14px; }

.timeline-body { flex: 1; min-width: 0; }
.timeline-label { font-size: 13px; color: var(--text2); line-height: 1.5; }
.timeline-label b { color: var(--text); }
.timeline-time { font-size: 10px; color: var(--text3); margin-top: 3px; }
.tl-extra {
    font-size: 12px; color: var(--text3);
    background: var(--bg3); border-radius: var(--r-sm);
    padding: 6px 10px; margin-top: 5px;
    border-left: 2px solid var(--border2);
}

/* ================================================================
   MODAL ACTION BUTTONS (used inside modal-actions)
   ================================================================ */
.modal-action-btn {
    flex: 1; padding: 8px 12px;
    border-radius: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.15s; text-align: center;
    border: none; display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
}
/* Semantic variants */
.btn-start,   .btn-primary  { background: var(--accent); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,0.35); }
.btn-done,    .btn-success  { background: var(--green);  color: #fff; box-shadow: 0 4px 16px rgba(16,185,129,0.35); }
.btn-cancel,  .btn-danger   { background: rgba(239,68,68,0.12); border: 1.5px solid rgba(239,68,68,0.35); color: var(--red); }
.btn-review,  .btn-warning  { background: rgba(245,158,11,0.12); border: 1.5px solid rgba(245,158,11,0.3); color: var(--yellow); }
.btn-secondary { background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); }
.modal-action-btn:active { transform: scale(0.96); opacity: 0.85; }

/* Workflow task status button (big, full-width) */
.wf-status-btn {
    width: 100%; padding: 9px 14px;
    border-radius: 10px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.18s; text-align: center;
    border: none; display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.wf-btn-start    { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; box-shadow: 0 4px 20px rgba(99,102,241,0.4); }
.wf-btn-done     { background: linear-gradient(135deg, #10B981, #059669); color: #fff; box-shadow: 0 4px 20px rgba(16,185,129,0.4); }
.wf-btn-secondary{ background: var(--bg3); border: 1.5px solid var(--border2); color: var(--text2); box-shadow: none; }
.wf-status-btn:active { transform: scale(0.97); }

/* ===== Workflow completion modal ===== */
.wf-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.wf-modal-overlay.wf-modal-show { opacity: 1; pointer-events: all; }
.wf-modal {
    background: var(--bg2); border: 1.5px solid var(--border2);
    border-radius: 16px 16px 0 0; width: 100%; max-width: 480px;
    padding: 20px 16px 32px; transform: translateY(40px); transition: transform 0.2s;
}
.wf-modal-overlay.wf-modal-show .wf-modal { transform: translateY(0); }
.wf-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.wf-modal-head h3 { font-size: 15px; font-weight: 700; color: var(--text1); margin: 0; display: flex; align-items: center; gap: 7px; }
.wf-modal-close {
    background: var(--bg3); border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 16px; cursor: pointer;
    color: var(--text2); display: flex; align-items: center; justify-content: center;
}
.wf-modal-body { margin-bottom: 16px; }
.wf-lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text3); margin-bottom: 8px; }
.wf-textarea {
    width: 100%; background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: 10px; padding: 10px 12px; color: var(--text1);
    font-size: 13px; resize: none; box-sizing: border-box; outline: none;
}
.wf-textarea:focus { border-color: var(--accent); }
.wf-modal-foot { display: flex; gap: 10px; }
.wf-modal-foot .wf-btn-secondary,
.wf-modal-foot .wf-btn-primary {
    flex: 1; padding: 10px; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer; border: none;
}
.wf-modal-foot .wf-btn-secondary { background: var(--bg3); border: 1.5px solid var(--border2); color: var(--text2); }
.wf-modal-foot .wf-btn-primary { background: linear-gradient(135deg, #10B981, #059669); color: #fff; }

/* Status hint above buttons */
.my-status-hint {
    font-size: 12px; font-weight: 600; color: var(--text3);
    padding: 8px 12px; background: var(--bg3);
    border-radius: 10px; text-align: center; width: 100%;
}
.my-status-hint b { color: var(--text); }

/* Workflow step action buttons */
.wf-action-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wf-step-list-modal { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.wf-step-modal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--bg3);
    border: 1px solid var(--border); border-radius: var(--r-sm);
}
.wf-step-modal-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--bg2); border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; color: var(--text3); flex-shrink: 0;
}
.wf-step-modal-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.wf-step-modal-status {
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    border-radius: 20px; flex-shrink: 0;
}
.wf-step-modal-item.step-active { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.06); }
.wf-step-modal-item.step-done   { border-color: rgba(16,185,129,0.3); opacity: 0.75; }
.wf-step-modal-item.step-blocked{ opacity: 0.4; }

/* ================================================================
   MODAL — Misc elements from JS render
   ================================================================ */
.modal-section { margin-bottom: 4px; }

/* Task chart */
.task-chart-wrap { padding: 6px 0; }
.task-chart-loading { font-size: 12px; color: var(--text3); text-align: center; padding: 16px 0; }

/* Step progress bar inside modal */
.step-progress-wrap { margin: 8px 0 4px; }
.step-progress-bar-bg {
    height: 5px; background: var(--border); border-radius: 5px; overflow: hidden;
}
.step-progress-bar-fill {
    height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    transition: width 0.5s ease;
}
.step-progress-label {
    font-size: 11px; color: var(--text3); margin-top: 4px;
    display: flex; justify-content: space-between;
}

/* Upload progress */
.upload-progress {
    height: 3px; background: var(--border); border-radius: 3px;
    overflow: hidden; margin-top: 4px;
}
.upload-progress-fill {
    height: 100%; background: var(--accent); border-radius: 3px;
    transition: width 0.3s ease;
}

/* ================================================================
   TASK STATUS CARD (modal actions)
   ================================================================ */
.task-status-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 5px 10px;
    background: linear-gradient(135deg, rgba(var(--s-color, 99,102,241), 0.1), transparent);
    border: 1.5px solid color-mix(in srgb, var(--s-color) 40%, transparent);
    border-radius: 12px;
    width: 100%;
}
.task-status-card { --s-color: #818CF8; border-color: rgba(129,140,248,0.35); background: rgba(129,140,248,0.08); }
.tsc-role  { font-size: 11px; color: var(--text3); font-weight: 600; }
.tsc-status { font-size: 13px; font-weight: 700; color: var(--text); }

/* Comment section — single compact row */
.comment-row {
    display: flex; align-items: center; gap: 4px;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 10px; padding: 4px 6px; width: 100%;
}
.comment-attach-btn {
    font-size: 16px; cursor: pointer; padding: 3px 5px;
    border-radius: 7px; color: var(--text3); flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}
.comment-attach-btn:hover { color: var(--accent); background: rgba(99,102,241,0.08); }
.comment-input-inline {
    flex: 1; background: none; border: none; outline: none;
    color: var(--text); font-size: 13px; padding: 4px 2px;
    font-family: inherit; min-width: 0;
}
.comment-input-inline::placeholder { color: var(--text3); }
.comment-send-btn-sm {
    flex-shrink: 0; padding: 5px 10px; background: var(--accent); color: #fff;
    border: none; border-radius: 8px; font-size: 15px; cursor: pointer;
    transition: all 0.15s; box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.comment-send-btn-sm:active { transform: scale(0.93); }
/* Keep old classes for any other usages */
.comment-send-btn {
    padding: 5px 12px; background: var(--accent); color: #fff;
    border: none; border-radius: 7px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.comment-send-btn:active { transform: scale(0.95); }

/* ================================================================
   FEED OPEN BUTTON
   ================================================================ */
.feed-open-btn {
    width: 100%; padding: 10px 14px;
    background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: 12px; color: var(--text);
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; transition: all 0.15s; font-size: 13px; font-weight: 600;
}
.feed-open-btn:active { background: rgba(99,102,241,0.1); border-color: var(--accent); }
.feed-btn-icon { font-size: 16px; }
.feed-btn-label { flex: 1; text-align: left; }
.feed-btn-badge {
    background: var(--accent); color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 2px 7px; border-radius: 20px;
}

/* ================================================================
   MEDIA + COMMENTS FEED OVERLAY
   ================================================================ */
.feed-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0); display: flex;
    align-items: flex-end; justify-content: center;
    transition: background 0.25s;
}
.feed-overlay.feed-visible { background: rgba(0,0,0,0.55); }
.feed-sheet {
    width: 100%; max-height: 88dvh;
    background: var(--bg2); border-radius: 22px 22px 0 0;
    display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    overflow: hidden;
}
.feed-overlay.feed-visible .feed-sheet { transform: translateY(0); }
.feed-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.feed-title { font-size: 14px; font-weight: 700; color: var(--text); }
.feed-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg3); color: var(--text2); font-size: 13px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.feed-body {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 12px;
    -webkit-overflow-scrolling: touch;
}
.feed-item { width: 100%; }
.feed-item-media .feed-preview { margin-bottom: 5px; }
.feed-img {
    width: 100%; max-height: 300px; object-fit: contain;
    border-radius: 10px; display: block; background: var(--bg3);
}
.feed-video {
    width: 100%; max-height: 260px; border-radius: 10px; display: block;
    background: #000;
}
.feed-vidnote {
    width: 180px; height: 180px; border-radius: 50%; display: block;
    margin: 0 auto; object-fit: cover; background: #000;
}
.feed-audio-wrap { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--bg3); border-radius: 10px; }
.feed-audio { flex: 1; height: 32px; }
.feed-file-link {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px;
    font-size: 13px; color: var(--accent); font-weight: 600;
}
.feed-meta { font-size: 11px; color: var(--text3); }
.feed-time { color: var(--text3); font-size: 11px; }
.feed-item-comment .feed-comment-bubble {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 12px; padding: 8px 12px;
}
.feed-comment-author { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 3px; }
.feed-comment-text { font-size: 13px; color: var(--text); line-height: 1.4; margin-bottom: 4px; }
.feed-empty { text-align: center; color: var(--text3); font-size: 13px; padding: 30px 0; }

/* ================================================================
   v56 ADDITIONS — Kanban drag, sub-task orphan, my-tasks chip
   ================================================================ */

/* Kanban drag state */
.kanban-card.kb-dragging {
    opacity: 0.35;
    transform: scale(0.97);
    transition: opacity 0.15s, transform 0.15s;
}
.kanban-col.kb-drop-target {
    background: rgba(99,102,241,0.06);
    outline: 2px dashed var(--accent);
    outline-offset: -4px;
    border-radius: var(--r);
    transition: background 0.15s;
}
.kanban-drag-handle {
    font-size: 14px; color: var(--text3); float: right;
    cursor: grab; user-select: none; margin-left: 4px;
    line-height: 1;
}
.kanban-card:active .kanban-drag-handle { cursor: grabbing; }

/* Sub-task orphan card in My Tasks */
.tc-card-subtask-orphan {
    border-left: 3px solid var(--accent2) !important;
    opacity: 0.9;
}
.tc-parent-ref {
    display: flex; align-items: center; gap: 5px;
    color: var(--accent2); font-size: 11px; font-weight: 600;
}

/* Kanban member bar — My Tasks chip */
.kmb-chip-me .kmb-avatar {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
}
.kmb-chip-me { border: 1.5px solid var(--accent); }
.kmb-chip-me.active { background: rgba(99,102,241,0.18); }

/* Sub-task modal improvements */
.st-modal-sheet {
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 16px 32px;
}
.st-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px;
}
.st-modal-close {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg3); border: none; color: var(--text2);
    font-size: 14px; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.st-textarea {
    width: 100%; background: var(--bg3); border: 1px solid var(--border2);
    border-radius: var(--r); color: var(--text); font-size: 14px;
    padding: 11px 14px; resize: none; margin-bottom: 4px;
}
.st-textarea:focus { border-color: var(--accent); outline: none; }

/* ================================================================
   v57 — Hamburger, Sidebar, Companies Panel, Settings
   ================================================================ */

/* Hamburger button */
.hamburger-btn {
    width: 38px; height: 38px;
    background: var(--bg3); border: 1.5px solid var(--border2);
    border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 5px; padding: 0; flex-shrink: 0;
    transition: background 0.15s;
}
.hamburger-btn:active { background: var(--bg2); }
.hamburger-btn span {
    display: block; width: 18px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all 0.2s;
}

/* Sidebar overlay */
.sidebar-overlay {
    position: fixed; inset: 0; z-index: 400;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(3px);
}
.sidebar-overlay.hidden { display: none; }

/* Sidebar drawer */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw); z-index: 401;
    background: var(--bg2); border-right: 1px solid var(--border2);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
}
.sidebar.hidden { display: flex !important; transform: translateX(-100%); }
.sidebar.open { transform: translateX(0); }

.sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border);
}
.sidebar-profile { display: flex; align-items: center; gap: 12px; }
.sb-avatar {
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.sb-name { font-size: 15px; font-weight: 800; color: var(--text); }
.sb-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
.sidebar-close {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--bg3); border: none; color: var(--text2);
    font-size: 14px; cursor: pointer; flex-shrink: 0;
}
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.sb-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 14px 20px;
    background: none; border: none; color: var(--text);
    font-size: 15px; font-weight: 600; cursor: pointer;
    text-align: left; transition: background 0.15s;
}
.sb-item:hover, .sb-item:active { background: var(--bg3); }
.sb-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.sb-badge {
    margin-left: auto; min-width: 20px; height: 20px;
    background: var(--accent); color: #fff;
    border-radius: 10px; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
}
.sb-badge:empty { display: none; }
.sb-divider { height: 1px; background: var(--border); margin: 8px 16px; }

/* Side panels */
.side-panel {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(340px, 92vw); z-index: 402;
    background: var(--bg); border-right: 1px solid var(--border2);
    display: flex; flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
    overflow: hidden;
}
.side-panel.hidden { display: flex !important; transform: translateX(-100%); }
.side-panel.open { transform: translateX(0); }
.sp-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; border-bottom: 1px solid var(--border2);
    background: var(--bg2); flex-shrink: 0;
}
.sp-back {
    background: none; border: none; color: var(--accent);
    font-size: 14px; font-weight: 700; cursor: pointer; padding: 4px 0;
}
.sp-title { font-size: 16px; font-weight: 800; color: var(--text); }
.sp-body { flex: 1; overflow-y: auto; padding: 16px; }
.sp-loading { color: var(--text3); font-size: 14px; text-align: center; padding: 32px 0; }
.sp-action-btn {
    background: none; border: none; font-size: 16px; cursor: pointer;
    padding: 4px 8px; border-radius: 8px; color: var(--text2);
    transition: background 0.15s; margin-left: auto;
}
.sp-action-btn:active { background: var(--bg3); }
.sp-action-btn.hidden { display: none !important; }
.team-type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 12px;
    font-size: 10px; font-weight: 700;
}
.team-type-badge.bot { background: rgba(99,102,241,0.15); color: var(--accent); }
.team-type-badge.group { background: rgba(34,197,94,0.15); color: #22c55e; }
.member-edit-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.member-edit-row:last-child { border-bottom: none; }
.member-edit-info { flex: 1; min-width: 0; }
.member-edit-name { font-size: 14px; font-weight: 700; color: var(--text); }
.member-edit-role { font-size: 12px; color: var(--text3); margin-top: 2px; }
.member-edit-actions { display: flex; gap: 6px; flex-shrink: 0; }
.member-edit-btn {
    padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); cursor: pointer;
}
.member-remove-btn {
    padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
    border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.1); color: #ef4444; cursor: pointer;
}

/* Companies list */
.company-card {
    background: var(--bg2); border: 1.5px solid var(--border);
    border-radius: 16px; padding: 16px; margin-bottom: 12px;
    cursor: pointer; transition: all 0.15s;
}
.company-card:active { transform: scale(0.98); }
.company-card-row { display: flex; align-items: center; justify-content: space-between; }
.company-card-name { font-size: 15px; font-weight: 800; color: var(--text); }
.company-card-role {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; background: rgba(99,102,241,0.12); color: var(--accent);
}
.company-card-role.owner { background: rgba(245,158,11,0.12); color: var(--yellow); }
.company-card-meta { font-size: 12px; color: var(--text3); margin-top: 6px; }

/* Company detail members */
.company-member-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.company-member-row:last-child { border-bottom: none; }
.cmp-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.cmp-member-info { flex: 1; min-width: 0; }
.cmp-member-name { font-size: 14px; font-weight: 700; color: var(--text); }
.cmp-member-role { font-size: 11px; color: var(--text3); margin-top: 2px; }
.cmp-member-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cmp-btn-kick {
    padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25);
    color: var(--red); cursor: pointer;
}
.cmp-btn-reassign {
    padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 700;
    background: rgba(99,102,241,0.1); border: 1px solid var(--border2);
    color: var(--accent); cursor: pointer;
}
.cmp-action-area {
    background: var(--bg2); border-radius: 16px; padding: 14px;
    margin-bottom: 16px;
}
.cmp-action-title { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 10px; }

/* Settings */
.settings-section {
    background: var(--bg2); border-radius: 16px; padding: 16px;
    margin-bottom: 14px;
}
.settings-label {
    font-size: 12px; font-weight: 700; color: var(--text3);
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.settings-lang-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-btn {
    padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700;
    background: var(--bg3); border: 1.5px solid var(--border);
    color: var(--text); cursor: pointer; transition: all 0.15s;
}
.lang-btn.active { border-color: var(--accent); background: rgba(99,102,241,0.1); color: var(--accent); }
.settings-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 13px; color: var(--text2);
}
.settings-info-row:last-child { border-bottom: none; }
.settings-val { color: var(--text3); font-size: 12px; }
.settings-link-btn {
    display: block; padding: 10px 14px; background: var(--bg3);
    border: 1.5px solid var(--border2); border-radius: 10px;
    color: var(--accent); font-size: 13px; font-weight: 700;
    text-decoration: none; text-align: center; margin-top: 4px;
}
.settings-admin-btn {
    background: #1a1a2e; border-color: #e74c3c;
    color: #e74c3c;
}

/* Task list + cards — always single column, full width, any screen */
.task-list,
#task-list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
.tc-group {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.tc-card,
.task-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Reassign sheet */
.reassign-sheet-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
}
.reassign-sheet-overlay.hidden { display: none; }
.reassign-sheet {
    width: 100%; max-width: 540px;
    background: var(--bg2); border-radius: 24px 24px 0 0;
    padding: 20px 16px 32px; animation: slideUp 0.28s ease both;
}
.reassign-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }

/* Inline SVG icon base styles */
.ic {
    width: 14px; height: 14px;
    display: inline-block; vertical-align: middle;
    flex-shrink: 0;
}
.ic-sm { width: 12px; height: 12px; }
.ic-md { width: 16px; height: 16px; }
.ic-lg { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════
   SUBTASK TYPE PICKER (v80)
   ═══════════════════════════════════════════ */
.stp-overlay {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
    display: flex; align-items: flex-end;
    animation: fadeIn .18s ease;
}
.stp-sheet {
    width: 100%; background: var(--card-bg);
    border-radius: 22px 22px 0 0;
    padding: 10px 16px 36px;
    animation: slideUp .22s ease;
}
.stp-handle {
    width: 38px; height: 4px; background: var(--border);
    border-radius: 2px; margin: 0 auto 16px;
}
.stp-title {
    font-size: 16px; font-weight: 700; color: var(--text1);
    text-align: center; margin-bottom: 4px;
}
.stp-parent-ref {
    font-size: 12px; color: var(--text3); text-align: center;
    margin-bottom: 18px; padding: 0 24px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stp-option {
    display: flex; align-items: center; gap: 14px;
    width: 100%; background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 16px; padding: 15px 16px;
    margin-bottom: 10px; cursor: pointer;
    text-align: left; transition: background .15s, border-color .15s, transform .1s;
}
.stp-option:active { background: var(--bg3); transform: scale(.98); }
.stp-opt-icon { font-size: 30px; flex-shrink: 0; line-height: 1; }
.stp-opt-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.stp-opt-name { font-size: 15px; font-weight: 700; color: var(--text1); }
.stp-opt-desc { font-size: 12px; color: var(--text3); }
.stp-opt-arrow {
    font-size: 22px; color: var(--text3); font-weight: 300; flex-shrink: 0;
    opacity: .6;
}
.stp-cancel {
    display: block; width: 100%; background: none; border: none;
    padding: 12px; font-size: 15px; color: var(--text3);
    cursor: pointer; margin-top: 2px;
    border-radius: 12px; transition: background .15s;
}
.stp-cancel:active { background: var(--bg2); }

/* Subtask parent banner on create form */
.subtask-parent-banner {
    display: flex; align-items: center; gap: 8px;
    background: rgba(99,102,241,.1); border: 1.5px solid rgba(99,102,241,.4);
    border-radius: 12px; padding: 9px 12px; margin-bottom: 14px;
    font-size: 13px; color: var(--text1);
}
.subtask-parent-banner svg { color: #6366f1; flex-shrink: 0; }
.subtask-parent-banner > span {
    flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
}
.stp-banner-clear {
    background: none; border: none; color: var(--text3);
    font-size: 17px; cursor: pointer; padding: 0 2px;
    flex-shrink: 0; line-height: 1;
}

/* ── Speed Rating ── */
#speed-rating-section { margin-top: 8px; }
.sr-desc { font-size: 12px; color: var(--text2); margin: 0 0 12px; }
.sr-loading, .sr-empty {
    text-align: center; color: var(--text2); font-size: 13px; padding: 20px 0;
}
.sr-cards { display: flex; flex-direction: column; gap: 8px; }
.sr-card {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: 12px; padding: 10px 12px; gap: 10px;
    transition: border-color .2s;
}
.sr-rank-1 { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.06); }
.sr-rank-2 { border-color: rgba(148,163,184,.4); background: rgba(148,163,184,.05); }
.sr-rank-3 { border-color: rgba(180,100,60,.45); background: rgba(180,100,60,.05); }
.sr-card-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sr-medal {
    font-size: 22px; width: 32px; text-align: center; flex-shrink: 0;
    font-weight: 700; color: var(--text2);
}
.sr-rank-1 .sr-medal { color: #FBBF24; }
.sr-rank-2 .sr-medal { color: #94A3B8; }
.sr-rank-3 .sr-medal { color: #B46C3C; }
.sr-info { flex: 1; min-width: 0; }
.sr-name { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; align-items: center; }
.sr-done { font-size: 11px; color: var(--text2); background: rgba(255,255,255,.06); border-radius: 6px; padding: 2px 7px; }
.sr-avg { font-size: 12px; font-weight: 700; color: #60a5fa; }
.sr-avg-lab { font-size: 11px; color: var(--text2); }
.sr-no-time { font-size: 11px; color: var(--text3); font-style: italic; }
.sr-ontime { font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.sr-ontime-good { background: rgba(16,185,129,.15); color: #34d399; }
.sr-ontime-ok   { background: rgba(245,158,11,.15); color: #fbbf24; }
.sr-ontime-bad  { background: rgba(239,68,68,.15);  color: #f87171; }
.sr-score-bar {
    height: 3px; background: rgba(255,255,255,.1);
    border-radius: 4px; margin-top: 5px; overflow: hidden;
}
.sr-score-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; }
.sr-score-badge {
    font-size: 18px; font-weight: 800; min-width: 40px;
    text-align: center; color: var(--text2); flex-shrink: 0;
}
.sr-rank-1 .sr-score-badge { color: #FBBF24; }
.sr-rank-2 .sr-score-badge { color: #94A3B8; }
.sr-rank-3 .sr-score-badge { color: #CD7F32; }

/* ── Task time pie chart ── */
.tc-pie-wrap { height: 180px; position: relative; }