:root {
  --bg0:#08070f;--bg1:#0f0d1a;--bg2:#161428;--bg3:#1e1b33;--bg4:#252241;
  --acc:#7c3aed;--acc2:#8b5cf6;--acc3:#a78bfa;--acc-dim:rgba(124,58,237,0.15);--acc-border:rgba(124,58,237,0.3);
  --text:#f4f2ff;--text2:#b8b4d4;--text3:#7a768f;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --green:#10b981;--green-dim:rgba(16,185,129,0.15);
  --yellow:#f59e0b;--yellow-dim:rgba(245,158,11,0.15);
  --blue:#3b82f6;--blue-dim:rgba(59,130,246,0.15);
  --red:#ef4444;--red-dim:rgba(239,68,68,0.15);
  --purple:#7c3aed;--purple-dim:rgba(124,58,237,0.15);
  --r:10px;--r-sm:7px;--r-lg:16px;--r-xl:20px;
  --shadow:0 20px 60px rgba(0,0,0,0.6);
  --bnav-h:64px;
}
.theme-light {
  --bg0:#f0eef8;--bg1:#e8e4f5;--bg2:#fff;--bg3:#f5f3ff;--bg4:#ede9fe;
  --text:#1a1730;--text2:#4c4870;--text3:#9790b8;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:'Inter',sans-serif;font-size:14px;background:var(--bg0);color:var(--text);-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:rgba(124,58,237,0.3);border-radius:3px}
input,select,textarea,button{font-family:'Inter',sans-serif;font-size:14px}
button{cursor:pointer}

/* ── AUTH ── */
.auth-screen{position:fixed;inset:0;background:#04000c;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;overflow-y:auto}
.auth-screen::before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% -10%,rgba(124,58,237,0.18) 0%,transparent 55%),radial-gradient(ellipse at 20% 100%,rgba(168,85,247,0.09) 0%,transparent 50%);}
.auth-screen::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.025;pointer-events:none;}
.auth-glow{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(124,58,237,0.2) 0%,transparent 70%);pointer-events:none}
.auth-card{background:rgba(4,1,12,0.92);backdrop-filter:blur(72px) saturate(250%);-webkit-backdrop-filter:blur(72px) saturate(250%);border:1px solid rgba(168,85,247,0.26);border-radius:20px;width:100%;max-width:420px;position:relative;box-shadow:0 60px 150px rgba(0,0,0,0.95),0 0 0 1px rgba(168,85,247,0.14),inset 0 2px 0 rgba(255,255,255,0.1);animation:authPOP .48s cubic-bezier(.34,1.56,.64,1);}
@keyframes authPOP{from{transform:scale(.88) translateY(36px);opacity:0}to{transform:scale(1);opacity:1}}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding:28px 28px 0}
.auth-logo{font-size:36px;line-height:1}
.auth-brand-name{font-size:24px;font-weight:900;letter-spacing:-1px;background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.auth-brand-sub{font-size:12px;color:var(--text3);margin-top:2px}
.auth-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.07);background:rgba(0,0,0,0.3);margin-bottom:0}
.auth-tab{flex:1;text-align:center;padding:16px;font-size:13px;font-weight:700;color:rgba(255,255,255,.22);cursor:pointer;position:relative;transition:color .2s}
.auth-tab.active{color:#fff}
.auth-tab.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,var(--p3),var(--p));border-radius:2px}
.field{margin-bottom:16px}
.field-label{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.field-wrap{position:relative}
.field-input{width:100%;background:var(--bg1);border:1px solid var(--border2);color:var(--text);padding:12px 14px;border-radius:var(--r-sm);font-size:14px;outline:none;transition:border-color .2s}
.field-input:focus{border-color:var(--acc);background:rgba(124,58,237,0.05)}
.field-wrap .field-input{padding-right:44px}
.field-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text3);font-size:16px;transition:color .2s}
.field-eye:hover{color:var(--text)}
.auth-error{background:var(--red-dim);border:1px solid rgba(239,68,68,.25);color:var(--red);padding:10px 14px;border-radius:var(--r-sm);font-size:13px;margin-bottom:14px}
.auth-btn{width:100%;padding:15px;background:rgba(124,58,237,0.72);backdrop-filter:blur(32px) saturate(200%);border:1px solid rgba(168,85,247,0.55);border-radius:12px;color:#fff;font-family:inherit;font-size:15px;font-weight:900;letter-spacing:-.2px;transition:all .32s cubic-bezier(.34,1.56,.64,1);margin-top:16px;box-shadow:inset 0 2px 0 rgba(255,255,255,0.24),inset 0 -1px 0 rgba(0,0,0,0.35),0 10px 40px rgba(124,58,237,0.48);cursor:pointer;position:relative;overflow:hidden;}
.auth-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left .55s ease;}
.auth-btn:hover::before{left:110%;}
.auth-btn:hover{background:rgba(139,92,246,0.85);transform:translateY(-2px) scale(1.01);box-shadow:inset 0 2px 0 rgba(255,255,255,0.28),0 18px 52px rgba(124,58,237,0.68);}
.auth-btn:active{transform:scale(.97);transition:all .08s;}
.auth-btn:disabled{opacity:.6;transform:none;cursor:not-allowed;}
.auth-hint{text-align:center;font-size:12px;color:var(--text3);margin-top:14px}

/* ── LAYOUT ── */
.layout{display:flex;height:100vh;overflow:hidden}
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── MOBILE BAR ── */
.mobile-bar{display:none;align-items:center;padding:0 14px;height:52px;background:var(--bg1);border-bottom:1px solid var(--border);flex-shrink:0;gap:10px;position:relative;z-index:50}
.mobile-bar-btn{background:none;border:none;color:var(--text2);font-size:20px;padding:6px;position:relative}
.mobile-bar-logo{flex:1;text-align:center;font-size:16px;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--bg1)}

