/* ===== Shared Task UI (2026-09-13) — карточка + окна, общий для Home и Task
   Manager. Цвета зашиты (окна рендерятся в body вне .home-el/.tmp). ===== */

/* ---- карточка ---- */
.tk-card{ background:#161616; border:1px solid #262626; border-radius:13px; padding:12px 13px; }
.tk-card:hover{ background:#1E1E1E; }
.tk-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.tk-topr{ margin-left:auto; display:inline-flex; align-items:center; gap:4px; }
.tk-badge{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:6px; background:#1E1E1E; color:#8A8A8A; }
.tk-badge.topup{ color:#7FD99A; background:rgba(127,217,154,.12); }
.tk-badge.accs{ color:#7FA9E0; background:rgba(127,169,224,.12); }
.tk-badge.offers{ color:#D9C36A; background:rgba(217,195,106,.12); }
.tk-badge.bugs{ color:#E08A8A; background:rgba(224,138,138,.12); }
.tk-badge.others{ color:#8A8A8A; background:#1E1E1E; }
.tk-due{ font-size:10.5px; color:#8A8A8A; display:inline-flex; align-items:center; gap:4px; }
.tk-due.over{ color:#F87171; }
.tk-check{ color:#4ADE80; display:inline-flex; }
.tk-dots, .tk-x{ background:none; border:none; color:#5A5A5A; cursor:pointer; padding:3px; border-radius:6px; display:inline-flex; }
.tk-dots:hover{ background:#262626; color:#EDEDED; }
.tk-x:hover{ background:rgba(248,113,113,.14); color:#F87171; }
.tk-title{ font-size:13.5px; font-weight:600; color:#EDEDED; line-height:1.35; }
.tk-desc{ font-size:12px; color:#8A8A8A; line-height:1.45; margin-top:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tk-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }

/* автор vs исполнители — визуально разграничены */
.tk-people{ display:flex; align-items:center; gap:8px; min-width:0; }
.tk-creator .avatar{ width:24px; height:24px; font-size:9px; border-radius:50%; border:2px solid #FF6B35; box-sizing:border-box; }
.tk-sep{ width:1px; height:18px; background:#333; flex:none; }
.tk-avatars{ display:flex; align-items:center; }
.tk-avatars .avatar{ width:24px; height:24px; border:2px solid #161616; border-radius:50%; margin-left:-7px; font-size:9px; background:#333; box-sizing:border-box; }
.tk-card:hover .tk-avatars .avatar{ border-color:#1E1E1E; }
.tk-avatars .avatar:first-child{ margin-left:0; }
.tk-av-more{ width:24px; height:24px; border-radius:50%; margin-left:-7px; background:#1E1E1E; border:2px solid #161616; color:#8A8A8A; font-size:9.5px; display:grid; place-items:center; font-weight:600; }

.tk-meta{ display:flex; align-items:center; gap:6px; }
.tk-mi{ background:none; border:none; color:#8A8A8A; font-size:11.5px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; padding:2px 5px; border-radius:6px; font-family:inherit; }
.tk-mi:hover{ background:#1E1E1E; color:#EDEDED; }

/* ---- поповер (меню/ссылки/файлы) ---- */
.tk-pop{ position:fixed; background:#0F0F0F; border:1px solid #262626; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); z-index:9999; padding:8px; color:#EDEDED; font-family:var(--sans); font-size:13px; }
.tk-pop-title{ font-size:12px; font-weight:700; padding:4px 6px 8px; display:flex; justify-content:space-between; align-items:baseline; }
.tk-pop-hint{ font-size:10px; color:#5A5A5A; font-weight:400; }
.tk-pop-empty{ font-size:12px; color:#5A5A5A; padding:8px 6px; }
.tk-menu-item{ display:block; width:100%; text-align:left; background:none; border:none; color:#EDEDED; font-size:13px; padding:9px 10px; border-radius:8px; cursor:pointer; font-family:inherit; }
.tk-menu-item:hover{ background:#1E1E1E; }
.tk-menu-item.danger{ color:#F87171; }
.tk-lrow, .tk-frow{ display:flex; align-items:center; gap:8px; padding:6px; border-radius:8px; }
.tk-lrow:hover, .tk-frow:hover{ background:#161616; }
.tk-lrow a{ color:#7FA9E0; text-decoration:none; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-fname{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-fsize{ font-size:10.5px; color:#5A5A5A; flex:none; }
.tk-ic{ background:none; border:none; color:#8A8A8A; cursor:pointer; font-size:14px; padding:2px 5px; border-radius:6px; display:inline-flex; align-items:center; text-decoration:none; }
.tk-ic:hover{ background:#262626; color:#EDEDED; }
.tk-inline-add{ display:flex; gap:6px; margin-top:6px; }
.tk-inline-add input{ flex:1; background:#161616; border:1px solid #262626; color:#EDEDED; border-radius:8px; padding:7px 9px; font-size:12.5px; font-family:inherit; }

/* ---- кнопки ---- */
.tk-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; background:#161616; border:1px solid #262626; color:#EDEDED; border-radius:10px; padding:9px 14px; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; text-decoration:none; }
.tk-btn:hover{ background:#1E1E1E; }
.tk-btn.sm{ padding:7px 11px; font-size:12.5px; }
.tk-btn.full{ width:100%; margin-top:8px; box-sizing:border-box; }
.tk-btn.accent{ background:#FF6B35; border-color:#FF6B35; color:#0A0A0A; font-weight:600; }
.tk-btn.accent:hover{ background:#ff7d4d; }
.tk-danger{ color:#F87171; background:none; border:none; cursor:pointer; font-size:12.5px; padding:0; }

/* ---- модалка / бэкдроп ---- */
.tk-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9998; display:flex; align-items:flex-start; justify-content:center; padding-top:7vh; }
.tk-modal{ width:520px; max-width:94vw; background:#0F0F0F; border:1px solid #262626; border-radius:16px; padding:22px 24px; color:#EDEDED; font-family:var(--sans); max-height:86vh; overflow-y:auto; }
.tk-dh{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.tk-dh-title{ font-size:16px; font-weight:700; }
.tk-x-lg{ background:none; border:none; color:#8A8A8A; font-size:22px; cursor:pointer; line-height:1; }
.tk-field{ margin-bottom:14px; }
.tk-field label{ display:block; font-size:11.5px; color:#8A8A8A; margin-bottom:6px; }
.tk-field input, .tk-field textarea, .tk-field select{ width:100%; background:#161616; border:1px solid #262626; color:#EDEDED; border-radius:9px; padding:9px 11px; font-size:13px; font-family:inherit; box-sizing:border-box; }
.tk-field textarea{ min-height:74px; resize:vertical; }
.tk-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tk-asg{ display:flex; flex-wrap:wrap; gap:6px; }
.tk-asg .chip{ display:inline-flex; align-items:center; gap:6px; background:#161616; border:1px solid #262626; border-radius:20px; padding:3px 10px 3px 4px; font-size:12px; cursor:pointer; }
.tk-asg .chip.on{ border-color:#FF6B35; }
.tk-asg .chip .avatar{ width:20px; height:20px; font-size:8px; }

/* ---- мессенджер (по центру) ---- */
.tk-msgr{ width:520px; max-width:94vw; display:flex; flex-direction:column; height:70vh; max-height:640px; background:#0F0F0F; border:1px solid #262626; border-radius:16px; overflow:hidden; color:#EDEDED; font-family:var(--sans); }
.tk-msgr-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #262626; }
.tk-msgr-title{ font-size:15px; font-weight:700; }
.tk-msgr-sub{ font-size:12px; color:#8A8A8A; margin-top:2px; max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-msgr-body{ flex:1; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px; }
.tk-msg{ display:flex; gap:9px; align-items:flex-end; max-width:80%; }
.tk-msg.own{ align-self:flex-end; flex-direction:row-reverse; }
.tk-msg .avatar{ width:28px; height:28px; font-size:10px; flex:none; }
.tk-bubble{ background:#1A1A1A; border:1px solid #262626; border-radius:14px; padding:8px 12px; min-width:0; }
.tk-msg.own .tk-bubble{ background:rgba(255,107,53,.14); border-color:rgba(255,107,53,.3); }
.tk-msg-name{ font-size:11px; font-weight:600; color:#FF6B35; margin-bottom:3px; }
.tk-msg.own .tk-msg-name{ color:#7FD99A; text-align:right; }
.tk-msg-text{ font-size:13px; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.tk-msg-time{ font-size:10px; color:#5A5A5A; margin-top:4px; }
.tk-msgr-input{ display:flex; gap:9px; padding:12px 16px; border-top:1px solid #262626; }
.tk-msgr-input input{ flex:1; background:#161616; border:1px solid #262626; color:#EDEDED; border-radius:10px; padding:10px 13px; font-size:13px; font-family:inherit; }
.tk-msgr-send{ background:#FF6B35; border:none; color:#0A0A0A; border-radius:10px; width:42px; cursor:pointer; font-size:15px; }

/* Полная карточка задачи (2026-10-18) */
.tk-view{ width:960px; max-width:95vw; height:80vh; max-height:760px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:#0F0F0F; border:1px solid #262626; border-radius:16px; overflow:hidden; color:#EDEDED; font-family:var(--sans); }
.tk-view-main{ padding:20px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; border-right:1px solid #262626; }
.tk-view-main .tk-dh{ margin-bottom:0; }
.tk-view-badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tk-view-st{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:7px; background:#1E1E1E; color:#C9CACE; }
.tk-view-st.st-in_progress{ background:rgba(10,132,255,.15); color:#5AA9FF; }
.tk-view-st.st-done{ background:rgba(74,222,128,.14); color:#4ADE80; }
.tk-view-st.st-todo{ background:rgba(255,107,53,.14); color:#FF8A5C; }
.tk-view-nodue,.tk-view-proj{ font-size:11px; color:#8A8A8A; }
.tk-view-title{ font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.tk-view-desc{ font-size:13.5px; line-height:1.55; color:#D4D4D4; white-space:pre-wrap; word-break:break-word; background:#161616; border:1px solid #222; border-radius:12px; padding:12px 14px; }
.tk-view-sec{ display:flex; flex-direction:column; gap:6px; }
.tk-view-lbl{ font-size:11px; font-weight:600; color:#8A8A8A; text-transform:uppercase; letter-spacing:.04em; }
.tk-view-people{ display:flex; gap:6px; flex-wrap:wrap; }
.tk-view-person{ display:inline-flex; align-items:center; gap:6px; background:#161616; border:1px solid #262626; border-radius:999px; padding:3px 10px 3px 3px; font-size:12.5px; }
.tk-view-acts{ display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
.tk-view-sel{ background:#161616; border:1px solid #262626; color:#EDEDED; border-radius:10px; padding:8px 10px; font:inherit; font-size:13px; }
.tk-view-chat{ display:flex; flex-direction:column; min-height:0; }
.tk-view-chat .tk-msgr-body{ flex:1; }
@media (max-width:820px){ .tk-view{ grid-template-columns:1fr; height:90vh; } .tk-view-main{ border-right:0; border-bottom:1px solid #262626; } }