/* ── SIDEBAR ── */
.sidebar{width:220px;min-width:220px;background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;overflow:hidden;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-logo-icon{font-size:22px}
.sidebar-logo-text{font-size:16px;font-weight:900;letter-spacing:-.5px;background:linear-gradient(135deg,#a78bfa,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex:1}
.sidebar-close{display:none;background:none;border:none;color:var(--text3);font-size:18px}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:199;backdrop-filter:blur(2px)}
.sidebar-nav{padding:8px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.snav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text3);cursor:pointer;border-left:2px solid transparent;transition:all .15s;font-size:13px;font-weight:500}
.snav-item:hover{color:var(--text2);background:rgba(255,255,255,0.03)}
.snav-item.active{color:var(--text);background:var(--acc-dim);border-left-color:var(--acc)}
.snav-icon{font-size:16px;flex-shrink:0;position:relative;top:2px}
.snav-label{flex:1}
.snav-badge{font-size:10px;font-weight:700;background:rgba(255,255,255,.08);color:var(--text3);padding:1px 6px;border-radius:10px}
.snav-badge.accent{background:var(--acc-dim);color:var(--acc3);border:1px solid var(--acc-border)}
.sidebar-projects{padding:12px 0;border-bottom:1px solid var(--border);flex-shrink:0}
.sidebar-section-title{padding:4px 16px 8px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
.sproj{display:flex;align-items:center;gap:8px;padding:7px 16px;font-size:12px;color:var(--text3);cursor:pointer;transition:all .15s}
.sproj:hover{color:var(--text2)}
.sproj.active{color:var(--text)}
.sproj-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.sidebar-user{margin-top:auto;padding:12px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:0;transition:background .15s;flex-shrink:0}
.sidebar-user:hover{background:rgba(255,255,255,.03)}
.sidebar-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.sidebar-user-info{flex:1;min-width:0}
.sidebar-user-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-role{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.sidebar-user-balance{font-size:13px;font-weight:700;color:var(--green);flex-shrink:0}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.page{display:none;flex:1;flex-direction:column;overflow:hidden;padding:20px 22px 16px}
.page.active{display:flex}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;flex-shrink:0;gap:12px}
.page-header-left{}
.page-title{font-size:22px;font-weight:800;letter-spacing:-.8px;display:flex;align-items:center;gap:10px}
.page-tag{font-size:11px;font-weight:700;background:var(--acc-dim);color:var(--acc3);padding:3px 9px;border-radius:20px;border:1px solid var(--acc-border);letter-spacing:.4px}
.page-sub{font-size:12px;color:var(--text3);margin-top:2px}
.page-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* ── BUTTONS ── */
.hbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:none;transition:all .15s;white-space:nowrap;line-height:1}
.hbtn.primary{background:linear-gradient(135deg,#5b21b6,#6d28d9);color:#fff;border:none;box-shadow:none}
.hbtn.primary:hover{box-shadow:0 6px 22px rgba(124,58,237,0.5);transform:translateY(-1px)}
.hbtn.ghost{background:rgba(255,255,255,0.05);color:var(--text2);border:1px solid var(--border)}
.hbtn.ghost:hover{background:rgba(255,255,255,0.09);border-color:var(--border2);color:var(--text)}
.hbtn.ghost.active{background:var(--acc-dim);border-color:var(--acc-border);color:var(--acc3)}
.hbtn.danger{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.hbtn.danger:hover{background:rgba(239,68,68,.25)}
.hbtn.success{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.2)}
.hbtn.sm{padding:6px 11px;font-size:12px}

/* ── STATS ── */
.stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat-card{flex:1;min-width:80px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px}
.stat-val{font-size:22px;font-weight:800;letter-spacing:-1px}
.stat-val.blue{color:var(--blue)}.stat-val.yellow{color:var(--yellow)}.stat-val.green{color:var(--green)}.stat-val.purple{color:var(--acc3)}.stat-val.red{color:var(--red)}
.stat-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:3px}

/* ── FILTERS ── */
.filters-bar{display:flex;gap:8px;margin-bottom:14px;flex-shrink:0;align-items:center;flex-wrap:wrap}
.search-wrap{position:relative}
.search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none;filter:none;opacity:0.5;}
.search-inp{background:var(--bg2);border:1px solid var(--border);padding:8px 12px 8px 32px;border-radius:var(--r-sm);color:var(--text);font-size:13px;outline:none;width:180px;transition:border-color .15s}
.search-inp:focus{border-color:var(--acc)}
.hselect{background:var(--bg2);border:1px solid var(--border);padding:8px 26px 8px 10px;border-radius:var(--r-sm);color:var(--text2);font-size:13px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='%237a768f' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 4px center;transition:border-color .15s}
.hselect:focus{border-color:var(--acc)}

/* ── BOARD ── */
.board-wrap{display:flex;gap:12px;flex:1;overflow-x:auto;min-height:0;padding-bottom:6px}
.board-col{flex:0 0 256px;display:flex;flex-direction:column;background:var(--bg1);border-radius:var(--r);border:1px solid var(--border);min-height:0}
.col-head{padding:12px 14px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px;border-bottom:1px solid var(--border);flex-shrink:0;text-transform:uppercase;letter-spacing:.4px;color:var(--text2)}
.col-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.col-dot.gray{background:#6b7280}.col-dot.blue{background:var(--blue)}.col-dot.yellow{background:var(--yellow)}.col-dot.green{background:var(--green)}
.col-cnt{margin-left:4px;background:rgba(255,255,255,0.07);color:var(--text3);padding:1px 7px;border-radius:10px;font-size:11px}
.col-plus{margin-left:auto;background:none;border:none;color:var(--text3);font-size:18px;line-height:1;transition:color .15s}
.col-plus:hover{color:var(--text)}
.col-body{padding:8px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:7px}


/* ── TASK CARD ── */
.task-card{background:var(--bg2);border:1px solid var(--border);padding:13px 13px 13px 16px;border-radius:var(--r-sm);cursor:grab;position:relative;user-select:none}
.task-card:hover{background:var(--bg3);border-color:var(--border2);box-shadow:0 8px 24px rgba(0,0,0,0.3)}

.tc-bar{position:absolute;top:0;left:0;width:3px;height:100%;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.tc-bar.HIGH{background:var(--red)}.tc-bar.MEDIUM{background:var(--yellow)}.tc-bar.LOW{background:var(--green)}
.tc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tc-id{font-size:10px;color:var(--text3);font-family:monospace}
.tc-del{background:none;border:none;color:var(--text3);font-size:14px;opacity:0;transition:all .15s;padding:2px 4px;border-radius:4px}
.task-card:hover .tc-del{opacity:1}
.tc-del:hover{color:var(--red)}
.tc-title{font-size:13px;font-weight:600;line-height:1.4;margin-bottom:9px;color:var(--text)}
.tc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.tc-tag{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600}
.tc-tag.purple{background:var(--purple-dim);color:var(--acc3);border:1px solid var(--acc-border)}
.tc-tag.blue{background:var(--blue-dim);color:#93c5fd;border:1px solid rgba(59,130,246,.2)}
.tc-tag.yellow{background:var(--yellow-dim);color:#fcd34d;border:1px solid rgba(245,158,11,.2)}
.tc-tag.green{background:var(--green-dim);color:#6ee7b7;border:1px solid rgba(16,185,129,.2)}
.tc-footer{display:flex;justify-content:space-between;align-items:center}
.tc-who{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text3)}
.tc-ava{width:18px;height:18px;border-radius:50%;background:#3b3060;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.tc-price{font-size:12px;font-weight:700;color:var(--green)}

/* Media thumbnails on card */
.tc-media{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.tc-media-thumb{width:44px;height:44px;border-radius:6px;object-fit:cover;border:1px solid var(--border);cursor:pointer}
.tc-media-more{width:44px;height:44px;border-radius:6px;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text3);cursor:pointer}

/* ── LIST VIEW ── */
.list-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r)}
.list-head{display:flex;padding:10px 14px;background:rgba(0,0,0,.2);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);flex-shrink:0}
.lh{flex-shrink:0}
.list-row{display:flex;align-items:center;padding:11px 14px;background:var(--bg2);border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.list-row:hover{background:var(--bg3)}
.list-row:last-child{border-bottom:none}
.lr-title{font-size:13px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px}
.lr-cell{flex-shrink:0;font-size:12px;color:var(--text2)}
.sbadge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px}
.sbadge.NEW{background:rgba(107,114,128,.15);color:#9ca3af}
.sbadge.IN_PROGRESS{background:var(--blue-dim);color:var(--blue)}
.sbadge.REVIEW{background:var(--yellow-dim);color:var(--yellow)}
.sbadge.COMPLETED{background:var(--green-dim);color:var(--green)}
.pbadge{font-size:11px;font-weight:700}
.pbadge.HIGH{color:var(--red)}.pbadge.MEDIUM{color:var(--yellow)}.pbadge.LOW{color:var(--green)}

/* ── NEWS ── */
.news-tags{display:flex;gap:7px;margin-bottom:14px;overflow-x:auto;flex-shrink:0;padding-bottom:2px}
.news-tags::-webkit-scrollbar{height:0}
.news-tag-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border);font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;transition:all .15s;white-space:nowrap;background:none}
.news-tag-btn:hover{color:var(--text2);border-color:var(--border2)}
.news-tag-btn.active{background:var(--acc-dim);color:var(--acc3);border-color:var(--acc-border)}
.feed{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.feed-loader{display:flex;justify-content:center;padding:30px}
.spin{width:26px;height:26px;border:2.5px solid var(--border2);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.news-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:12px;overflow:hidden;flex-shrink:0;transition:border-color .2s}
.news-card:hover{border-color:var(--border2)}
.news-card-head{display:flex;align-items:center;gap:10px;padding:13px 15px 9px}
.news-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--blue));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.news-meta{flex:1}
.news-author{font-size:13px;font-weight:700}
.news-date{font-size:11px;color:var(--text3)}
.news-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--acc-dim);color:var(--acc3);border:1px solid var(--acc-border)}
.news-video-wrap{position:relative;background:#000;cursor:pointer;overflow:hidden}
.news-video{width:100%;display:block;max-height:300px;object-fit:cover}
.news-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(255,255,255,.2);transition:all .2s;font-size:20px}
.news-video-wrap:hover .news-play{background:rgba(124,58,237,.85);border-color:var(--acc);transform:translate(-50%,-50%) scale(1.1)}
.news-body{padding:13px 15px}
.news-title{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:5px}
.news-text{font-size:13px;color:var(--text2);line-height:1.6}
.news-footer{display:flex;align-items:center;gap:6px;padding:9px 15px 13px;border-top:1px solid var(--border)}
.news-action{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text3);cursor:pointer;padding:5px 9px;border-radius:var(--r-sm);transition:all .15s;background:none;border:none}
.news-action:hover{background:rgba(255,255,255,.05);color:var(--text)}
.news-action.liked{color:var(--red)}
.news-comments-wrap{border-top:1px solid var(--border);padding:12px 15px;display:none}
.news-comments-wrap.open{display:block}
.cmt-row{display:flex;gap:8px;margin-bottom:10px}
.cmt-ava{width:26px;height:26px;border-radius:50%;background:#3b3060;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.cmt-body{flex:1}
.cmt-author{font-size:12px;font-weight:700;display:inline;margin-right:5px}
.cmt-text{font-size:12px;color:var(--text2);display:inline}
.cmt-date{font-size:10px;color:var(--text3);margin-top:2px}
.cmt-input-row{display:flex;gap:8px;margin-bottom:12px}
.cmt-input{flex:1;background:var(--bg1);border:1px solid var(--border);padding:8px 12px;border-radius:var(--r-sm);color:var(--text);font-size:13px;outline:none;transition:border-color .15s}
.cmt-input:focus{border-color:var(--acc)}

/* ── CABINET ── */
.cab-grid{display:grid;grid-template-columns:280px 1fr;gap:16px}
.cab-profile{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;text-align:center}
.cab-avatar{width:68px;height:68px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;box-shadow:0 0 0 4px var(--acc-dim),0 0 0 8px rgba(124,58,237,.06)}
.cab-name{font-size:17px;font-weight:800;margin-bottom:2px}
.cab-role{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:16px}
.cab-balance-block{background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(16,185,129,.04));border:1px solid rgba(16,185,129,.2);border-radius:var(--r);padding:16px;margin-bottom:14px}
.cab-balance-val{font-size:32px;font-weight:900;color:var(--green);letter-spacing:-2px}
.cab-balance-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.cab-stats-row{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.cab-stat{flex:1;padding:12px 6px;text-align:center;border-right:1px solid var(--border)}
.cab-stat:last-child{border-right:none}
.cab-stat-val{font-size:18px;font-weight:800}
.cab-stat-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.cab-info-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:12px}
.cab-info-item:last-child{border-bottom:none}
.cab-info-k{color:var(--text3)}.cab-info-v{font-weight:600}
.cab-right{display:flex;flex-direction:column;gap:14px}
.cab-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.cab-section-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.chart-bars{height:80px;display:flex;align-items:flex-end;gap:6px}
.chart-bar-g{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;justify-content:flex-end}
.chart-bar{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--acc2),var(--acc));min-height:4px;transition:height .6s cubic-bezier(.22,1,.36,1)}
.chart-bar:hover{background:linear-gradient(180deg,var(--acc3),var(--acc2))}
.chart-bar-lbl{font-size:9px;color:var(--text3)}
.chart-bar-val{font-size:9px;color:var(--text2);font-weight:600}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.status-item{background:var(--bg1);border-radius:var(--r-sm);padding:11px;border:1px solid var(--border)}
.status-item-val{font-size:20px;font-weight:800}
.status-item-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.history-list{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto}
.history-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg1);border-radius:var(--r-sm);border:1px solid var(--border)}
.history-ico{width:28px;height:28px;border-radius:50%;background:var(--green-dim);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.history-info{flex:1;min-width:0}
.history-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-date{font-size:10px;color:var(--text3)}
.history-amt{font-size:13px;font-weight:800;color:var(--green);flex-shrink:0}

/* ── TEAM ── */
.team-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.team-stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.team-table{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.team-thead{display:flex;padding:10px 16px;border-bottom:1px solid var(--border);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px}
.team-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s}
.team-row:hover{background:rgba(255,255,255,.02)}
.team-row:last-child{border-bottom:none}
.team-name-cell{display:flex;align-items:center;gap:10px;flex:1}
.team-ava{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--blue));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.team-uname{font-size:13px;font-weight:600}
.team-login{font-size:11px;color:var(--text3)}
.team-cell{flex-shrink:0;font-size:12px;color:var(--text2)}
.team-cell.money{color:var(--green);font-weight:700}
.rbadge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.rbadge.admin{background:var(--red-dim);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.rbadge.manager{background:var(--yellow-dim);color:var(--yellow);border:1px solid rgba(245,158,11,.2)}
.rbadge.designer{background:var(--acc-dim);color:var(--acc3);border:1px solid var(--acc-border)}

/* ── SETTINGS ── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.settings-section{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.settings-title{font-size:13px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.tag-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:var(--acc-dim);color:var(--acc3);border:1px solid var(--acc-border);font-size:12px;font-weight:600}
.tag-chip-del{background:none;border:none;color:var(--acc3);font-size:15px;line-height:1;opacity:.6}
.tag-chip-del:hover{opacity:1}
.add-row{display:flex;gap:8px}
.cf-list{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.cf-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--bg1);border-radius:var(--r-sm);border:1px solid var(--border)}
.cf-name{flex:1;font-size:13px;font-weight:500}
.cf-type{font-size:11px;color:var(--text3);background:rgba(255,255,255,.06);padding:2px 7px;border-radius:4px}
.cf-del{background:none;border:none;color:var(--text3);font-size:16px;transition:color .15s}
.cf-del:hover{color:var(--red)}
.add-cf{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--bg1);border-radius:var(--r-sm);border:1px solid var(--border)}
.theme-toggle{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg1);border-radius:var(--r);border:1px solid var(--border);cursor:pointer}
.theme-toggle-track{width:44px;height:24px;border-radius:12px;background:var(--border2);position:relative;transition:background .2s;flex-shrink:0}
.theme-toggle-track.on{background:var(--acc)}
.theme-toggle-thumb{width:18px;height:18px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;transition:transform .2s}
.theme-toggle-track.on .theme-toggle-thumb{transform:translateX(20px)}

/* ── NOTIFICATIONS ── */
.notif-panel{position:fixed;top:0;right:0;width:360px;max-width:100vw;height:100vh;background:var(--bg2);border-left:1px solid var(--border2);z-index:600;display:flex;flex-direction:column;box-shadow:var(--shadow);animation:slideR .25s ease}
@keyframes slideR{from{transform:translateX(100%)}to{transform:translateX(0)}}
.notif-overlay{position:fixed;inset:0;z-index:599;display:none}
.notif-panel-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.notif-panel-title{font-size:15px;font-weight:700;flex:1}
.notif-panel-close{background:none;border:none;color:var(--text3);font-size:22px;line-height:1}
.notif-list{flex:1;overflow-y:auto;padding:8px}
.notif-item{display:flex;gap:11px;padding:12px;border-radius:var(--r-sm);margin-bottom:6px;border:1px solid var(--border);cursor:pointer;transition:background .15s}
.notif-item.unread{border-color:var(--acc-border);background:var(--acc-dim)}
.notif-item:hover{background:var(--bg3)}
.notif-ico{font-size:20px;flex-shrink:0;margin-top:1px}
.notif-msg{font-size:13px;line-height:1.4;color:var(--text2)}
.notif-item.unread .notif-msg{color:var(--text)}
.notif-time{font-size:11px;color:var(--text3);margin-top:3px}
.notif-empty{text-align:center;padding:40px;color:var(--text3)}
.notif-badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;font-size:10px;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg0)}
.notif-trigger{position:relative}

/* ── BOTTOM NAV ── */
.bnav{display:none;height:var(--bnav-h);background:var(--bg1);border-top:1px solid var(--border);flex-shrink:0;align-items:center;padding:0 4px}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;color:var(--text3);cursor:pointer;font-size:10px;font-weight:600;border-radius:var(--r-sm);transition:color .15s}
.bnav-item.active{color:var(--acc3)}

/* ── SHEET (Bottom Sheet) ── */
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:800;display:none;backdrop-filter:blur(4px)}
.sheet-overlay.open{display:block;animation:fadeIn .2s ease}
.sheet{position:fixed;bottom:0;left:0;right:0;background:var(--bg2);border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:801;max-height:92vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);border-top:1px solid var(--border2)}
.sheet.open{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;border-radius:2px;background:var(--border2);margin:12px auto 0;flex-shrink:0}
.sheet-content{overflow-y:auto;padding:16px 20px 32px;flex:1}

/* ── MODAL (desktop full) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:900;padding:8px}
.modal-overlay.open{display:flex;animation:fadeIn .2s ease}
.modal{background:#0e0820;border:1px solid rgba(124,58,237,0.3);border-radius:var(--r-xl);height:85vh;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;width:960px;max-width:96vw;box-shadow:var(--shadow);animation:slideUp .25s cubic-bezier(.22,1,.36,1)}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── MODAL TASK ── */
.modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;background:var(--bg1);flex-shrink:0}
.modal-head-id{font-size:10px;color:var(--text3);font-family:monospace;margin-bottom:3px}
.modal-head-title{font-size:16px;font-weight:700}
.modal-close{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text3);font-size:18px;width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{background:rgba(255,255,255,.12);color:var(--text)}
.modal-body{display:flex;flex:1;overflow:hidden}
.modal-main{flex:1;padding:20px;overflow-y:auto;border-right:1px solid var(--border)}
.modal-side{width:270px;padding:20px;overflow-y:auto;background:rgba(0,0,0,.08);flex-shrink:0}
.modal-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;font-weight:700;margin-bottom:7px;letter-spacing:.6px}
.modal-desc{background:rgba(0,0,0,.18);border:1px solid var(--border);padding:14px;border-radius:var(--r-sm);font-size:13px;line-height:1.6;color:var(--text2);min-height:60px;margin-bottom:18px}
.modal-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px}
.modal-tab{padding:8px 14px;font-size:13px;color:var(--text3);cursor:pointer;position:relative;font-weight:600;transition:color .15s}
.modal-tab:hover{color:var(--text2)}
.modal-tab.active{color:var(--text)}
.modal-tab.active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--acc);border-radius:1px}
.modal-tab-content{animation:fadeIn .2s ease}

/* Media Grid in Modal */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.media-item{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);position:relative;aspect-ratio:16/9;background:var(--bg1);cursor:pointer;group}
.media-item img,.media-item video{width:100%;height:100%;object-fit:cover;display:block}
.media-item-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:24px;opacity:0}
.media-item:hover .media-item-overlay{background:rgba(0,0,0,.5);opacity:1}
.media-doc{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-sm);text-decoration:none;color:var(--text2);transition:all .15s;margin-bottom:7px;font-size:12px}
.media-doc:hover{background:var(--bg3);color:var(--text)}
.media-doc-icon{font-size:24px;flex-shrink:0}
.media-doc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.media-doc-size{font-size:10px;color:var(--text3);flex-shrink:0}
.upload-zone{border:2px dashed var(--border2);border-radius:var(--r);padding:28px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:14px}
.upload-zone:hover,.upload-zone.drag{border-color:var(--acc);background:var(--acc-dim)}
.upload-zone-icon{font-size:32px;margin-bottom:8px}
.upload-zone-text{font-size:13px;color:var(--text2)}
.upload-zone-sub{font-size:11px;color:var(--text3);margin-top:4px}
.upload-progress{height:4px;background:var(--border);border-radius:2px;margin-top:8px;overflow:hidden}
.upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:2px;transition:width .3s;width:0}
.upload-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.upload-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg1);border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px}
.upload-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-item-status{font-size:11px;flex-shrink:0}
.upload-item-status.ok{color:var(--green)}
.upload-item-status.err{color:var(--red)}
.upload-item-status.loading{color:var(--acc3)}

/* modal form inputs */
.minput,.mselect,.mtextarea{width:100%;background:rgba(0,0,0,.2);border:1px solid var(--border);color:var(--text);padding:9px 11px;border-radius:var(--r-sm);font-size:13px;margin-bottom:12px;outline:none;transition:border-color .15s;font-family:'Inter',sans-serif}
.minput:focus,.mselect:focus,.mtextarea:focus{border-color:var(--acc)}
.mtextarea{height:75px;resize:vertical}
.mselect{appearance:none;cursor:pointer}
.frow{display:flex;gap:10px}
.frow>div{flex:1}
.flbl{font-size:10px;color:var(--text3);text-transform:uppercase;font-weight:700;margin-bottom:5px;letter-spacing:.5px;display:block}
.prop-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;border-bottom:1px solid rgba(255,255,255,.03)}
.prop-k{color:var(--text3)}.prop-v{font-weight:600}

/* ── TOASTS ── */
#toasts{position:fixed;bottom:80px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:7px}
.toast{background:var(--bg3);border:1px solid var(--border2);border-left:3px solid var(--acc);color:var(--text);padding:11px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:600;box-shadow:var(--shadow);animation:slideR .3s ease;pointer-events:none;max-width:300px}
.toast.ok{border-left-color:var(--green)}.toast.err{border-left-color:var(--red)}.toast.warn{border-left-color:var(--yellow)}

/* ── MISC ── */
.loading{display:flex;justify-content:center;padding:50px}
.empty{text-align:center;padding:28px;color:var(--text3);font-size:13px}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);z-index:200}
  .sidebar.open{transform:translateX(0)}
  .sidebar-close{display:flex}
  .sidebar-overlay.open{display:block}
  .mobile-bar{display:flex}
  .bnav{display:flex}
  .page{padding:14px 14px 0;padding-bottom:calc(var(--bnav-h) + 14px)}
  .desktop-only{display:none!important}
  .modal-body{flex-direction:column}
  .modal-side{width:100%;border-right:none;border-top:1px solid var(--border)}
  .cab-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .board-col{flex:0 0 240px}
  #toasts{bottom:calc(var(--bnav-h) + 10px);left:12px;right:12px}
  .toast{max-width:100%}
  .notif-panel{width:100vw}
  .stats-row{gap:7px}
  .stat-card{padding:10px 12px}
  .stat-val{font-size:18px}
}
@media(min-width:769px){
  .sidebar{transform:none!important}
  .sidebar-overlay{display:none!important}
  .mobile-bar{display:none!important}
  .bnav{display:none!important}
  #app{flex-direction:row}
  .main{overflow:hidden}
  #toasts{bottom:24px;right:22px}
}

/* ── DRAG GHOST ── */


/* ── MEDIA THUMBS ON CARD ── */
.tc-media{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.tc-media-thumb{width:48px;height:48px;border-radius:7px;object-fit:cover;border:1px solid var(--border);cursor:pointer;transition:opacity .15s}
.tc-media-thumb:hover{opacity:.8}
.tc-media-video,.tc-media-doc,.tc-media-more{width:48px;height:48px;border-radius:7px;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .15s}
.tc-media-more{font-size:11px;font-weight:700;color:var(--text3)}
.tc-media-video:hover,.tc-media-doc:hover{background:var(--acc-dim);border-color:var(--acc-border)}

/* ── MEDIA GRID IN MODAL ── */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.media-item{border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);position:relative;aspect-ratio:16/9;background:var(--bg1);cursor:pointer}
.media-item img{width:100%;height:100%;object-fit:cover;display:block}
.media-item-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background .2s;font-size:26px;opacity:0}
.media-item:hover .media-item-overlay{background:rgba(0,0,0,.5);opacity:1}
.media-item-video{cursor:default}
.media-item-video .media-item-overlay{pointer-events:none;display:none}
.media-doc{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-sm);text-decoration:none;color:var(--text2);transition:all .15s;margin-bottom:8px}
.media-doc:hover{background:var(--bg3);color:var(--text);border-color:var(--border2)}
.media-doc-icon{font-size:24px;flex-shrink:0}
.media-doc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:500}
.media-doc-size{font-size:12px;color:var(--acc3);flex-shrink:0;font-weight:600}

/* ── UPLOAD ZONE ── */
.upload-zone{border:2px dashed var(--border2);border-radius:var(--r-lg);padding:28px 20px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:12px;background:rgba(0,0,0,.1)}
.upload-zone:hover,.upload-zone.drag{border-color:var(--acc);background:var(--acc-dim);transform:scale(1.01)}
.upload-zone-icon{font-size:36px;margin-bottom:10px}
.upload-zone-text{font-size:14px;color:var(--text2);margin-bottom:4px}
.upload-zone-sub{font-size:12px;color:var(--text3)}
.upload-progress{height:3px;background:var(--border);border-radius:2px;margin-top:12px;overflow:hidden}
.upload-progress-bar{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));border-radius:2px;transition:width .4s;width:0}
.upload-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.upload-item{display:flex;align-items:center;gap:9px;padding:8px 12px;background:var(--bg1);border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px}
.upload-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.upload-item-size{font-size:11px;color:var(--text3);flex-shrink:0}
.upload-item-status{font-size:11px;flex-shrink:0;font-weight:600}
.upload-item-status.ok{color:var(--green)}.upload-item-status.err{color:var(--red)}.upload-item-status.loading{color:var(--acc3)}

/* ── INFO PAGE ── */
.info-section{margin-bottom:28px;flex-shrink:0}
.info-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px}
.info-section-title{font-size:16px;font-weight:800;letter-spacing:-.3px}
.info-section-sub{font-size:12px;color:var(--text3)}

/* Video Swiper */
.video-swiper{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;cursor:grab}
.video-swiper:active{cursor:grabbing}
.video-swiper::-webkit-scrollbar{height:3px}
.video-swiper::-webkit-scrollbar-thumb{background:var(--acc-dim);border-radius:3px}
.video-card{flex:0 0 240px;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;background:var(--bg2);border:1px solid var(--border);transition:transform .2s}
.video-card:hover{transform:translateY(-3px);border-color:var(--border2)}
.video-card-thumb{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden}
.video-card-video{width:100%;height:100%;object-fit:cover;display:block}
.video-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:16px;border:1.5px solid rgba(255,255,255,.2);transition:all .2s}
.video-card-thumb:hover .video-card-play{background:rgba(124,58,237,.85);border-color:var(--acc);transform:translate(-50%,-50%) scale(1.1)}
.video-card-overlay{position:absolute;top:8px;right:8px}
.video-card-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;background:rgba(0,0,0,.7);color:#fff;backdrop-filter:blur(4px)}
.video-card-info{padding:11px 13px}
.video-card-title{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video-card-author{font-size:11px;color:var(--text3)}

/* Articles Grid */
.articles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.article-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;transition:all .2s}
.article-card:hover{background:var(--bg3);border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.article-card-tag{font-size:10px;font-weight:700;color:var(--acc3);background:var(--acc-dim);border:1px solid var(--acc-border);padding:2px 8px;border-radius:20px;display:inline-block;margin-bottom:9px}
.article-card-title{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:7px}
.article-card-body{font-size:12px;color:var(--text2);line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.article-card-footer{display:flex;align-items:center;justify-content:space-between}
.article-card-author{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text3)}
.article-card-stats{font-size:12px;color:var(--text3)}

/* Info Stats */
.info-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.info-stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;text-align:center;transition:all .2s}
.info-stat-card:hover{transform:translateY(-2px)}
.info-stat-val{font-size:28px;font-weight:900;letter-spacing:-1px;margin-bottom:5px}
.info-stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}

@media(max-width:768px){
  .video-card{flex:0 0 200px}
  .articles-grid{grid-template-columns:1fr}
  .info-stats-grid{grid-template-columns:1fr 1fr}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
/* upload zone всегда видима */
.upload-zone-always { display: block !important; }

/* ── ПРЕВЬЮ ПРИ ВЫБОРЕ ФАЙЛОВ ── */
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:10px}
.preview-item{position:relative;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1;background:var(--bg3);border:1px solid var(--border)}
.preview-item img,.preview-item video{width:100%;height:100%;object-fit:cover;display:block}
.preview-item-doc{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--text3);padding:6px;text-align:center}
.preview-item-doc span:first-child{font-size:28px}
.preview-item-name{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
.preview-item-del{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.7);border:none;color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.preview-item-del:hover{background:var(--red)}

/* ══ SPACES SIDEBAR ══ */
.sidebar-spaces { flex: 1; overflow-y: auto; padding: 8px 0; min-height: 0; }
.sidebar-section-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 6px; }
.sidebar-section-title { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; }
.sidebar-section-add { background: none; border: none; color: var(--text3); font-size: 14px; cursor: pointer; width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; transition: all .15s; line-height: 1; margin-top: -2px; }
.sidebar-section-add:hover { background: var(--acc-dim); color: var(--acc3); }

.space-item { display: flex; align-items: center; gap: 9px; padding: 8px 16px; cursor: pointer; transition: all .15s; border-left: 2px solid transparent; position: relative; }
.space-item:hover { background: rgba(255,255,255,.03); }
.space-item.active { background: var(--acc-dim); border-left-color: var(--acc); }
.space-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; image-rendering: crisp-edges; } .space-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: -webkit-optimize-contrast; }
.space-name { font-size: 13px; font-weight: 500; color: var(--text2); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-item.active .space-name { color: var(--text); }
.space-cnt { font-size: 10px; color: var(--text3); background: rgba(255,255,255,.07); padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }
.space-actions { display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.space-item:hover .space-actions { opacity: 1; }
.space-action-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; transition: all .15s; }
.space-action-btn:hover { color: var(--text); background: rgba(255,255,255,.08); }

/* ══ BOARD ══ */
.board-cols { display: flex; gap: 12px; height: 100%; overflow-x: auto; padding-bottom: 6px; }
.board-col { flex: 0 0 260px; display: flex; flex-direction: column; background: var(--bg1); border-radius: var(--r); border: 1px solid var(--border); min-height: 0; }
.col-head { padding: 11px 13px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--border); flex-shrink: 0; text-transform: uppercase; letter-spacing: .4px; }
.col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.col-cnt { margin-left: 3px; background: rgba(255,255,255,.07); color: var(--text3); padding: 1px 6px; border-radius: 10px; font-size: 11px; }
.col-plus { margin-left: auto; background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer; line-height: 1; transition: color .15s; padding: 0 2px; }
.col-plus:hover { color: var(--text); }
.col-body { padding: 7px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 7px; }


/* ══ TASK CARD ══ */
.task-card { background: var(--bg2); border: 1px solid var(--border); padding: 12px 13px 12px 16px; border-radius: var(--r-sm); cursor: pointer;  position: relative; }
.task-card:hover { background: var(--bg3); border-color: var(--border2);  box-shadow: 0 6px 20px rgba(0,0,0,.28); }

.tc-bar { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tc-bar.HIGH { background: var(--red); } .tc-bar.MEDIUM { background: var(--yellow); } .tc-bar.LOW { background: var(--green); }
.tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.tc-id { font-size: 10px; color: var(--text3); font-family: monospace; }
.tc-del { background: none; border: none; color: var(--text3); cursor: pointer; padding: 2px 5px; border-radius: 4px; opacity: 0; transition: all .15s; font-size: 13px; }
.task-card:hover .tc-del { opacity: 1; }
.tc-del:hover { color: var(--red); background: var(--red-dim); }
.tc-title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 8px; color: var(--text); }
.tc-custom-fields { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.tc-cf-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text3); }
.tc-cf-label { color: var(--text3); flex-shrink: 0; }
.tc-cf-val { color: var(--text2); font-weight: 500; }
.tc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tc-tag { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; }
.tc-tag.purple { background: var(--purple-dim); color: var(--acc3); border: 1px solid var(--acc-border); }
.tc-tag.blue { background: var(--blue-dim); color: #93c5fd; border: 1px solid rgba(59,130,246,.2); }
.tc-tag.green { background: var(--green-dim); color: #6ee7b7; border: 1px solid rgba(16,185,129,.2); }
.tc-tag.yellow { background: var(--yellow-dim); color: #fcd34d; border: 1px solid rgba(245,158,11,.2); }
.tc-footer { display: flex; justify-content: space-between; align-items: center; }
.tc-who { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); }
.tc-ava { width: 18px; height: 18px; border-radius: 50%; background: #3b3060; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.tc-price { font-size: 12px; font-weight: 700; color: var(--green); }
.tc-media { display: flex; gap: 4px; margin-bottom: 8px; }
.tc-media-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }
.tc-media-video, .tc-media-doc, .tc-media-more { width: 44px; height: 44px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.tc-media-more { font-size: 11px; font-weight: 700; color: var(--text3); }

/* ══ LIST VIEW ══ */
.list-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); }
.list-head { display: flex; padding: 9px 14px; background: rgba(0,0,0,.2); font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.list-row { display: flex; align-items: center; padding: 10px 14px; background: var(--bg2); border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.list-row:hover { background: var(--bg3); }
.list-row:last-child { border-bottom: none; }
.lr-title { font-size: 13px; font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.lr-cell { flex-shrink: 0; font-size: 12px; color: var(--text2); }
.sbadge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; }
.pbadge { font-size: 11px; font-weight: 700; }
.pbadge.HIGH { color: var(--red); } .pbadge.MEDIUM { color: var(--yellow); } .pbadge.LOW { color: var(--green); }

/* ══ EMPTY STATE ══ */
.crm-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.crm-empty-icon { font-size: 56px; margin-bottom: 16px; opacity: .6; }
.crm-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.crm-empty-sub { font-size: 14px; color: var(--text3); max-width: 300px; line-height: 1.5; }

/* ══ SPACE SETTINGS MODAL ══ */
.settings-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.settings-tab { padding: 9px 14px; font-size: 13px; color: var(--text3); cursor: pointer; position: relative; font-weight: 600; transition: color .15s; }
.settings-tab:hover { color: var(--text2); }
.settings-tab.active { color: var(--text); }
.settings-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--acc); border-radius: 1px; }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; animation: fadeIn .2s ease; }

/* Field Manager */
.field-manager { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.field-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-sm); transition: all .15s; }
.field-row:hover { border-color: var(--border2); }
.field-row-icon { font-size: 16px; flex-shrink: 0; }
.field-row-info { flex: 1; min-width: 0; }
.field-row-name { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.field-row-type { font-size: 11px; color: var(--text3); margin-top: 2px; }
.field-required-badge { font-size: 10px; font-weight: 700; color: var(--red); background: var(--red-dim); padding: 1px 6px; border-radius: 10px; border: 1px solid rgba(239,68,68,.2); }
.field-row-actions { display: flex; gap: 5px; flex-shrink: 0; }
.field-action { background: none; border: none; color: var(--text3); cursor: pointer; padding: 4px 7px; border-radius: var(--r-sm); font-size: 12px; transition: all .15s; }
.field-action:hover { background: rgba(255,255,255,.08); color: var(--text); }
.field-action.danger:hover { background: var(--red-dim); color: var(--red); }

/* Add field form */
.add-field-form { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; margin-top: 8px; }
.add-field-form.hidden { display: none; }

/* Status Manager */
.status-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.status-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-sm); }
.status-color-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; cursor: pointer; border: 2px solid rgba(255,255,255,.2); }
.status-name-inp { flex: 1; background: none; border: none; color: var(--text); font-size: 13px; font-weight: 500; font-family: 'Inter',sans-serif; outline: none; }
.status-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; transition: color .15s; }
.status-del:hover { color: var(--red); }

/* Members list */
.member-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-ava { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,var(--acc),var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.member-info { flex: 1; min-width: 0; }
.member-name { font-size: 13px; font-weight: 600; }
.member-login { font-size: 11px; color: var(--text3); }

/* Ghost drag */


/* ══ TASK MODAL ══ */
.modal-head { padding: 17px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: flex-start; background: var(--bg1); flex-shrink: 0; }
.modal-head-id { font-size: 10px; color: var(--text3); font-family: monospace; margin-bottom: 3px; }
.modal-head-title { font-size: 16px; font-weight: 700; }
.modal-close { background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text3); font-size: 17px; cursor: pointer; width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.modal-close:hover { background: rgba(255,255,255,.12); color: var(--text); }
.modal-body { display: flex; flex: 1; overflow: hidden; }
.modal-main { flex: 1; padding: 20px; overflow-y: auto; border-right: 1px solid var(--border); }
.modal-side { width: 270px; padding: 20px; overflow-y: auto; background: rgba(0,0,0,.08); flex-shrink: 0; }
.modal-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; font-weight: 700; margin-bottom: 7px; letter-spacing: .6px; }
.modal-desc { background: rgba(0,0,0,.18); border: 1px solid var(--border); padding: 13px; border-radius: var(--r-sm); font-size: 13px; line-height: 1.6; color: var(--text2); min-height: 60px; margin-bottom: 16px; }
.modal-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.modal-tab { padding: 8px 14px; font-size: 13px; color: var(--text3); cursor: pointer; position: relative; font-weight: 600; transition: color .15s; }
.modal-tab:hover { color: var(--text2); }
.modal-tab.active { color: var(--text); }
.modal-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--acc); border-radius: 1px; }
.modal-tab-content { animation: fadeIn .2s ease; }
.prop-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.03); }
.prop-k { color: var(--text3); }
.prop-v { font-weight: 600; }
.minput, .mselect, .mtextarea { width: 100%; background: rgba(0,0,0,.2); border: 1px solid var(--border); color: var(--text); padding: 9px 11px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 12px; outline: none; transition: border-color .15s; font-family: 'Inter',sans-serif; }
.minput:focus, .mselect:focus, .mtextarea:focus { border-color: var(--acc); }
.minput.error { border-color: var(--red); }
.mtextarea { height: 75px; resize: vertical; }
.mselect { appearance: none; cursor: pointer; }
.frow { display: flex; gap: 10px; }
.frow > div { flex: 1; }
.flbl { font-size: 10px; color: var(--text3); text-transform: uppercase; font-weight: 700; margin-bottom: 5px; letter-spacing: .5px; display: block; }
.flbl .req { color: var(--red); margin-left: 2px; }

/* Upload */
.upload-zone { border: 2px dashed var(--border2); border-radius: var(--r-lg); padding: 24px 20px; text-align: center; cursor: pointer; transition: all .2s; margin-bottom: 12px; background: rgba(0,0,0,.1); }
.upload-zone:hover, .upload-zone.drag { border-color: var(--acc); background: var(--acc-dim); }
.upload-zone-icon { font-size: 32px; margin-bottom: 8px; }
.upload-zone-text { font-size: 14px; color: var(--text2); margin-bottom: 3px; }
.upload-zone-sub { font-size: 11px; color: var(--text3); }
.upload-progress { height: 3px; background: var(--border); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.upload-progress-bar { height: 100%; background: linear-gradient(90deg,var(--acc),var(--acc2)); border-radius: 2px; transition: width .4s; width: 0; }
.upload-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.upload-item { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--bg1); border-radius: var(--r-sm); border: 1px solid var(--border); font-size: 12px; }
.upload-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.upload-item-size { font-size: 11px; color: var(--text3); flex-shrink: 0; }
.upload-item-status { font-size: 11px; flex-shrink: 0; font-weight: 600; }
.upload-item-status.ok { color: var(--green); } .upload-item-status.err { color: var(--red); } .upload-item-status.loading { color: var(--acc3); }

/* Media */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 10px; margin-bottom: 12px; }
.media-item { border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border); position: relative; aspect-ratio: 16/9; background: var(--bg1); cursor: pointer; }
.media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-item-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background .2s; font-size: 24px; opacity: 0; }
.media-item:hover .media-item-overlay { background: rgba(0,0,0,.5); opacity: 1; }
.media-doc { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-sm); text-decoration: none; color: var(--text2); transition: all .15s; margin-bottom: 8px; }
.media-doc:hover { background: var(--bg3); color: var(--text); }
.media-doc-icon { font-size: 22px; flex-shrink: 0; }
.media-doc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.media-doc-size { font-size: 12px; color: var(--acc3); font-weight: 600; flex-shrink: 0; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap: 7px; margin-top: 10px; }
.preview-item { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1; background: var(--bg3); border: 1px solid var(--border); }
.preview-item img, .preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-item-doc { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; color: var(--text3); padding: 5px; text-align: center; }
.preview-item-doc span:first-child { font-size: 24px; }
.preview-item-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.7); border: none; color: #fff; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.preview-item-del:hover { background: var(--red); }

/* Toasts, Modals, etc */
#toasts { position: fixed; bottom: 80px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 7px; }
.toast { background: var(--bg3); border: 1px solid var(--border2); border-left: 3px solid var(--acc); color: var(--text); padding: 11px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; box-shadow: var(--shadow); animation: slideR .3s ease; pointer-events: none; max-width: 300px; }
.toast.ok { border-left-color: var(--green); } .toast.err { border-left-color: var(--red); } .toast.warn { border-left-color: var(--yellow); }
.loading { display: flex; justify-content: center; padding: 50px; }
.empty { text-align: center; padding: 24px; color: var(--text3); font-size: 13px; }

@media(max-width:768px) {
  .board-col { flex: 0 0 240px; }
  .media-grid { grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); }
  .modal-body { flex-direction: column; }
  .modal-side { width: 100%; border-right: none; border-top: 1px solid var(--border); }
  #toasts { bottom: calc(var(--bnav-h) + 10px); left: 12px; right: 12px; }
  .toast { max-width: 100%; }
  .frow { flex-direction: column; gap: 0; }
}
@media(min-width:769px) {
  #toasts { bottom: 24px; right: 22px; }
}

/* ══ НОВЫЕ КОМПОНЕНТЫ ══ */

/* Timer */
.time-tracker-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-sm); background:rgba(0,0,0,.2); border:1px solid var(--border); font-size:12px; font-weight:600; cursor:pointer; color:var(--text2); transition:all .15s; }
.time-tracker-btn:hover { border-color:var(--acc); color:var(--acc3); }
.time-tracker-btn.active { background:var(--red-dim); border-color:rgba(239,68,68,.3); color:var(--red); }
.timer-display { display:flex; align-items:center; gap:6px; padding:8px 12px; background:var(--green-dim); border:1px solid rgba(16,185,129,.2); border-radius:var(--r-sm); font-size:13px; font-weight:700; color:var(--green); margin-top:10px; }
.time-total { text-align:center; padding:14px; background:var(--bg1); border-radius:var(--r); border:1px solid var(--border); margin-bottom:12px; }
.time-total-val { font-size:28px; font-weight:800; color:var(--acc3); letter-spacing:-1px; display:block; }
.time-total-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; margin-top:3px; }
.time-entry { display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:6px; }
.time-entry-user { width:28px; height:28px; border-radius:50%; background:var(--acc-dim); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.time-entry-info { flex:1; }
.time-entry-name { font-size:12px; font-weight:600; display:block; }
.time-entry-dur { font-size:13px; font-weight:700; color:var(--acc3); }
.time-entry-date { font-size:11px; color:var(--text3); flex-shrink:0; }

/* Subtasks */
.subtask-list { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.subtask-progress { height:6px; background:var(--border); border-radius:3px; margin-bottom:12px; overflow:hidden; position:relative; }
.subtask-progress-bar { height:100%; background:linear-gradient(90deg,var(--acc),var(--green)); border-radius:3px; transition:width .4s; }
.subtask-progress-label { position:absolute; right:0; top:-16px; font-size:10px; color:var(--text3); }
.subtask-row { display:flex; align-items:center; gap:9px; padding:8px 10px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); transition:all .15s; }
.subtask-row:hover { border-color:var(--border2); }
.subtask-row.done .subtask-title { text-decoration:line-through; color:var(--text3); }
.subtask-check { width:18px; height:18px; border-radius:4px; border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:11px; font-weight:700; flex-shrink:0; transition:all .15s; }
.subtask-check.checked { background:var(--green); border-color:var(--green); color:#fff; }
.subtask-check:hover { border-color:var(--acc); }
.subtask-title { flex:1; font-size:13px; }
.subtask-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; opacity:0; transition:all .15s; }
.subtask-row:hover .subtask-del { opacity:1; }
.subtask-del:hover { color:var(--red); }
.add-subtask-row { display:flex; gap:7px; }
.subtask-input { flex:1; background:var(--bg1); border:1px solid var(--border); color:var(--text); padding:8px 11px; border-radius:var(--r-sm); font-size:13px; outline:none; transition:border-color .15s; }
.subtask-input:focus { border-color:var(--acc); }

/* Comments in task */
.task-comment-input { display:flex; gap:10px; padding:0 0 14px; border-bottom:1px solid var(--border); margin-bottom:14px; }
.task-comment-ava { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; margin-top:2px; }
.cmt-textarea { width:100%; background:var(--bg1); border:1px solid var(--border); color:var(--text); padding:9px 11px; border-radius:var(--r-sm); font-size:13px; outline:none; resize:none; transition:border-color .15s; font-family:'Inter',sans-serif; }
.cmt-textarea:focus { border-color:var(--acc); }
.task-cmt-list { display:flex; flex-direction:column; gap:10px; }
.task-comment { display:flex; gap:10px; }
.task-cmt-ava { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; flex-shrink:0; margin-top:2px; }
.task-cmt-body { flex:1; background:var(--bg1); border:1px solid var(--border); border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm); padding:10px 12px; }
.task-cmt-header { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.task-cmt-author { font-size:12px; font-weight:700; }
.task-cmt-time { font-size:11px; color:var(--text3); flex:1; }
.task-cmt-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; opacity:0; transition:opacity .15s; }
.task-cmt-body:hover .task-cmt-del { opacity:1; }
.task-cmt-del:hover { color:var(--red); }
.task-cmt-text { font-size:13px; color:var(--text2); line-height:1.5; }

/* Activity */
.activity-list { display:flex; flex-direction:column; gap:8px; }
.activity-row { display:flex; gap:10px; align-items:flex-start; }
.activity-icon { font-size:16px; flex-shrink:0; margin-top:1px; }
.activity-body { flex:1; font-size:13px; color:var(--text2); line-height:1.5; }
.activity-user { font-weight:700; color:var(--text); }
.activity-time { font-size:11px; color:var(--text3); margin-top:2px; }

/* Tab cnt badge */
.tab-cnt { font-size:11px; font-weight:700; background:var(--acc-dim); color:var(--acc3); padding:1px 6px; border-radius:10px; margin-left:4px; }

/* Modal desc edit */
.modal-desc-edit { width:100%; background:rgba(0,0,0,.15); border:1px solid var(--border); color:var(--text2); padding:13px; border-radius:var(--r-sm); font-size:13px; line-height:1.6; min-height:70px; margin-bottom:16px; resize:vertical; outline:none; transition:border-color .15s; font-family:'Inter',sans-serif; }
.modal-desc-edit:focus { border-color:var(--acc); }

/* Automations */
.auto-list { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.auto-row { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); }
.auto-row-main { display:flex; align-items:center; gap:12px; flex:1; }
.auto-active { width:10px; height:10px; border-radius:50%; flex-shrink:0; cursor:pointer; transition:all .15s; }
.auto-info { flex:1; }
.auto-name { font-size:13px; font-weight:600; }
.auto-rule { font-size:11px; color:var(--text3); margin-top:2px; }

/* Dashboard */
.dash-header-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:16px; }
.dash-stat { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:14px; text-align:center; }
.dash-stat-val { font-size:20px; font-weight:800; letter-spacing:-1px; }
.dash-stat-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; margin-top:3px; }
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.dash-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; }
.dash-card-title { font-size:13px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:7px; }
.member-stats-table { display:flex; flex-direction:column; gap:0; }
.mst-head { display:flex; padding:8px 0; font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.mst-row { display:flex; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); gap:8px; }
.mst-row:last-child { border-bottom:none; }
.mst-name { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.mst-cell { font-size:12px; color:var(--text2); flex-shrink:0; }
.mst-cell.money { color:var(--green); font-weight:700; }
.space-stat-row { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.space-stat-row:last-child { border-bottom:none; }
.space-stat-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }

/* Goals */
.goal-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.goal-row:last-child { border-bottom:none; }
.goal-info { flex:1; min-width:0; }
.goal-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goal-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.goal-progress-wrap { width:80px; height:6px; background:var(--border); border-radius:3px; overflow:hidden; flex-shrink:0; }
.goal-progress-bar { height:100%; border-radius:3px; transition:width .5s; }
.goal-pct { font-size:12px; font-weight:700; flex-shrink:0; width:36px; text-align:right; }

@media(max-width:768px) {
  .dash-grid { grid-template-columns:1fr; }
  .dash-grid .dash-card[style*="span 2"], .dash-grid .dash-card[style*="span 3"] { grid-column:span 1; }
  .mst-head > div:not(:first-child):not(:last-child) { display:none; }
  .mst-row > div:not(:first-child):not(:last-child) { display:none; }
}

/* ══ GLOBAL SEARCH ══ */
.global-search-wrap { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(8px); z-index:2000; display:flex; align-items:flex-start; justify-content:center; padding-top:80px; }
.global-search-inner { background:var(--bg2); border:1px solid var(--border2); border-radius:var(--r-xl); width:600px; max-width:95vw; box-shadow:var(--shadow); animation:slideUp .2s ease; overflow:hidden; }
.global-search-input-wrap { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border); }
.global-search-input { flex:1; background:none; border:none; color:var(--text); font-size:16px; outline:none; font-family:'Inter',sans-serif; }
.global-search-input::placeholder { color:var(--text3); }
.global-search-close { background:none; border:none; color:var(--text3); font-size:18px; cursor:pointer; padding:4px; }
.global-search-results { max-height:400px; overflow-y:auto; padding:8px; }
.search-result { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); cursor:pointer; transition:background .15s; }
.search-result:hover { background:var(--acc-dim); }
.search-result-icon { font-size:18px; flex-shrink:0; }
.search-result-title { font-size:13px; font-weight:600; }
.search-result-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.search-result-type { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; background:var(--bg3); color:var(--text3); flex-shrink:0; }
.search-empty { text-align:center; padding:28px; color:var(--text3); font-size:13px; }
.search-section-title { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; padding:6px 12px 4px; }

/* ══ CALENDAR ══ */
.cal-grid-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cal-month-label { font-size:15px; font-weight:700; min-width:160px; text-align:center; }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; flex-shrink:0; }
.cal-weekdays > div { text-align:center; font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; padding:6px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; flex:1; overflow-y:auto; }
.cal-cell { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-sm); padding:6px; min-height:90px; transition:border-color .15s; }
.cal-cell:hover { border-color:var(--border2); }
.cal-cell.today { border-color:var(--acc); background:var(--acc-dim); }
.cal-cell.other-month { opacity:.4; }
.cal-day-num { font-size:12px; font-weight:700; color:var(--text3); margin-bottom:4px; }
.cal-cell.today .cal-day-num { color:var(--acc3); }
.cal-task-chip { font-size:10px; padding:2px 6px; border-radius:4px; margin-bottom:2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; transition:opacity .15s; }
.cal-task-chip:hover { opacity:.8; }
.cal-more { font-size:10px; color:var(--text3); padding:2px 4px; cursor:pointer; }
.cal-more:hover { color:var(--text); }

/* ══ DOCS ══ */
.docs-layout { display:flex; flex:1; gap:0; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); }
.docs-sidebar { width:240px; min-width:240px; border-right:1px solid var(--border); background:var(--bg1); display:flex; flex-direction:column; overflow:hidden; }
.docs-sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.docs-sidebar-title { font-size:12px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.6px; }
.docs-add { background:none; border:none; color:var(--text3); cursor:pointer; font-size:18px; transition:color .15s; }
.docs-add:hover { color:var(--acc3); }
.docs-list { flex:1; overflow-y:auto; padding:6px; }
.doc-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; transition:all .15s; }
.doc-item:hover { background:rgba(255,255,255,.04); }
.doc-item.active { background:var(--acc-dim); }
.doc-item-icon { font-size:15px; flex-shrink:0; }
.doc-item-title { font-size:13px; font-weight:500; color:var(--text2); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-item.active .doc-item-title { color:var(--text); }
.doc-item-actions { display:flex; gap:3px; opacity:0; }
.doc-item:hover .doc-item-actions { opacity:1; }
.doc-action { background:none; border:none; color:var(--text3); cursor:pointer; font-size:12px; padding:2px 4px; border-radius:3px; }
.doc-action:hover { color:var(--text); background:rgba(255,255,255,.08); }
.docs-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.doc-viewer { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.doc-viewer-head { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.doc-viewer-icon { font-size:22px; cursor:pointer; }
.doc-viewer-title { font-size:18px; font-weight:700; flex:1; background:none; border:none; color:var(--text); font-family:'Inter',sans-serif; outline:none; }
.doc-viewer-title:focus { border-bottom:2px solid var(--acc); }
.doc-viewer-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.doc-viewer-meta { padding:6px 20px; font-size:11px; color:var(--text3); border-bottom:1px solid var(--border); flex-shrink:0; }
.doc-editor { flex:1; padding:20px; overflow-y:auto; }
.doc-textarea { width:100%; height:100%; background:none; border:none; color:var(--text2); font-size:14px; line-height:1.8; resize:none; outline:none; font-family:'Inter',sans-serif; min-height:400px; }
.doc-textarea::placeholder { color:var(--text3); }
.doc-rendered { font-size:14px; line-height:1.8; color:var(--text2); }
.doc-rendered h1 { font-size:22px; font-weight:800; color:var(--text); margin:20px 0 10px; }
.doc-rendered h2 { font-size:18px; font-weight:700; color:var(--text); margin:16px 0 8px; }
.doc-rendered h3 { font-size:15px; font-weight:700; color:var(--text); margin:12px 0 6px; }
.doc-rendered p { margin:0 0 10px; }
.doc-rendered ul,.doc-rendered ol { margin:0 0 10px; padding-left:24px; }
.doc-rendered li { margin-bottom:4px; }
.doc-rendered code { background:var(--bg3); border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-family:monospace; font-size:13px; color:var(--acc3); }
.doc-rendered pre { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px; overflow-x:auto; margin:10px 0; }
.doc-rendered pre code { background:none; border:none; padding:0; color:var(--text); }
.doc-rendered blockquote { border-left:3px solid var(--acc); padding:8px 16px; background:var(--acc-dim); border-radius:0 var(--r-sm) var(--r-sm) 0; margin:10px 0; color:var(--text2); }
.doc-rendered hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.doc-rendered strong { color:var(--text); font-weight:700; }
.doc-rendered a { color:var(--acc3); text-decoration:none; }
.doc-rendered a:hover { text-decoration:underline; }
.doc-toolbar { display:flex; gap:5px; padding:8px 20px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; }
.doc-tb-btn { background:none; border:1px solid var(--border); color:var(--text2); cursor:pointer; padding:4px 9px; border-radius:var(--r-sm); font-size:12px; font-weight:600; transition:all .15s; }
.doc-tb-btn:hover { background:var(--acc-dim); border-color:var(--acc-border); color:var(--acc3); }
.doc-link-copy { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-sm); background:var(--green-dim); border:1px solid rgba(16,185,129,.2); color:var(--green); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.doc-link-copy:hover { background:rgba(16,185,129,.2); }

/* ══ WORKLOAD ══ */
.workload-grid { display:flex; flex-direction:column; gap:10px; }
.workload-row { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; }
.workload-row-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.workload-ava { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.workload-name { font-size:14px; font-weight:700; flex:1; }
.workload-stats { display:flex; gap:14px; font-size:12px; color:var(--text3); }
.workload-stat { display:flex; align-items:center; gap:5px; }
.workload-stat-val { font-weight:700; color:var(--text2); }
.workload-overdue { color:var(--red)!important; }
.workload-bar-wrap { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.workload-bar { height:100%; border-radius:4px; transition:width .5s; }
.workload-tasks { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.workload-task-chip { font-size:11px; padding:3px 9px; border-radius:20px; background:var(--bg3); border:1px solid var(--border); cursor:pointer; transition:all .15s; white-space:nowrap; }
.workload-task-chip:hover { border-color:var(--acc-border); color:var(--acc3); }
.workload-task-chip.overdue { border-color:rgba(239,68,68,.3); color:var(--red); background:var(--red-dim); }

/* ══ TASK TZ LINK ══ */
.tz-link-row { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:10px; }
.tz-link-url { flex:1; font-size:11px; color:var(--text3); font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ══ RECURRING ══ */
.recurring-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--blue-dim); color:var(--blue); border:1px solid rgba(59,130,246,.2); }

/* ══ DEPENDENCIES ══ */
.dep-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.dep-item { display:flex; align-items:center; gap:8px; padding:8px 11px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); font-size:12px; }
.dep-type { font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; flex-shrink:0; }
.dep-type.blocked { background:var(--red-dim); color:var(--red); }
.dep-type.blocks { background:var(--yellow-dim); color:var(--yellow); }
.dep-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; }
.dep-del:hover { color:var(--red); }

@media(max-width:768px) {
  .docs-layout { flex-direction:column; }
  .docs-sidebar { width:100%; min-width:0; max-height:200px; border-right:none; border-bottom:1px solid var(--border); }
  .cal-cell { min-height:60px; padding:4px; }
  .cal-task-chip { display:none; }
  .cal-day-num { font-size:11px; }
}

/* ══ CALENDAR VIEW ══ */
.calendar-wrap { flex: 1; overflow-y: auto; }
.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-nav { display: flex; align-items: center; gap: 12px; }
.calendar-nav-btn { background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text2); width: 32px; height: 32px; border-radius: 7px; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.calendar-nav-btn:hover { background: rgba(255,255,255,.1); color: var(--text); }
.calendar-month-title { font-size: 16px; font-weight: 700; min-width: 160px; text-align: center; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border-radius: var(--r); overflow: hidden; }
.calendar-day-header { background: var(--bg1); padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.calendar-day { background: var(--bg2); min-height: 100px; padding: 7px; cursor: pointer; transition: background .15s; vertical-align: top; }
.calendar-day:hover { background: var(--bg3); }
.calendar-day.other-month { background: rgba(0,0,0,.15); opacity: .5; }
.calendar-day.today { background: var(--acc-dim); }
.calendar-day.today .cal-date { color: var(--acc3); font-weight: 800; }
.cal-date { font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text2); }
.cal-tasks { display: flex; flex-direction: column; gap: 2px; }
.cal-task { font-size: 11px; padding: 2px 6px; border-radius: 4px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; font-weight: 500; }
.cal-task:hover { opacity: .85; }
.cal-more { font-size: 10px; color: var(--text3); padding: 2px 6px; cursor: pointer; }
.cal-more:hover { color: var(--acc3); }

/* ══ TABLE/GRID VIEW ══ */
.table-view-wrap { flex: 1; overflow: auto; }
.table-view { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-view th { background: var(--bg1); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); position: sticky; top: 0; white-space: nowrap; cursor: pointer; user-select: none; }
.table-view th:hover { color: var(--text2); background: var(--bg3); }
.table-view th .sort-ico { margin-left: 4px; opacity: .5; }
.table-view td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-view tr:hover td { background: rgba(255,255,255,.02); }
.table-view tr { cursor: pointer; }
.table-cf-val { font-size: 12px; color: var(--text2); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ══ WORKLOAD ══ */
.workload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.workload-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; }
.workload-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.workload-ava { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--acc),var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.workload-name { font-size: 14px; font-weight: 700; }
.workload-role { font-size: 11px; color: var(--text3); }
.workload-stat { font-size: 22px; font-weight: 800; color: var(--acc3); flex-shrink: 0; }
.workload-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.workload-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.workload-bar-fill { height: 100%; border-radius: 4px; transition: width .5s; }
.workload-bar-pct { font-size: 12px; font-weight: 700; min-width: 36px; text-align: right; flex-shrink: 0; }
.workload-tasks { display: flex; flex-direction: column; gap: 5px; }
.workload-task { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); padding: 5px 8px; background: var(--bg1); border-radius: var(--r-sm); cursor: pointer; transition: background .15s; }
.workload-task:hover { background: var(--bg3); color: var(--text); }

/* ══ DOCS ══ */
.docs-layout { flex: 1; display: flex; overflow: hidden; gap: 0; }
.docs-sidebar { width: 240px; min-width: 240px; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; flex-shrink: 0; }
.doc-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; color: var(--text2); border-left: 2px solid transparent; transition: all .15s; }
.doc-sidebar-item:hover { background: rgba(255,255,255,.03); color: var(--text); }
.doc-sidebar-item.active { background: var(--acc-dim); border-left-color: var(--acc); color: var(--text); }
.doc-sidebar-icon { font-size: 15px; flex-shrink: 0; }
.doc-sidebar-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-sidebar-actions { display: flex; gap: 3px; opacity: 0; }
.doc-sidebar-item:hover .doc-sidebar-actions { opacity: 1; }
.doc-sidebar-btn { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; transition: all .15s; }
.doc-sidebar-btn:hover { color: var(--red); background: var(--red-dim); }
.docs-content { flex: 1; overflow-y: auto; padding: 28px 36px; }
.docs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.doc-view { max-width: 780px; margin: 0 auto; }
.doc-view-header { margin-bottom: 24px; border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.doc-view-icon { font-size: 40px; margin-bottom: 10px; cursor: pointer; }
.doc-view-title { font-size: 28px; font-weight: 800; letter-spacing: -.8px; outline: none; border: none; background: none; color: var(--text); width: 100%; font-family: 'Inter',sans-serif; }
.doc-view-meta { font-size: 12px; color: var(--text3); margin-top: 8px; display: flex; align-items: center; gap: 12px; }
.doc-view-actions { display: flex; gap: 8px; margin-top: 12px; }
.doc-editor { width: 100%; min-height: 400px; background: none; border: none; outline: none; color: var(--text2); font-size: 14px; line-height: 1.8; font-family: 'Inter',sans-serif; resize: none; }
.doc-editor:focus { color: var(--text); }
.doc-toolbar { display: flex; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.doc-tool-btn { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text2); padding: 4px 8px; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s; }
.doc-tool-btn:hover { background: var(--acc-dim); color: var(--acc3); border-color: var(--acc-border); }
.doc-rendered { min-height: 400px; font-size: 14px; line-height: 1.8; color: var(--text2); }
.doc-rendered h1 { font-size: 24px; font-weight: 800; margin: 20px 0 12px; color: var(--text); }
.doc-rendered h2 { font-size: 19px; font-weight: 700; margin: 16px 0 8px; color: var(--text); }
.doc-rendered h3 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; color: var(--text); }
.doc-rendered p { margin-bottom: 12px; }
.doc-rendered ul,.doc-rendered ol { padding-left: 24px; margin-bottom: 12px; }
.doc-rendered li { margin-bottom: 4px; }
.doc-rendered code { background: var(--bg3); padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 13px; color: var(--acc3); }
.doc-rendered pre { background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; margin-bottom: 14px; overflow-x: auto; }
.doc-rendered pre code { background: none; padding: 0; color: var(--text2); }
.doc-rendered blockquote { border-left: 3px solid var(--acc); padding-left: 14px; color: var(--text3); font-style: italic; margin-bottom: 12px; }
.doc-rendered strong { color: var(--text); font-weight: 700; }
.doc-rendered a { color: var(--acc3); text-decoration: underline; }
.doc-rendered hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.doc-rendered table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.doc-rendered th { background: var(--bg1); padding: 8px 12px; text-align: left; font-weight: 700; border-bottom: 2px solid var(--border); }
.doc-rendered td { padding: 8px 12px; border-bottom: 1px solid var(--border); }

/* ══ SEARCH PAGE ══ */
.search-page-wrap { flex: 1; overflow-y: auto; }
.search-page-input-wrap { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 2px solid var(--border2); border-radius: var(--r-lg); padding: 12px 18px; margin-bottom: 20px; transition: border-color .2s; }
.search-page-input-wrap:focus-within { border-color: var(--acc); }
.search-page-input { flex: 1; background: none; border: none; color: var(--text); font-size: 16px; outline: none; font-family: 'Inter',sans-serif; }
.search-page-input::placeholder { color: var(--text3); }
.search-results { display: flex; flex-direction: column; gap: 6px; }
.search-result { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); cursor: pointer; transition: all .15s; }
.search-result:hover { background: var(--bg3); border-color: var(--border2); transform: translateX(2px); }
.search-result-icon { font-size: 20px; flex-shrink: 0; }
.search-result-body { flex: 1; min-width: 0; }
.search-result-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-sub { font-size: 12px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-type { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.search-result-type.task { background: var(--blue-dim); color: var(--blue); }
.search-result-type.doc { background: var(--green-dim); color: var(--green); }
.search-result-type.member { background: var(--acc-dim); color: var(--acc3); }
.search-empty { text-align: center; padding: 40px; color: var(--text3); font-size: 14px; }

/* ══ DEPENDENCY BADGE ══ */
.dep-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 3px 9px; border-radius: 20px; background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,.2); margin-bottom: 6px; }
.dep-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg1); border-radius: var(--r-sm); border: 1px solid var(--border); margin-bottom: 5px; font-size: 12px; }
.dep-row-title { flex: 1; }
.dep-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; }
.dep-del:hover { color: var(--red); }

/* ══ COPY TZ BUTTON ══ */
.copy-tz-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text3); font-size: 11px; cursor: pointer; transition: all .15s; }
.copy-tz-btn:hover { background: var(--acc-dim); color: var(--acc3); border-color: var(--acc-border); }
.copy-tz-btn.copied { background: var(--green-dim); color: var(--green); border-color: rgba(16,185,129,.2); }

/* ══ RECURRING BADGE ══ */
.recurring-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 7px; border-radius: 20px; background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,.2); }

/* View switcher */
.view-switcher { display: flex; gap: 4px; }
.view-btn { background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--text3); padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; transition: all .15s; }
.view-btn:hover { color: var(--text2); background: rgba(255,255,255,.08); }
.view-btn.active { background: var(--acc-dim); color: var(--acc3); border-color: var(--acc-border); }

@media(max-width:768px){
  .docs-layout { flex-direction: column; }
  .docs-sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--border); max-height: 160px; }
  .docs-content { padding: 16px; }
  .calendar-grid { font-size: 10px; }
  .calendar-day { min-height: 60px; padding: 4px; }
  .workload-grid { grid-template-columns: 1fr; }
}

/* ══ FIX: app layout desktop ══ */
@media(min-width:769px) {
  #app { flex-direction: row !important; }
  #app > .layout { flex: 1; }
}

/* ══ DASHBOARD ══ */
.dash-kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:20px; flex-shrink:0; }
.dash-kpi-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:6px; }
.dash-kpi-icon { font-size:24px; width:44px; height:44px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; }
.dash-kpi-val { font-size:26px; font-weight:900; letter-spacing:-1px; }
.dash-kpi-lbl { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; }
.dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; flex:1; min-height:0; }
.dash-widget { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; overflow:hidden; }
.dash-widget-title { font-size:13px; font-weight:700; margin-bottom:14px; }
.dash-chart-bars { height:90px; display:flex; align-items:flex-end; gap:8px; }
.dash-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.dash-bar { width:100%; border-radius:4px 4px 0 0; background:linear-gradient(180deg,var(--acc2),var(--acc)); min-height:2px; transition:height .5s; }
.dash-bar-lbl { font-size:9px; color:var(--text3); }
.dash-bar-val { font-size:9px; color:var(--text2); font-weight:700; }
.dash-status-list { display:flex; flex-direction:column; gap:10px; }
.dash-status-row { display:flex; align-items:center; gap:10px; font-size:13px; }
.dash-status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dash-status-name { width:70px; flex-shrink:0; color:var(--text2); }
.dash-status-bar-wrap { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.dash-status-bar { height:100%; border-radius:3px; transition:width .6s; }
.dash-status-cnt { width:24px; text-align:right; font-weight:700; font-size:13px; }
.dash-space-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.dash-space-icon { font-size:22px; flex-shrink:0; }
.dash-space-pct { font-size:13px; font-weight:700; color:var(--acc3); width:36px; text-align:right; flex-shrink:0; }
.dash-progress-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.dash-progress-fill { height:100%; border-radius:3px; transition:width .6s; }
.dash-priority-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:4px; }
.dash-priority-card { border:1px solid var(--border); border-radius:var(--r); padding:12px; text-align:center; }
.dash-priority-val { font-size:22px; font-weight:900; }
.dash-priority-lbl { font-size:10px; color:var(--text3); margin-top:3px; }
.dash-deadlines { display:flex; flex-direction:column; gap:7px; margin-top:8px; }
.dash-deadline-row { display:flex; align-items:center; gap:9px; font-size:12px; cursor:pointer; padding:6px; border-radius:6px; transition:background .15s; }
.dash-deadline-row:hover { background:var(--bg3); }
.dash-deadline-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.dash-deadline-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-deadline-date { flex-shrink:0; font-size:11px; }

/* ══ SPRINTS ══ */
.sprint-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; margin-bottom:14px; transition:border-color .2s; }
.sprint-card.active { border-color:var(--acc-border); background:var(--acc-dim); }
.sprint-card-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; gap:12px; flex-wrap:wrap; }
.sprint-name { font-size:16px; font-weight:700; margin-bottom:3px; }
.sprint-dates { font-size:12px; color:var(--text3); }
.sprint-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }
.sprint-badge.active { background:var(--green-dim); color:var(--green); border:1px solid rgba(16,185,129,.2); }
.sprint-badge.overdue { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,.2); }
.sprint-badge.planned { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(59,130,246,.2); }
.sprint-badge.done { background:var(--green-dim); color:var(--green); }
.sprint-progress-track { height:8px; background:var(--border); border-radius:4px; overflow:hidden; }
.sprint-progress-fill { height:100%; background:linear-gradient(90deg,var(--acc),var(--acc2)); border-radius:4px; transition:width .6s; }
.sprint-task-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg1); border-radius:var(--r-sm); border:1px solid var(--border); margin-bottom:7px; cursor:pointer; transition:background .15s; }
.sprint-task-row:hover { background:var(--bg3); }

/* ══ EISENHOWER ══ */
.eisenhower-grid { display:flex; flex-direction:column; height:100%; padding:0 2px; }
.eisenhower-label-x-wrap { display:flex; justify-content:space-around; padding:0 8px; margin-bottom:8px; font-size:12px; font-weight:700; color:var(--text3); flex-shrink:0; }
.eisenhower-quadrants { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; flex:1; min-height:0; }
.eisenhower-q { border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); }
.eisenhower-q.q1 { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.2); }
.eisenhower-q.q2 { background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.2); }
.eisenhower-q.q3 { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.2); }
.eisenhower-q.q4 { background:rgba(107,114,128,.08); border-color:rgba(107,114,128,.2); }
.eisenhower-q-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-shrink:0; }
.eisenhower-q-emoji { font-size:22px; }
.eisenhower-q-title { font-size:13px; font-weight:700; }
.eisenhower-q-sub { font-size:11px; color:var(--text3); }
.eisenhower-q-cnt { margin-left:auto; font-size:18px; font-weight:900; color:var(--text3); }
.eisenhower-tasks { overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:6px; }
.eis-task { padding:8px 12px; background:rgba(255,255,255,.05); border-radius:var(--r-sm); font-size:12px; cursor:pointer; transition:background .15s; border:1px solid var(--border); }
.eis-task:hover { background:rgba(255,255,255,.1); }
.eis-empty { font-size:12px; color:var(--text3); padding:8px; text-align:center; }

/* ══ TEMPLATES ══ */
.templates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; padding:2px; }
.template-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; display:flex; align-items:center; gap:14px; transition:all .2s; }
.template-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.template-icon { font-size:32px; flex-shrink:0; }
.template-info { flex:1; min-width:0; }
.template-name { font-size:14px; font-weight:700; margin-bottom:4px; }
.template-desc { font-size:12px; color:var(--text3); }
.template-actions { display:flex; gap:7px; flex-shrink:0; }

/* ══ INFO — ПЛИТКИ ОТДЕЛОВ ══ */
.dept-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; padding:2px; }
.dept-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; transition:all .2s; cursor:pointer; }
.dept-card:hover { border-color:var(--border2); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.4); }
.dept-card-banner { height:120px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.dept-card-emoji { font-size:52px; z-index:1; }
.dept-card-body { padding:18px; }
.dept-card-title { font-size:16px; font-weight:800; margin-bottom:5px; }
.dept-card-desc { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:14px; }
.dept-card-stats { display:flex; gap:16px; }
.dept-stat { text-align:center; }
.dept-stat-val { font-size:18px; font-weight:800; }
.dept-stat-lbl { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; }
.dept-news-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.dept-news-item { display:flex; gap:10px; align-items:flex-start; }
.dept-news-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; margin-top:5px; }
.dept-news-text { font-size:12px; color:var(--text2); line-height:1.5; }
.dept-news-date { font-size:10px; color:var(--text3); margin-top:2px; }

@media(max-width:768px) {
  .dash-grid { grid-template-columns:1fr; }
  .eisenhower-quadrants { grid-template-columns:1fr; grid-template-rows:auto; }
  .dept-grid { grid-template-columns:1fr; }
  .dash-kpi-row { grid-template-columns:repeat(3,1fr); }
}

/* ══ USER MANAGEMENT ══ */
.user-mgmt-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; transition:all .2s; }
.user-mgmt-card:hover { border-color:var(--border2); }
.user-mgmt-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.user-mgmt-ava { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; }
.user-mgmt-info { flex:1; min-width:0; }
.user-mgmt-name { font-size:14px; font-weight:700; }
.user-mgmt-login { font-size:12px; color:var(--text3); }
.user-mgmt-role { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; flex-shrink:0; }
.user-mgmt-stats { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:14px; }
.user-mgmt-stat { flex:1; padding:10px 8px; text-align:center; border-right:1px solid var(--border); font-size:13px; }
.user-mgmt-stat:last-child { border-right:none; }
.user-mgmt-actions { display:flex; gap:8px; align-items:center; }

/* ══ PORTFOLIO ══ */
.portfolio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; padding:2px; }
.portfolio-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; transition:all .2s; }
.portfolio-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.portfolio-card-header { padding:16px 18px 12px; display:flex; align-items:center; gap:12px; }
.portfolio-card-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.portfolio-card-title { font-size:15px; font-weight:700; flex:1; }
.portfolio-card-cnt { font-size:12px; color:var(--text3); }
.portfolio-progress { margin:0 18px 14px; }
.portfolio-progress-label { display:flex; justify-content:space-between; font-size:11px; color:var(--text3); margin-bottom:5px; }
.portfolio-progress-track { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.portfolio-progress-fill { height:100%; border-radius:3px; transition:width .6s; }
.portfolio-statuses { display:flex; gap:6px; flex-wrap:wrap; padding:0 18px 14px; }
.portfolio-status-chip { font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; }
.portfolio-members { display:flex; padding:12px 18px; border-top:1px solid var(--border); gap:-6px; }
.portfolio-member-ava { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; border:2px solid var(--bg2); margin-left:-6px; flex-shrink:0; }
.portfolio-member-ava:first-child { margin-left:0; }
.portfolio-budget { margin-left:auto; font-size:13px; font-weight:700; color:var(--green); }

/* ══ CSV IMPORT ══ */
.import-zone { border:2px dashed var(--border2); border-radius:var(--r-lg); padding:32px; text-align:center; cursor:pointer; transition:all .2s; }
.import-zone:hover, .import-zone.drag { border-color:var(--acc); background:var(--acc-dim); }
.import-preview { margin-top:16px; overflow-x:auto; }
.import-table { width:100%; border-collapse:collapse; font-size:12px; }
.import-table th { background:var(--bg1); padding:8px 12px; text-align:left; border-bottom:1px solid var(--border); font-weight:700; color:var(--text3); }
.import-table td { padding:8px 12px; border-bottom:1px solid var(--border); }
.import-table tr:last-child td { border-bottom:none; }

/* ══ MENTION ══ */
.mention { color:var(--acc3); font-weight:600; cursor:pointer; }
.mention:hover { text-decoration:underline; }
.mention-dropdown { position:absolute; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r); box-shadow:var(--shadow); z-index:100; min-width:200px; overflow:hidden; }
.mention-item { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .15s; font-size:13px; }
.mention-item:hover { background:var(--acc-dim); }
.mention-ava { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--blue)); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; flex-shrink:0; }

/* ══ WEBHOOK ══ */
.webhook-row { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--bg1); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:8px; }
.webhook-url { flex:1; font-size:12px; font-family:monospace; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.webhook-events { font-size:11px; color:var(--text3); flex-shrink:0; }

/* ── LIQUID GLASS OVERLAY ── */
body { background: radial-gradient(ellipse at 20% 20%, rgba(124,58,237,0.1) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(59,130,246,0.07) 0%, transparent 55%), var(--bg0); }

/* VHS scanlines */
html::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.01) 3px,rgba(0,0,0,0.01) 4px); pointer-events:none; z-index:99999; }

.sidebar { backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); background:rgba(10,8,22,0.75) !important; }



.task-card, .kcard { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:rgba(22,20,40,0.6) !important; transition:all 0.2s !important; }
.task-card:hover, .kcard:hover {  box-shadow:0 10px 30px rgba(0,0,0,0.4) !important; border-color:rgba(124,58,237,0.3) !important; }

.hbtn.primary { box-shadow:0 4px 20px rgba(124,58,237,0.4) !important; }
.hbtn.primary:hover { transform:translateY(-1px) !important; box-shadow:0 6px 28px rgba(124,58,237,0.55) !important; }

.minput, .mselect, .mtextarea { backdrop-filter:blur(8px); background:rgba(255,255,255,0.04) !important; transition:border-color 0.2s, box-shadow 0.2s !important; }
.minput:focus, .mselect:focus, .mtextarea:focus { border-color:rgba(124,58,237,0.5) !important; box-shadow:0 0 0 3px rgba(124,58,237,0.1) !important; }

.modal-overlay { backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; }
.sheet-content, .modal-content { backdrop-filter:blur(24px) saturate(180%) !important; -webkit-backdrop-filter:blur(24px) saturate(180%) !important; background:rgba(14,12,26,0.95) !important; box-shadow:0 -8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important; }

.snav-item.active { box-shadow:inset 0 1px 0 rgba(255,255,255,0.05) !important; }

.page-header { backdrop-filter:blur(12px); background:rgba(8,7,15,0.5) !important; margin-bottom:0 !important; padding-bottom:16px !important; }

/* ── GLASS + VHS OVERRIDE ── */
:root {
  --bg0: #08070f;
  --bg1: #0d0c1a;
  --bg2: rgba(255,255,255,0.04);
  --bg3: rgba(255,255,255,0.07);
  --bg4: rgba(255,255,255,0.1);
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
}

html::after {
  content:'';
  position:fixed;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.015) 2px,rgba(0,0,0,0.015) 3px);
  pointer-events:none;
  z-index:0;
}

body {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(124,58,237,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(59,130,246,0.08) 0%, transparent 50%),
    #08070f !important;
}

.sidebar {
  background: rgba(8,7,18,0.8) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}

.task-card {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  
}

.task-card:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(124,58,237,0.35) !important;
  
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,58,237,0.15) !important;
}

.board-col {
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
}

.board-col-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.filters-bar {
  background: rgba(8,7,18,0.6) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding: 8px 16px !important;
  flex-shrink: 0 !important;
}

.page-header {
  background: rgba(8,7,18,0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.auth-card {
  background: rgba(14,12,26,0.9) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.board-wrap {
  flex: 1 !important;
  overflow-x: auto !important;
  padding: 16px !important;
}

.board-cols {
  display: flex !important;
  gap: 14px !important;
  height: 100% !important;
  min-width: min-content !important;
}

.modal-overlay {
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.sheet-content {
  background: rgba(10,8,22,0.96) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.hbtn.primary {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4) !important;
}

.hbtn.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(124,58,237,0.55) !important;
}

.snav-item.active {
  background: rgba(124,58,237,0.15) !important;
  border-left-color: var(--acc) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.stat-card {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 12px !important;
}

.minput, .mselect, .mtextarea, .hselect, .search-inp {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  backdrop-filter: blur(8px) !important;
}

.minput:focus, .mselect:focus, .mtextarea:focus, .hselect:focus, .search-inp:focus {
  border-color: rgba(124,58,237,0.5) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important;
  outline: none !important;
}

/* ── MEDIA THUMBS BIGGER ── */
.tc-media { display: flex !important; gap: 6px !important; margin-bottom: 10px !important; flex-wrap: wrap !important; }
.tc-media-thumb { width: 72px !important; height: 72px !important; border-radius: 10px !important; object-fit: cover !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.tc-media-video, .tc-media-doc, .tc-media-more { width: 72px !important; height: 72px !important; border-radius: 10px !important; }

/* ── HIDE GLOBAL SEARCH ── */
#globalSearchWrap { display: none !important; }

/* ── KANBAN FULL WIDTH ── */
.board-wrap { padding: 12px 16px !important; }
.board-cols { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 12px !important; height: 100% !important; width: 100% !important; }
.board-col { min-width: unset !important; width: 100% !important; }

/* ── PRIORITY CARD COLORS ── */
.task-card[data-priority="HIGH"], .task-card.HIGH { border-left: 3px solid var(--red) !important; background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(255,255,255,0.03) 100%) !important; }
.task-card[data-priority="MEDIUM"], .task-card.MEDIUM { border-left: 3px solid var(--yellow) !important; background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(255,255,255,0.03) 100%) !important; }
.task-card[data-priority="LOW"], .task-card.LOW { border-left: 3px solid var(--green) !important; background: linear-gradient(135deg, rgba(16,185,129,0.06) 0%, rgba(255,255,255,0.03) 100%) !important; }

/* Убираем бейдж на кнопке + Задача */
#btnNewTask .notif-badge, #btnNewTask sup, #btnNewTask .badge { display: none !important; }

/* Скрыть list view кнопки */
#btnList, #btnBoard { display: none !important; }

/* Скрыть page-tag Канбан */
#crmSpaceTag { display: none !important; }

/* Скрыть page-sub */
#crmSub { display: none !important; }


/* ── BOARD LAYOUT ── */
#boardView { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
#boardCols { display: flex; flex: 1; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 16px; min-height: 0; align-items: stretch; }
.board-col { display: flex; flex-direction: column; flex: 1; min-width: 220px; min-height: 400px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; }
.col-head { padding: 12px 14px; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.col-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px; min-height: 0; }

/* ── TASK CARDS ── */
.task-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 12px 13px 12px 16px; border-radius: 10px; cursor: pointer;  position: relative; margin-bottom: 8px; user-select: none; }
.task-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(124,58,237,0.3);  box-shadow: 0 6px 20px rgba(0,0,0,.3); }

.task-card.HIGH { border-left: 3px solid var(--red); }
.task-card.MEDIUM { border-left: 3px solid var(--yellow); }
.task-card.LOW { border-left: 3px solid var(--green); }

/* ── TIMERS ── */
.tc-timers { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tc-timer { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; line-height: 1; }
.tc-timer.work { background: rgba(59,130,246,0.15); color: #60a5fa; border: 1px solid rgba(59,130,246,0.25); }
.tc-timer.review { background: rgba(245,158,11,0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.25); }

/* ── MEDIA THUMBS ── */
.tc-media { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tc-media-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; border: none; }
.tc-media-video, .tc-media-doc, .tc-media-more { width: 64px; height: 64px; border-radius: 8px; border: none; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ── SCROLL FIX FINAL ── */
.col-body * { pointer-events: auto; }
.board-col, .col-body { -webkit-user-select: none; user-select: none; }
.task-card { -webkit-user-select: none; user-select: none; cursor: grab; }


/* ── SCROLL FOCUS FIX ── */
.col-body:focus { outline: none; }
.col-body { outline: none; }

/* ── GLASS PURPLE CARDS ── */
.task-card {
  background: rgba(60,30,120,0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(124,58,237,0.2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

.task-card:hover {
  background: rgba(80,40,160,0.35) !important;
  border-color: rgba(124,58,237,0.45) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,58,237,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.task-card.HIGH { background: rgba(80,20,80,0.3) !important; }

.task-card.LOW { background: rgba(20,60,80,0.3) !important; }

.board-col {
  background: rgba(30,15,60,0.4) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(124,58,237,0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.col-head {
  background: rgba(124,58,237,0.1) !important;
  border-bottom: 1px solid rgba(124,58,237,0.15) !important;
}

.sidebar {
  background: rgba(8,4,20,0.85) !important;
  border-right: 1px solid rgba(124,58,237,0.15) !important;
}

.page-header {
  background: rgba(10,5,25,0.8) !important;
  border-bottom: 1px solid rgba(124,58,237,0.12) !important;
}

.filters-bar {
  background: rgba(10,5,25,0.7) !important;
  border-bottom: 1px solid rgba(124,58,237,0.1) !important;
}

/* ── DARK PURPLE CARDS ── */
.task-card {
  background: linear-gradient(135deg, rgba(45,15,90,0.9) 0%, rgba(30,10,60,0.95) 100%) !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.task-card:hover {
  background: linear-gradient(135deg, rgba(65,25,120,0.95) 0%, rgba(45,15,90,0.98) 100%) !important;
  border-color: rgba(167,139,250,0.4) !important;
  box-shadow: 0 8px 32px rgba(124,58,237,0.3), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── HIDE TASK ID ── */
.tc-id { display: none !important; }

/* ── FIX CARD PADDING AFTER HIDING ID ── */
.tc-top { display: none !important; }
.task-card { padding: 12px 14px !important; }
.tc-title { margin-bottom: 8px !important; margin-top: 0 !important; }

/* ── TASK DATE ── */
.tc-date { font-size: 10px; color: var(--text3); margin-bottom: 4px; }

/* ── NO HIGHLIGHT ON DRAG ── */


/* ── DATE TOP RIGHT ── */
.tc-date { display: none !important; }
.tc-date-top { position: absolute; top: 10px; right: 12px; font-size: 10px; color: var(--text3); }

/* ── PAGE HEADER PADDING ── */
.page-header { padding-left: 24px !important; }
#crmTitle { padding-left: 8px !important; }

/* ── TITLE ALIGN ── */
.page-header { padding: 0 24px !important; align-items: center !important; min-height: 56px !important; }
#crmTitle { font-size: 20px !important; padding-left: 0 !important; }
.filters-bar { padding: 10px 24px !important; }

/* ── NEW TASK MODAL ── */
.modal-content { background: rgba(12,6,30,0.97) !important; backdrop-filter: blur(30px) !important; }
.modal-desc { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 20px; white-space: pre-wrap; }
.modal-media-section { margin-top: 16px; }
.upload-zone { padding: 16px !important; }
.upload-zone-icon { font-size: 20px !important; }

/* ── SUBTASKS TWITTER STYLE ── */
.subtask-thread { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; position: relative; min-height: 32px; }
.subtask-line { width: 20px; display: flex; flex-direction: column; align-items: center; }
.thread-line { position: absolute; top: 24px; left: 9px; width: 2px; height: calc(100% + 8px); background: rgba(124,58,237,0.25); }
.subtask-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(124,58,237,0.5); flex-shrink: 0; margin-top: 4px; cursor: pointer; transition: all 0.2s; }
.subtask-dot.done { background: var(--acc); border-color: var(--acc); }
.subtask-text { font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.5; padding-top: 2px; }
.subtask-text.done { text-decoration: line-through; color: var(--text3); }
.modal-add-subtask { margin: 12px 0 16px; }

/* ── TASK MODAL SOLID BG ── */
.modal-overlay { background: rgba(0,0,0,0.85) !important; }
.modal-content { background: #0e0820 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(124,58,237,0.3) !important; }
.modal-body { background: #0e0820 !important; }
.modal-main { background: #0e0820 !important; }
.modal-side { background: #120a28 !important; }

/* ── FIX MODAL CONTENT ── */
.modal-desc { white-space: pre-wrap !important; word-break: break-word !important; overflow-wrap: break-word !important; }
.modal-main { overflow-y: auto !important; overflow-x: hidden !important; padding: 20px !important; }
.modal-media-section img, .media-grid img { max-width: 100% !important; height: auto !important; }
.media-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.media-item { max-width: 200px !important; }

/* ── BIGGER TASK MODAL ── */
.modal-content { max-width: 900px !important; width: 95vw !important; max-height: 90vh !important; }
.modal-body { min-height: 500px !important; }
.modal-main { min-width: 0 !important; flex: 1.5 !important; }
.modal-side { min-width: 220px !important; width: 220px !important; flex-shrink: 0 !important; }

/* ── MODAL SIZE FIX ── */
.modal { width: 960px !important; max-width: 96vw !important; }
.modal-body { display: flex !important; flex: 1 !important; overflow: hidden !important; min-height: 500px !important; }
.modal-main { flex: 1 !important; overflow-y: auto !important; padding: 20px !important; min-width: 0 !important; }
.modal-side { width: 240px !important; min-width: 240px !important; overflow-y: auto !important; padding: 16px !important; background: rgba(0,0,0,0.2) !important; border-left: 1px solid rgba(124,58,237,0.15) !important; }

/* ── TASK MODAL SCROLL + MEDIA ── */
.modal-main { overflow-y: auto !important; overflow-x: hidden !important; }
.modal-body { overflow: hidden !important; }
.media-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 10px !important; margin-top: 12px !important; }
.media-item { border-radius: 10px !important; overflow: hidden !important; aspect-ratio: unset !important; height: auto !important; max-height: 400px !important; }
.media-item img, .media-item video { width: 100% !important; height: auto !important; max-height: 400px !important; object-fit: contain !important; border-radius: 10px !important; background: #000 !important; }

/* ── NO MEDIA BORDERS ── */
.media-item { border: none !important; box-shadow: none !important; }
.media-item img, .media-item video { border: none !important; }
.tc-media-thumb { border: none !important; box-shadow: none !important; }

/* ── MODAL SIDE PROPS ── */
.modal-prop { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px; }
.modal-prop .prop-k { color: var(--text3); }
.modal-prop .prop-v { font-weight: 600; color: var(--text); text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.modal-side-divider { height: 1px; background: rgba(255,255,255,0.07); margin: 12px 0; }

/* ── SMOOTH PRIMARY BUTTON ── */
.hbtn.primary {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  border: none !important;
  outline: none !important;
  box-shadow: 0 4px 20px rgba(124,58,237,0.4) !important;
}
.hbtn.primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
  box-shadow: 0 6px 28px rgba(124,58,237,0.5) !important;
  transform: translateY(-1px) !important;
}
.hbtn.primary:focus { outline: none !important; box-shadow: 0 4px 20px rgba(124,58,237,0.4) !important; }

/* ── PRIMARY BTN NO BORDER ── */
.hbtn.primary, .hbtn.primary:focus, .hbtn.primary:active, .hbtn.primary:hover { border: none !important; outline: none !important; }
.auth-btn { border: none !important; outline: none !important; }
button:focus { outline: none !important; }

/* ── NO GLOW ON HOVER ── */
.hbtn.primary:hover { transform: none !important; box-shadow: none !important; background: linear-gradient(135deg,#7c3aed,#9333ea) !important; }

/* ── PRIMARY BTN FINAL ── */
.hbtn.primary { background: linear-gradient(135deg,#5b21b6,#6d28d9) !important; box-shadow: none !important; border: none !important; transition: transform 0.15s, box-shadow 0.15s !important; }
.hbtn.primary:hover { transform: scale(1.02) !important; box-shadow: 0 4px 16px rgba(124,58,237,0.3) !important; }


/* ── FIX COL SHADOW ── */
.board-col { box-shadow: none !important; overflow: visible !important; }

/* ── MOTIVATION TABS ── */
.mot-tab { padding:10px 20px; border:none; background:none; color:var(--text3); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s; }
.mot-tab.active { color:var(--acc2); border-bottom-color:var(--acc2); }

/* Убираем стрелки у number inputs */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }








/* ── DRAG & DROP ── */
.task-card.drag-source {
  opacity: 0.1 !important;
  pointer-events: none;
}
.task-card {
  
}
.col-body.drag-over {
  background: rgba(124,58,237,0.05) !important;
}
.task-card.drop-landed {
  animation: landBounce .35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes landBounce {
  0%   { transform: scale(0.93); }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}










/* ── DRAG ── */
.task-card { transition: margin-top .15s ease-out !important; }
.task-card.drag-source { display: none !important; }
.col-body.drag-over { background: rgba(124,58,237,0.06) !important; }
.task-card.drop-landed { animation: landBounce .35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes landBounce { 0%{transform:scale(0.93)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }

/* Фикс полоски при hover */
.task-card:hover .tc-bar {
  height: 100% !important;
  
}
.task-card:hover [style*="right:0"][style*="position:absolute"] {
  height: 100% !important;
  
}

/* Фикс tc-bar при hover */
.tc-bar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 100% !important;
  transform: none !important;
  transition: none !important;
}

/* Фикс stacking context для tc-bar */

.task-card:hover {  }

/* ── TC-BAR FINAL FIX ── */
.task-card { overflow: visible !important; isolation: auto !important; }
.tc-bar {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 3px !important; height: 100% !important;
  transform: none !important; transition: none !important;
  z-index: 1 !important;
}
.task-card:hover { transform: none !important; }
.task-card:hover .tc-bar { width: 3px !important; height: 100% !important; transform: none !important; }

/* ── TC-BAR ABSOLUTE FIX ── */
.task-card { isolation: auto !important; overflow: visible !important; }
.board-col { overflow: hidden !important; }
.tc-bar {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 3px !important; height: 100% !important;
  transform: none !important; transition: none !important;
  z-index: 2 !important; pointer-events: none !important;
}
.task-card:hover { transform: none !important; }
.task-card:hover .tc-bar { width: 3px !important; height: 100% !important; }

/* ── TC-BAR HOVER FINAL FIX ── */
.task-card { overflow: visible !important; isolation: auto !important; }
.task-card:hover { overflow: visible !important; isolation: auto !important; }
.tc-bar {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 3px !important; height: 100% !important;
  border-radius: 10px 0 0 10px !important;
  transform: none !important; transition: none !important;
  z-index: 10 !important; pointer-events: none !important;
  display: block !important; opacity: 1 !important;
}
.tc-bar.HIGH { background: var(--red) !important; }
.tc-bar.MEDIUM { background: var(--yellow) !important; }
.tc-bar.LOW { background: var(--green) !important; }
.task-card:hover .tc-bar {
  width: 3px !important; height: 100% !important;
  transform: none !important; opacity: 1 !important;
}

/* ── TC-BAR CLIP FIX ── */
.task-card { overflow: visible !important; }
.task-card:hover { overflow: visible !important; }
.tc-bar {
  position: absolute !important;
  top: 0 !important;
  left: -1px !important;
  width: 4px !important;
  height: 100% !important;
  border-radius: 4px 0 0 4px !important;
  transform: none !important;
  transition: none !important;
  z-index: 10 !important;
}

/* ── DEBUG TC-BAR ── */
.task-card .tc-bar {
  outline: 2px solid red !important;
}

/* ── УБИРАЕМ DEBUG ── */
.task-card .tc-bar { outline: none !important; }

/* ── BORDER-LEFT HOVER FIX ── */
.task-card.HIGH { border-left: 3px solid var(--red) !important; }
.task-card.MEDIUM { border-left: 3px solid var(--yellow) !important; }
.task-card.LOW { border-left: 3px solid var(--green) !important; }
.task-card.HIGH:hover { border-left: 3px solid var(--red) !important; }
.task-card.MEDIUM:hover { border-left: 3px solid var(--yellow) !important; }
.task-card.LOW:hover { border-left: 3px solid var(--green) !important; }