*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:#111827;color:#f3f4f6;height:100vh;overflow:hidden;display:flex;flex-direction:column}

/* ── @-mention highlights ─────────────────────────────────────── */
/* Tasks where the current user is mentioned get a glowing left border */
.cl-item.cl-mention-me{
  border-left:3px solid #a78bfa !important;
  background:linear-gradient(90deg,rgba(167,139,250,.10),rgba(167,139,250,0) 70%);
  box-shadow:0 0 0 1px rgba(167,139,250,.18),0 4px 18px rgba(167,139,250,.10);
  padding-left:5px;
}
html.light-mode .cl-item.cl-mention-me{
  background:linear-gradient(90deg,rgba(124,58,237,.10),rgba(124,58,237,0) 70%);
  box-shadow:0 0 0 1px rgba(124,58,237,.22),0 4px 16px rgba(124,58,237,.08);
}
/* Hover / focus state in the mention autocomplete dropdown */
#_orbit-mention-dd ._om-row:hover{background:rgba(124,58,237,.22)!important}
html.light-mode #_orbit-mention-dd ._om-row:hover{background:rgba(124,58,237,.14)!important}

/* @-mention chip — pill shown inside the rendered task text */
.cl-tag{
  display:inline-block;
  background:rgba(124,58,237,.22);
  color:#c4b5fd;
  border:1px solid rgba(124,58,237,.4);
  border-radius:10px;
  padding:0 7px;
  font-size:11px;
  font-weight:700;
  margin:0 1px;
  letter-spacing:.02em;
  vertical-align:1px;
  line-height:1.5;
}
html.light-mode .cl-tag{
  background:rgba(124,58,237,.13);
  color:#6d28d9;
  border-color:rgba(124,58,237,.35);
}
/* The task text view ↔ textarea swap — view shown by default, textarea
   takes over when .editing is on the row. !important so any inline style
   on the textarea (which would otherwise win specificity) can't override. */
.cl-item .cl-item-text-view{display:block !important}
.cl-item .cl-item-text{display:none !important}
.cl-item.editing .cl-item-text-view{display:none !important}
.cl-item.editing .cl-item-text{display:block !important}
/* Visual cue when the user is editing a task — subtle indigo box around
   the textarea so it's obvious you're in a text field. */
.cl-item.editing .cl-item-text{
  background:rgba(99,102,241,.10) !important;
  border:1px solid rgba(99,102,241,.45) !important;
  border-radius:6px !important;
  padding:5px 9px !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.10);
}
.cl-item.editing .cl-item-text:focus{
  border-color:#818cf8 !important;
  background:rgba(99,102,241,.14) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
html.light-mode .cl-item.editing .cl-item-text{
  background:rgba(99,102,241,.06) !important;
  border-color:rgba(99,102,241,.4) !important;
}
html.light-mode .cl-item.editing .cl-item-text:focus{
  background:rgba(99,102,241,.10) !important;
  border-color:#6366f1 !important;
}
:root{
  --bg:#111827;--bg2:#1f2937;--bg3:#374151;
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --text:#f3f4f6;--text2:#9ca3af;--text3:#6b7280;--r:10px;
}
/* ── LIGHT MODE — Professional soft greys, Adorn aesthetic ── */
html.light-mode{
  --bg:#e4e7ef;--bg2:#f1f3f8;--bg3:#dde0e8;
  --gantt-hdr-bg:#dde0e8;
  --filter-bar-bg:#dde0e8;
  --col-header-bg:#dde0e8;
  --border:rgba(0,0,0,.11);--border2:rgba(0,0,0,.17);
  --text:#1a1a2e;--text2:#4b5563;--text3:#6b7280;
  --teal:#0d9488;--p:#0d9488;
}

/* ── Timeline modal: zebra-striped rows for easier reading. Works in both
   themes — values are tuned per theme so the contrast is subtle but
   visible. .ctl-row is the base (lighter band), .ctl-row-alt is the
   medium-grey band, .ctl-row-phase is the heavier accent for phase
   header rows so they stand out from their tasks. */
.ctl-row{background:rgba(255,255,255,.018)}
.ctl-row-alt{background:rgba(255,255,255,.045)}
.ctl-row-phase{background:rgba(255,255,255,.075)}
html.light-mode .ctl-row{background:rgba(0,0,0,.025)}
html.light-mode .ctl-row-alt{background:rgba(0,0,0,.055)}
html.light-mode .ctl-row-phase{background:rgba(0,0,0,.085)}
html.light-mode body{background:var(--bg);color:var(--text);}
html.light-mode .topbar{background:#fafbfd;border-bottom-color:rgba(0,0,0,.1);box-shadow:0 1px 6px rgba(0,0,0,.06);}
html.light-mode .col{background:#e9ecf3;border-color:rgba(0,0,0,.1);}
html.light-mode .col-head{border-bottom-color:rgba(0,0,0,.08);}
html.light-mode .card{background:#fafbfd;border-color:rgba(0,0,0,.08);}
html.light-mode .card:hover{border-color:rgba(13,148,136,.35);box-shadow:0 4px 16px rgba(0,0,0,.08);}
html.light-mode .btn.bp{background:#0d9488;color:#fff;}
html.light-mode .btn.bs{background:rgba(0,0,0,.06);color:var(--text2);border-color:rgba(0,0,0,.1);}
html.light-mode .modal,.light-mode .movl .modal{background:#fafbfd;border-color:rgba(0,0,0,.12);}
html.light-mode .mhdr{border-bottom-color:rgba(0,0,0,.08);}
html.light-mode .mftr{border-top-color:rgba(0,0,0,.08);}
html.light-mode .fi{background:#f9f9fb;border-color:rgba(0,0,0,.14);color:var(--text);}
html.light-mode .fi:focus{border-color:#0d9488;background:#fff;}
html.light-mode .snav,.light-mode .sidebar{background:#1a1a2e;}
html.light-mode .tb-icon-btn{color:#4b5563;}
html.light-mode .tb-icon-btn:hover{background:rgba(0,0,0,.06);}
html.light-mode .cl-section{background:#f9f9fb;border-color:rgba(0,0,0,.07);}
html.light-mode .cl-item{background:#ffffff;border-color:rgba(0,0,0,.07);}
html.light-mode .act-panel{background:#f9f9fb;border-color:rgba(0,0,0,.07);}
html.light-mode .comment-input{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:var(--text);}
html.light-mode .board-tab{color:var(--text2);}
html.light-mode .board-tab.active{color:var(--teal);}
html.light-mode .labels-panel{background:#fff;border-color:rgba(0,0,0,.12);}
html.light-mode .label-row{border-bottom-color:rgba(0,0,0,.06);}
html.light-mode .right-panel{background:#ffffff;border-left-color:rgba(0,0,0,.08);}
html.light-mode .rp-tab{color:var(--text3);}
html.light-mode .rp-tab.active{color:var(--teal);}
/* Light mode: fix hardcoded white text */
html.light-mode .tb-appname{color:var(--text);}
html.light-mode .mhd-info h2{color:var(--text);}
html.light-mode .card-title{color:var(--text);}
html.light-mode .labels-panel-title{color:var(--text);}
html.light-mode .pm-sb-title{color:var(--text);}
html.light-mode .col-head-title{color:var(--text);}
html.light-mode .col-count{color:var(--text2);}
html.light-mode .card-desc{color:var(--text2);}
html.light-mode .card-meta{color:var(--text3);}
html.light-mode .rp-section-title{color:var(--text);}
html.light-mode .cl-item-text{color:var(--text);}
html.light-mode .act-item{color:var(--text2);}
html.light-mode .board-tab{color:var(--text2) !important;}
html.light-mode .board-tab.active{color:var(--teal) !important; font-weight:700;}
html.light-mode .mc-desc-editor{color:var(--text);}
html.light-mode .mc-desc-editor b,html.light-mode .mc-desc-editor strong{color:var(--text);}
html.light-mode .desc-fs-editor b,html.light-mode .desc-fs-editor strong{color:var(--text);}
html.light-mode .fi-label{color:var(--text2);}
html.light-mode .mhdr .mi{color:var(--text2);}
html.light-mode .tag{background:rgba(0,0,0,.07);color:var(--text2);}
html.light-mode .checklist-name{color:var(--text);}
html.light-mode .cl-item-text span{color:var(--text2);}
html.light-mode .pm-sidebar{background:#1e293b;}
html.light-mode .notif-panel{background:#fff;border-color:rgba(0,0,0,.12);}
html.light-mode .notif-item{border-bottom-color:rgba(0,0,0,.06);}
html.light-mode .notif-title{color:var(--text);}
html.light-mode .notif-msg{color:var(--text2);}
html.light-mode .settings-section h3{color:var(--text);}
html.light-mode .settings-section p{color:var(--text2);}
html.light-mode select.fi option{background:#fff;color:var(--text);}

/* ── LIGHT MODE: Topbar & Filter bar ── */
html.light-mode .topbar{background:#ffffff;color:var(--text);}
html.light-mode .tb-appname{color:var(--text);}
html.light-mode .member-sidebar{background:#f0f0f5;border-right-color:rgba(0,0,0,.1);}
html.light-mode .member-sidebar .btn{color:var(--text2);}

/* ── LIGHT MODE: Board tabs ── */
html.light-mode .board-tabs{background:#f5f5f8;}
html.light-mode .board-tab{color:var(--text2) !important;background:transparent;}
html.light-mode .board-tab:hover{background:rgba(0,0,0,.06) !important;color:var(--text) !important;}
html.light-mode .board-tab.active{background:#fff !important;color:var(--teal) !important;box-shadow:0 1px 4px rgba(0,0,0,.1);}

/* ── LIGHT MODE: Column headers ── */
html.light-mode .col-head{background:#e8e8f0;}
html.light-mode .col-head-title{color:var(--text) !important;}
html.light-mode .col-count{color:var(--text2) !important;}
html.light-mode .col-add-btn{color:var(--text3);}

/* ── LIGHT MODE: Cards ── */
html.light-mode .card-title{color:var(--text) !important;}
html.light-mode .card-desc{color:var(--text2) !important;}
html.light-mode .card-meta{color:var(--text3) !important;}
html.light-mode .card-label{opacity:.9;}

/* ── LIGHT MODE: PM Sidebar (slide-in menu) ── */
html.light-mode .pm-sidebar{background:#fafbfd;border-right-color:rgba(0,0,0,.1);box-shadow:4px 0 24px rgba(0,0,0,.12);}
html.light-mode .pm-sb-head{border-bottom-color:rgba(0,0,0,.08);}
html.light-mode .pm-sb-title{color:var(--text) !important;}
html.light-mode .pm-sb-close{color:var(--text3);}
html.light-mode .pm-sb-close:hover{background:rgba(0,0,0,.06);color:var(--text);}
html.light-mode .pm-sb-section{color:var(--text3);}
html.light-mode .pm-sb-item{color:var(--text2);}
html.light-mode .pm-sb-item:hover{background:rgba(0,0,0,.05);color:var(--text);}
html.light-mode .pm-sb-item.active{background:rgba(249,115,22,.1);color:#ea6d00;}
html.light-mode .pm-sb-foot{border-top-color:rgba(0,0,0,.08);}
html.light-mode .pm-sb-username{color:var(--text);}
html.light-mode .pm-sidebar-overlay{background:rgba(0,0,0,.3);}

/* ── LIGHT MODE: Gantt / Timeline ── */
html.light-mode .gantt-wrap{background:var(--bg);}
html.light-mode .gantt-header-row{background:#e8e8f0 !important;border-bottom-color:rgba(0,0,0,.1);}
html.light-mode .gantt-month-label{color:var(--text2);border-right-color:rgba(0,0,0,.08);}
html.light-mode .gantt-row{border-bottom-color:rgba(0,0,0,.06);}
html.light-mode .gantt-label{color:var(--text);}
html.light-mode .gantt-label:hover{color:var(--teal);}
html.light-mode .gantt-timeline{background:transparent;}

/* ── LIGHT MODE: Card Timeline modal (CTL) ── */
html.light-mode #ctl-modal-inner{background:#fafbfd;}
html.light-mode #ctl-modal-inner > div:first-child{background:#e9ecf3 !important;border-bottom-color:rgba(0,0,0,.1);}
html.light-mode #ctl-title{color:var(--text) !important;}
html.light-mode #ctl-sub{color:var(--text3) !important;}
html.light-mode #ctl-body{background:#fafbfd;color:var(--text);}
html.light-mode #ctl-body *{color:inherit;}

/* ── LIGHT MODE: Calendar ── */
html.light-mode .cal-dh{background:#e8e8f0;color:var(--text2);}
html.light-mode .cal-cell{background:#fafbfd;}
html.light-mode .cal-cell:hover{background:#eef0f5;}
html.light-mode .cal-cell.today{background:rgba(13,148,136,.06);}
html.light-mode .cal-day-num{color:var(--text2);}
html.light-mode .cal-wrap{background:var(--bg);}

/* ── LIGHT MODE: Filter panel ── */
html.light-mode .filter-panel{background:#fafbfd;border-color:rgba(0,0,0,.12);box-shadow:0 8px 32px rgba(0,0,0,.12);}
html.light-mode .filter-panel *{color:var(--text);}

/* ── LIGHT MODE: Settings sidebar ── */
html.light-mode .settings-sidebar{background:#e9ecf3;border-right-color:rgba(0,0,0,.08);}
html.light-mode .settings-section{background:var(--bg2);}

/* ── LIGHT MODE: Auto-rule panel ── */
html.light-mode .auto-panel{background:#fafbfd;border-left-color:rgba(0,0,0,.1);box-shadow:-4px 0 24px rgba(0,0,0,.1);}

/* ── LIGHT MODE: Notification panel ── */
html.light-mode #pm-notif-panel{background:#fafbfd !important;border-color:rgba(0,0,0,.1) !important;}

/* ── LIGHT MODE: App switcher ── */
html.light-mode .app-switcher-menu{background:#fafbfd;border-color:rgba(0,0,0,.12);}
html.light-mode .app-switcher-toggle{background:#fff;border-color:rgba(0,0,0,.12);color:var(--text2);}
html.light-mode .app-sw-item{color:var(--text2);}
html.light-mode .app-sw-item:hover{background:rgba(0,0,0,.05);color:var(--text);}
html.light-mode .app-sw-sep{background:rgba(0,0,0,.07);}

/* ── LIGHT MODE: Modal text ── */
html.light-mode .modal{color:var(--text);}
html.light-mode .mttl{color:var(--text) !important;}
html.light-mode .sub{color:var(--text2) !important;}
html.light-mode .mhd-info h2{color:var(--text) !important;}
html.light-mode .mhd-info .sub{color:var(--text3) !important;}
html.light-mode .section-title{color:var(--text2);}
html.light-mode .mc-label{color:var(--text2);}
html.light-mode .cf-label{color:var(--text2);}
html.light-mode .cl-section{background:#f5f5f8;}
html.light-mode .checklist-name{color:var(--text) !important;}
html.light-mode .cl-done-label{color:var(--text3);}
html.light-mode .cl-item.done .cl-item-text{color:var(--text3);}

/* ── LIGHT MODE: Right panel ── */
html.light-mode .rp-tab{color:var(--text3) !important;}
html.light-mode .rp-tab.active{color:var(--teal) !important;}
html.light-mode .rp-section-title{color:var(--text) !important;}
html.light-mode .act-item{color:var(--text2) !important;}
html.light-mode .comment-meta{color:var(--text3);}
html.light-mode .comment-text{color:var(--text);}

/* ── LIGHT MODE: JS-rendered content catch-all ──
   Overrides hardcoded color:#fff in dynamically built HTML */
html.light-mode .gantt-wrap [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode .gantt-wrap [style*="color: #fff"]{color:var(--text) !important;}
html.light-mode .cal-wrap [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode .cal-wrap [style*="color: #fff"]{color:var(--text) !important;}
html.light-mode #ctl-body [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode #ctl-body [style*="color: #fff"]{color:var(--text) !important;}
html.light-mode .right-panel [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode .auto-panel [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode .filter-panel [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode .pm-sidebar [style*="color:#fff"]{color:var(--text) !important;}
html.light-mode #filter-panel [style*="color:#fff"]{color:var(--text) !important;}
/* Gantt bar text stays white — it's on coloured bars */
html.light-mode .gantt-bar [style*="color:#fff"]{color:#fff !important;}
html.light-mode .gantt-bar{color:#fff !important;}
/* Calendar nav title */
html.light-mode #cal-title-label{color:var(--text) !important;}
/* Timeline card titles in Gantt */
html.light-mode .gantt-label [style*="color:#fff"]{color:var(--text) !important;}
/* Notification text */
html.light-mode #pm-notif-panel [style*="color:#fff"]{color:var(--text) !important;}
/* Filter panel title */
html.light-mode .filter-panel [style*="color:#fff"]{color:var(--text) !important;}
/* Automation panel */
html.light-mode .auto-panel [style*="color:#fff"]{color:var(--text) !important;}
/* Modal dynamic content */
html.light-mode .modal [style*="color:#fff"]:not(.card-label):not(.gantt-bar):not([class*="avatar"]):not([class*="badge"]){color:var(--text) !important;}
/* White rgba text */
html.light-mode .gantt-wrap [style*="color:rgba(255,255,255"]{color:var(--text3) !important;}
html.light-mode .cal-wrap [style*="color:rgba(255,255,255"]{color:var(--text3) !important;}
html.light-mode #ctl-body [style*="color:rgba(255,255,255"]{color:var(--text3) !important;}
/* Timeline card row titles */
html.light-mode [style*="color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1"]{color:var(--text) !important;}
.mi{font-family:'Material Symbols Outlined';font-style:normal;font-weight:300;font-size:20px;line-height:1;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;user-select:none;vertical-align:middle}
.mi.sm{font-size:16px}.mi.xs{font-size:14px}.mi.lg{font-size:26px}

/* ── TOPBAR ── */
.topbar{height:54px;background:#0f172a;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 18px;position:sticky;top:0;z-index:100}
.tb-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.tb-icon{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#f97316,#c2410c);display:flex;align-items:center;justify-content:center}
.tb-appname{font-size:15px;font-weight:700;color:#fff}
.tb-sep{width:1px;height:24px;background:var(--border);flex-shrink:0}
.board-tabs{display:flex;gap:2px;overflow-x:auto;flex-shrink:0}
.board-tab{padding:6px 14px;border-radius:6px;font-size:13px;font-weight:500;color:var(--text2);cursor:pointer;white-space:nowrap;border:none;background:none;font-family:'DM Sans',sans-serif}
.board-tab.active{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.board-tab:hover:not(.active){background:rgba(255,255,255,.05);color:var(--text)}
.tb-add-board{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;border:1.5px dashed var(--border2);background:none;transition:all .15s;white-space:nowrap;font-family:'DM Sans',sans-serif}
.tb-add-board:hover{border-color:rgba(255,255,255,.3);color:var(--text2)}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:'DM Sans',sans-serif}
.btn:hover{filter:brightness(1.1)}
.bp{background:#0d9488;color:#fff}.bp:hover{background:#0f766e}
.bs{background:rgba(255,255,255,.08);color:var(--text2);border:1px solid rgba(255,255,255,.08)}
.bs:hover{background:rgba(255,255,255,.14)!important;color:#fff}
.bd{background:rgba(220,38,38,.15);color:#f87171;border:1px solid rgba(220,38,38,.15)}.bd:hover{background:rgba(220,38,38,.25)!important}
.bsm{font-size:12px;padding:6px 12px}
.bxs{font-size:11px;padding:4px 9px}

/* ── BOARD ── */
.board-area{display:flex;gap:16px;padding:20px;align-items:flex-start;min-height:calc(100vh - 54px);overflow-x:auto;flex-shrink:0}
.col{width:290px;flex-shrink:0;display:flex;flex-direction:column;background:var(--bg2);border-radius:14px;border:1.5px solid var(--border);max-height:calc(100vh - 94px);overflow:hidden}
.col-head{padding:14px 16px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0;border-bottom:1px solid var(--border)}
.col-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.col-name{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;flex:1}
.col-count{font-size:11px;color:var(--text3);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:10px;font-weight:600}
.col-menu{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px;border-radius:5px;transition:all .15s;display:flex;align-items:center}
.col-menu:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.col-cards{flex:0 1 auto;overflow-y:auto;padding:10px 10px 6px;display:flex;flex-direction:column;gap:8px;min-height:20px}
.col-cards::-webkit-scrollbar{width:4px}
.col-cards::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.col-add{padding:8px 10px 12px;flex-shrink:0}
.col-add-btn{width:100%;padding:8px;border-radius:8px;border:none;background:rgba(255,255,255,.04);color:var(--text3);font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;font-family:'DM Sans',sans-serif}
.col-add-btn:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.add-col{width:270px;flex-shrink:0;border:2px dashed var(--border2);border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-height:80px;color:var(--text3);font-size:13px;font-weight:500;transition:all .2s;background:none;align-self:flex-start;padding:20px;font-family:'DM Sans',sans-serif}
.add-col:hover{border-color:rgba(255,255,255,.3);color:var(--text2);background:rgba(255,255,255,.02)}

/* ── CARD ── */
.card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r);padding:12px;cursor:pointer;transition:all .18s;position:relative;flex-shrink:0}
.card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.card.dragging{opacity:.4;transform:rotate(2deg)}
.card-drop-target{border-color:rgba(255,255,255,.3)!important;background:rgba(255,255,255,.03)!important}
.col-head:hover .col-drag-handle{opacity:1!important}
.col-drag-handle:active{cursor:grabbing}
.col-drop-target{outline:2px dashed rgba(255,255,255,.3)!important;background:rgba(255,255,255,.03)!important}
.col-dragging{opacity:.4;transform:rotate(1deg)}
.card-top{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.card-title{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;flex:1}
.card-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s}
.card:hover .card-actions{opacity:1}
.card-handle{color:var(--text3);cursor:grab;padding:2px;transition:color .15s}
.card-handle:hover{color:#fff}
.card-del-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;border-radius:4px;display:flex;align-items:center;transition:all .15s;line-height:1}
.card-del-btn:hover{color:#f87171;background:rgba(248,113,113,.12)}
.card-del-btn .mi{font-size:14px}

/* Client label */
.card-label{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.03em;margin-bottom:7px;max-width:100%}
.card-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.card-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.tag{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;letter-spacing:.03em}

.card-progress{margin-bottom:7px}
.prog-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.prog-label span{font-size:10px;color:var(--text3)}
.prog-bar{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;border-radius:2px;transition:width .3s}

.card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card-meta-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3)}
.card-meta-item .mi{font-size:13px}
.card-meta-item.overdue{color:#f87171}
/* status system removed — use columns for workflow */

/* Timer badge on card */
.card-timer{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text3);font-family:monospace}
.card-timer.running{color:#4ade80;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── OVERLAYS & MODALS ── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.overlay.open{display:flex}
.modal{background:#1a2332;border:1.5px solid var(--border2);border-radius:18px;width:75vw;max-width:1400px;min-width:min(800px, 95vw);display:flex;flex-direction:row;box-shadow:0 32px 80px rgba(0,0,0,.6);overflow:hidden;margin:auto;height:90vh}
.modal-sm{max-width:420px;flex-direction:column;height:auto;min-width:0}
.mhd{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;flex-shrink:0}
.mhd-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:5px}
.mhd-info{flex:1}
.mhd-info h2{font-size:17px;font-weight:700;color:#fff;line-height:1.3}
.mhd-info .sub{font-size:11px;color:var(--text3);margin-top:2px}
.mbdy{flex:1;overflow-y:auto;padding:18px 22px}
.mbdy::-webkit-scrollbar{width:4px}
.mbdy::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.mftr{padding:12px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0}
.fg{margin-bottom:13px}
.flbl{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:5px}
.fi{width:100%;padding:9px 12px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;transition:border-color .15s;outline:none;color-scheme:dark}
html.light-mode .fi{color-scheme:light;background:rgba(0,0,0,.03)}
.fi:focus{border-color:rgba(255,255,255,.3)}
.fs{width:100%;padding:9px 12px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;outline:none;cursor:pointer;color-scheme:dark;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
html.light-mode .fs{color-scheme:light;background-color:rgba(0,0,0,.03);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.fs option{background:#1a2332;color:var(--text)}
html.light-mode .fs option{background:#fff;color:#1a1a1a}
.ft{width:100%;padding:9px 12px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;outline:none;resize:vertical;min-height:70px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* ── CARD DETAIL SECTIONS ── */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;margin-top:4px}
.section-title{font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:7px}

/* ── CHECKLISTS ── */
.cl-section{margin-bottom:18px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.cl-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;border-bottom:1px solid var(--border)}
.cl-name-input{background:none;border:none;outline:none;font-size:13px;font-weight:700;color:var(--text);font-family:'DM Sans',sans-serif;flex:1}
.cl-prog-txt{font-size:10px;color:var(--text3);white-space:nowrap}
.cl-bar{height:3px;background:rgba(255,255,255,.06)}
.cl-bar-fill{height:100%;transition:width .3s}
.cl-items{padding:2px 4px 4px}
.cl-item{display:flex;align-items:flex-start;gap:9px;padding:5px 0;border-radius:6px;transition:background .1s}
.cl-item:hover{background:rgba(255,255,255,.03)}
.cl-item input[type=checkbox]{width:15px;height:15px;border-radius:3px;cursor:pointer;flex-shrink:0;margin-top:2px;accent-color:var(--cc,#0d9488)}
.cl-item-text{font-size:12px;color:var(--text2);flex:1;line-height:1.5;word-break:break-word}
.cl-item-text.done{text-decoration:line-through;color:var(--text3)}
.cl-item-link{color:#60a5fa;text-decoration:underline}
.cl-item-del{background:none;border:none;cursor:pointer;color:var(--text3);padding:2px;opacity:0;transition:opacity .15s;display:flex;align-items:center}
.cl-item:hover .cl-item-del{opacity:1}
.cl-item-del:hover{color:#f87171}
.cl-footer{padding:6px 12px 10px;display:flex;gap:8px;align-items:center}
.cl-inp{flex:1;padding:6px 9px;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:6px;color:var(--text2);font-size:12px;font-family:'DM Sans',sans-serif;outline:none;transition:all .15s}
.cl-inp:focus{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:var(--text)}
.cl-add-btn{background:rgba(255,255,255,.08);border:none;border-radius:6px;padding:6px 10px;color:var(--text2);cursor:pointer;font-size:12px;font-weight:600;font-family:'DM Sans',sans-serif;transition:all .15s}
.cl-add-btn:hover{background:rgba(255,255,255,.14);color:#fff}
.cl-hide-btn{background:none;border:none;cursor:pointer;font-size:10px;color:var(--text3);padding:2px 5px;border-radius:4px;font-family:'DM Sans',sans-serif;transition:all .15s}
.cl-hide-btn:hover{color:var(--text2)}

/* ── TIMER SECTION ── */
.timer-box{background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.timer-row{display:flex;align-items:center;gap:10px}
.timer-display{font-family:'DM Mono',monospace,sans-serif;font-size:22px;font-weight:700;color:var(--text);letter-spacing:.04em;min-width:80px}
.timer-display.running{color:#4ade80}
.timer-btns{display:flex;gap:8px;align-items:center}
.tbtn{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:7px;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.tbtn:hover{filter:brightness(1.1)}
.tbtn-start{background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.3)}
.tbtn-start:hover{background:rgba(74,222,128,.25)}
.tbtn-stop{background:rgba(248,113,113,.15);color:#f87171;border:1px solid rgba(248,113,113,.3)}
.tbtn-stop:hover{background:rgba(248,113,113,.25)}
.tbtn-add{background:rgba(255,255,255,.06);color:var(--text2);border:1px solid var(--border2)}
.tbtn-add:hover{background:rgba(255,255,255,.12);color:#fff}
.timer-estimate{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3)}
.timer-estimate input{width:60px;padding:4px 8px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:6px;color:var(--text2);font-size:11px;font-family:'DM Sans',sans-serif;outline:none;text-align:center}
.timer-log{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
.timer-log-entry{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px;color:var(--text3);border-bottom:1px solid rgba(255,255,255,.04)}
.timer-log-entry:last-child{border-bottom:none}
.timer-log-dur{font-family:monospace;color:var(--text2);font-weight:600;min-width:50px}
.timer-log-del{background:none;border:none;cursor:pointer;color:var(--text3);padding:1px 4px;border-radius:3px;margin-left:auto;opacity:0;transition:opacity .15s}
.timer-log-entry:hover .timer-log-del{opacity:1}
.timer-log-del:hover{color:#f87171}
.timer-total{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:11px;font-weight:600;color:var(--text2);border-top:1px solid var(--border);margin-top:4px}

/* ── ACTIVITY LOG ── */
.act-section{margin-bottom:4px}
.act-entry{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.act-entry:last-child{border-bottom:none}
.act-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.act-body{flex:1;min-width:0}
.act-desc{font-size:12px;color:var(--text);line-height:1.4}
.act-meta{font-size:10px;color:var(--text3);margin-top:2px}

/* ── COMMENTS ── */
.comment-input-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}
.comment-avatar{width:28px;height:28px;border-radius:50%;background:var(--pedro-col,#f97316);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.comment-input{flex:1;padding:8px 11px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:'DM Sans',sans-serif;outline:none;transition:border-color .15s;line-height:1.5}
.comment-input:focus{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.07)}
.comment-input[contenteditable]:empty:before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.comment{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.comment:last-child{border-bottom:none}
.comment-body{flex:1}
.comment-name{font-size:12px;font-weight:600;color:var(--text)}
.comment-time{font-size:10px;color:var(--text3);margin-left:8px}
.comment-text{font-size:12px;color:var(--text2);line-height:1.5;margin-top:2px;white-space:pre-wrap}
.comment-del{background:none;border:none;cursor:pointer;color:var(--text3);font-size:10px;padding:2px 5px;border-radius:4px;opacity:0;transition:opacity .15s}
.comment:hover .comment-del{opacity:1}
.comment-del:hover{color:#f87171}

/* ── LABELS SECTION ── */
.label-grid{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.lbl-chip{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;border:none;font-family:'DM Sans',sans-serif}
.lbl-chip:hover{filter:brightness(1.15)}
.lbl-chip.inactive{opacity:.35;filter:saturate(.4)}
.lbl-add{background:rgba(255,255,255,.06);color:var(--text3);padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;border:1.5px dashed var(--border2);font-family:'DM Sans',sans-serif}
.lbl-add:hover{background:rgba(255,255,255,.1);color:var(--text2)}

/* ── MEMBER COLOUR PICKER ── */
.col-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;flex-shrink:0}
.col-swatch.sel{border-color:#fff;transform:scale(1.15)}
.col-swatch:hover:not(.sel){transform:scale(1.1)}

/* ── CUSTOM FIELDS ── */
.cf-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:4px}
.cf-item{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:7px;padding:8px 10px}
.cf-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.cf-val{font-size:12px;color:var(--text2);padding:0;background:none;border:none;outline:none;width:100%;font-family:'DM Sans',sans-serif;cursor:text}
.cf-val:focus{color:var(--text)}

/* ── Description fullscreen overlay ── */
.desc-fs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;display:none;flex-direction:column;padding:24px}
.desc-fs-overlay.open{display:flex}
.desc-fs-inner{background:#1a2332;border:1.5px solid var(--border2);border-radius:16px;flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:900px;width:100%;margin:auto}
.desc-fs-toolbar{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex-shrink:0}
.desc-fs-editor{flex:1;padding:20px 24px;overflow-y:auto;font-size:14px;color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.7;outline:none}
.desc-fs-editor:empty:before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.desc-fs-editor b,.desc-fs-editor strong{font-weight:700;color:#fff}
.desc-fs-editor i,.desc-fs-editor em{font-style:italic}
.desc-fs-editor u{text-decoration:underline}
.desc-fs-editor ul,.desc-fs-editor ol{padding-left:20px;margin:4px 0}
.desc-fs-editor li{margin:3px 0}

/* ── ASSIGNEE AVATAR TOGGLES ── */
.assignee-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.assignee-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0;border:2px solid transparent;transition:all .18s;position:relative;overflow:hidden;opacity:.38;filter:saturate(.3)}
.assignee-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:absolute;inset:0}
.assignee-avatar.on{opacity:1;filter:none;border-color:rgba(255,255,255,.65);box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.assignee-avatar:hover{opacity:.75;filter:saturate(.6)}
.assignee-avatar.on:hover{opacity:1}
.av-initials{position:relative;z-index:1;pointer-events:none}
.av-check{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;background:#4ade80;border-radius:50%;border:1.5px solid #1a2332;display:none}
.assignee-avatar.on .av-check{display:block}

/* ── CUSTOM SELECT (replaces native <select> in modal) ── */
.cs-wrap{position:relative}
.cs-btn{width:100%;padding:9px 30px 9px 10px;background:rgba(255,255,255,.05);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;transition:border-color .15s;outline:none;white-space:nowrap;overflow:hidden}
.cs-btn:hover,.cs-btn:focus{border-color:rgba(255,255,255,.22)}
.cs-btn-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-btn-arrow{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;font-size:16px;line-height:1}
.cs-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#1a2332;border:1.5px solid var(--border2);border-radius:10px;z-index:9999;box-shadow:0 12px 40px rgba(0,0,0,.55);overflow:hidden;display:none;min-width:180px}
.cs-dropdown.open{display:block}
.cs-search{padding:8px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#1a2332;z-index:1}
.cs-search input{width:100%;padding:5px 9px;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:12px;font-family:'DM Sans',sans-serif;outline:none}
.cs-search input:focus{border-color:rgba(255,255,255,.25)}
.cs-list{max-height:200px;overflow-y:auto}
.cs-option{padding:8px 12px;font-size:13px;font-family:'DM Sans',sans-serif;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s}
.cs-option:hover{background:rgba(255,255,255,.07);color:#fff}
.cs-option.selected{background:rgba(13,148,136,.15);color:#fff;font-weight:600}
.cs-empty{padding:10px 12px;font-size:12px;color:var(--text3);text-align:center}
.cs-av{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;position:relative}
.cs-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ── EST UNIT btn-group (replaces select in timer) ── */
.est-unit-grp{display:flex;border-left:1px solid var(--border)}
.est-unit-btn{height:28px;padding:0 7px;background:none;border:none;border-right:1px solid var(--border);cursor:pointer;color:var(--text3);font-size:10px;font-weight:600;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}
.est-unit-btn:last-child{border-right:none}
.est-unit-btn:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.est-unit-btn.active{background:rgba(13,148,136,.25);color:#2dd4bf}

/* ── Hide number input spinners globally ── */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ── TIMELINE — sticky left column ── */
/* Phase/Task label cells stay pinned at left:0 while the chart scrolls
   horizontally. Must sit above the dep-arrow SVG (z:3) and the bars (z:2).
   !important guards against any inline style overriding the z-stack. */
.ctl-phase-label{position:sticky!important;left:0!important;z-index:100!important;background:var(--bg2)!important}
.ctl-item-label{position:sticky!important;left:0!important;z-index:100!important;background:var(--bg)!important}
.ctl-hdr-label{position:sticky!important;left:0!important;z-index:120!important;background:var(--bg2)!important}

/* ── TOAST ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:#1f2937;border:1.5px solid var(--border2);border-radius:10px;padding:10px 18px;font-size:13px;font-weight:500;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.4);z-index:500;transition:transform .3s;white-space:nowrap}
.toast.show{transform:translateX(-50%) translateY(0)}
.empty-col{text-align:center;padding:12px 14px;color:var(--text3);font-size:11px;pointer-events:none;user-select:none;opacity:.7}
.empty-col .mi{font-size:20px;display:block;margin-bottom:3px;opacity:.3}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}

/* App Switcher */
/* ── APP SWITCHER ── */
.app-switcher{position:fixed;bottom:20px;left:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.app-switcher-toggle{width:42px;height:42px;border-radius:12px;background:#1f2937;border:1.5px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.35)}
.app-switcher-toggle:hover{background:#374151;color:#fff;border-color:rgba(255,255,255,.3)}
.app-switcher-menu{background:#0c1220;border:1.5px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;display:none;flex-direction:column;gap:2px;box-shadow:0 8px 40px rgba(0,0,0,.55);min-width:188px}
.app-switcher-menu.open{display:flex}
.app-sw-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.app-sw-item{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;cursor:pointer;text-decoration:none;transition:background .15s;color:rgba(255,255,255,.6);font-size:12px;font-weight:500;border:none;background:none;font-family:inherit;width:100%;text-align:left}
.app-sw-item:hover{background:rgba(255,255,255,.07);color:#fff}
.app-sw-item.current{background:rgba(255,255,255,.08);color:#fff;font-weight:600}
.app-sw-sep{height:1px;background:rgba(255,255,255,.07);margin:2px 0}
html.light-mode .app-switcher-toggle{background:#fff;border-color:rgba(0,0,0,.15);color:#4b5563;box-shadow:0 2px 12px rgba(0,0,0,.1)}
html.light-mode .app-switcher-toggle:hover{background:#f3f4f6;color:#111}
html.light-mode .app-switcher-menu{background:#fff;border-color:rgba(0,0,0,.12);box-shadow:0 8px 32px rgba(0,0,0,.12)}
html.light-mode .app-sw-item{color:#4b5563}
html.light-mode .app-sw-item:hover{background:rgba(0,0,0,.05);color:#111}
html.light-mode .app-sw-item.current{background:rgba(0,0,0,.06);color:#111}
html.light-mode .app-sw-sep{background:rgba(0,0,0,.07)}


/* ── LABELS PANEL (Trello-style slide-in) ── */
.labels-panel{
  position:fixed;top:54px;right:0;width:380px;
  height:calc(100vh - 54px);
  background:#1a2332;border-left:1.5px solid var(--border2);
  z-index:150;display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.4);
  transform:translateX(100%);transition:transform .22s ease;
}
.labels-panel.open{transform:translateX(0)}
.labels-panel-head{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.labels-panel-title{font-size:14px;font-weight:700;color:#fff;flex:1}
.labels-panel-close{background:none;border:none;cursor:pointer;color:var(--text3);font-size:20px;line-height:1;padding:2px 6px;border-radius:5px;transition:all .15s}
.labels-panel-close:hover{background:rgba(255,255,255,.08);color:#fff}
.labels-search{padding:10px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.labels-search input{
  width:100%;padding:8px 11px;background:rgba(255,255,255,.06);
  border:1.5px solid var(--border);border-radius:8px;
  color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;
  outline:none;transition:border-color .15s;
}
.labels-search input:focus{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.09)}
.labels-list{flex:1;overflow-y:auto;padding:8px 12px}
.labels-list::-webkit-scrollbar{width:4px}
.labels-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.label-row{
  display:flex;flex-direction:column;
  padding:4px 6px;border-radius:9px;margin-bottom:4px;
  transition:background .15s;cursor:default;
}
.label-row:hover{background:rgba(255,255,255,.05)}
.label-swatch{
  width:36px;height:24px;border-radius:5px;flex-shrink:0;cursor:pointer;
  transition:transform .15s;border:2px solid transparent;
}
.label-swatch:hover{transform:scale(1.1)}
.label-name{flex:1;font-size:13px;font-weight:500;color:var(--text);cursor:text;outline:none;background:none;border:none;font-family:'DM Sans',sans-serif;padding:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.label-name:focus{color:#fff}
.label-count{font-size:10px;color:var(--text3);background:rgba(255,255,255,.06);padding:1px 6px;border-radius:6px;white-space:nowrap}
.label-edit-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px;border-radius:5px;opacity:0;transition:all .15s;display:flex;align-items:center}
.label-row:hover .label-edit-btn{opacity:1}
.label-edit-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.label-del-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px;border-radius:5px;opacity:0;transition:all .15s;display:flex;align-items:center}
.label-row:hover .label-del-btn{opacity:1}
.label-del-btn:hover{color:#f87171;background:rgba(220,38,38,.1)}
.label-expand-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 4px;border-radius:5px;display:flex;align-items:center;transition:all .15s;flex-shrink:0}
.label-expand-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.label-top-row{display:flex;align-items:center;gap:8px;width:100%;padding:4px 4px}
.label-detail{display:none;padding:8px 10px 10px 14px;border-top:1px solid rgba(255,255,255,.06);margin-top:2px;font-size:11px;color:var(--text3);line-height:1.7}
.label-detail.open{display:block}
.label-detail-row{display:flex;align-items:center;gap:6px;padding:2px 0}
.label-detail-row .mi{font-size:13px;color:rgba(255,255,255,.3);flex-shrink:0}
.label-detail a{color:#38bdf8;text-decoration:none}
.label-detail a:hover{text-decoration:underline}
.labels-create{padding:12px 14px;border-top:1px solid var(--border);flex-shrink:0;background:rgba(0,0,0,.15)}
.labels-create-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.labels-create-row{display:flex;gap:8px;align-items:center}
.labels-create-row input[type=text]{
  flex:1;padding:8px 10px;background:rgba(255,255,255,.05);
  border:1.5px solid var(--border);border-radius:8px;
  color:var(--text);font-size:12px;font-family:'DM Sans',sans-serif;
  outline:none;transition:border-color .15s;
}
.labels-create-row input[type=text]:focus{border-color:rgba(255,255,255,.25)}
.labels-create-row input[type=color]{
  width:36px;height:36px;border-radius:8px;border:1.5px solid var(--border);
  padding:2px;cursor:pointer;background:rgba(255,255,255,.05);
}
.labels-create-add{
  background:#0d9488;color:#fff;border:none;border-radius:8px;
  padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap;
}
.labels-create-add:hover{background:#0f766e}
/* Label btn in topbar */
.tb-labels-btn{
  position:relative;width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.06);border:1.5px solid var(--border);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text2);transition:all .15s;flex-shrink:0;
}
.tb-labels-btn:hover,.tb-labels-btn.active{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.tb-labels-badge{
  position:absolute;top:-5px;right:-5px;
  background:var(--pedro,#f97316);color:#fff;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;
  min-width:16px;text-align:center;
}

/* ── MEMBER SIDEBAR (was filter bar) ── */
.member-sidebar{display:flex;flex-direction:column;width:48px;background:var(--filter-bar-bg,#0a111e);border-right:1px solid var(--border);flex-shrink:0;overflow-y:auto;overflow-x:hidden;transition:width .2s ease;z-index:90;scrollbar-width:none}
.member-sidebar::-webkit-scrollbar{display:none}
.member-sidebar.expanded{width:164px}
.member-sidebar .ms-toggle{display:flex;align-items:center;justify-content:center;height:36px;cursor:pointer;color:var(--text3);border-bottom:1px solid var(--border);flex-shrink:0;transition:background .15s}
.member-sidebar .ms-toggle:hover{background:rgba(255,255,255,.06)}
.fp{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;border-left:3px solid transparent;transition:all .15s;white-space:nowrap;overflow:hidden;color:var(--text3);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;flex-shrink:0}
.fp:hover{background:rgba(255,255,255,.06);color:var(--text2)}
.fp.active{color:#fff;background:rgba(255,255,255,.06);border-left-color:var(--fp-color,rgba(255,255,255,.3))}
.fp .fp-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;overflow:hidden}
.fp .fp-name{opacity:0;width:0;overflow:hidden;transition:opacity .2s,width .2s}
.member-sidebar.expanded .fp .fp-name{opacity:1;width:auto}
.fp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fp-sep{height:1px;background:var(--border);margin:2px 8px;flex-shrink:0}
.fp-dragging{opacity:.4;transform:scale(.95)}
.fp-drop-before{box-shadow:inset 0 3px 0 0 #a78bfa}
.fp-drop-after{box-shadow:inset 0 -3px 0 0 #a78bfa}
.orbit-sr-row.orbit-sr-sel{background:rgba(167,139,250,.12)!important}
/* ── AUTOMATION PANEL ── */
.auto-panel{position:fixed;top:0;right:0;width:min(840px, 90vw);height:100vh;background:#0f172a;border-left:2px solid var(--border2);z-index:500;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.6);transform:translateX(100%);transition:transform .22s ease}
.auto-panel.open{transform:translateX(0)}
.auto-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;background:#0a0f1e}
.auto-main{display:flex;flex:1;overflow:hidden}
.auto-sidebar{width:148px;flex-shrink:0;border-right:1px solid var(--border);padding-top:8px;background:rgba(0,0,0,.2)}
.auto-body{flex:1;overflow-y:auto;padding:16px}
.auto-body::-webkit-scrollbar{width:4px}
.auto-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.auto-nav-grp{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding:10px 14px 3px}
.auto-nav-item{padding:8px 14px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;transition:all .15s;border-left:2px solid transparent;display:flex;align-items:center;gap:8px}
.auto-nav-item:hover{background:rgba(255,255,255,.04);color:var(--text2)}
.auto-nav-item.active{background:rgba(255,255,255,.06);color:#fff;border-left-color:#f97316}
.rule-card{background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.rule-text{font-size:11.5px;color:var(--text2);line-height:1.65;font-family:monospace;background:rgba(0,0,0,.3);padding:9px 11px;border-radius:7px;margin-bottom:9px;white-space:pre-wrap}
.rule-bar{display:flex;align-items:center;gap:8px}
.rule-toggle{width:32px;height:17px;border-radius:9px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.rule-knob{width:13px;height:13px;border-radius:50%;background:#fff;position:absolute;top:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.rule-lbl{font-size:11px;color:var(--text3);flex:1}
.rule-act{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 5px;border-radius:5px;transition:all .15s;font-family:'DM Sans',sans-serif;font-size:11px;display:inline-flex;align-items:center;gap:3px}
.rule-act:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.rule-act.del:hover{background:rgba(220,38,38,.12);color:#f87171}
.new-rule{width:100%;padding:10px;border-radius:9px;border:2px dashed rgba(249,115,22,.4);background:none;color:#fb923c;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:6px;justify-content:center;transition:all .2s;margin-top:4px}
.new-rule:hover{border-color:#f97316;background:rgba(249,115,22,.07)}
/* TB buttons */
.tb-icon-btn{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1.5px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .15s;flex-shrink:0;position:relative}
.tb-icon-btn:hover,.tb-icon-btn.active{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}
.tb-icon-btn .badge{position:absolute;top:-4px;right:-4px;background:#f97316;color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:6px;min-width:14px;text-align:center}
.omm-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;color:var(--text2,#94a3b8);cursor:pointer;transition:background .1s}
.omm-item:hover{background:rgba(255,255,255,.06);color:var(--text,#e2e8f0)}
.omm-item .mi{font-size:16px;opacity:.7}

/* ── CHECKLIST ITEM ACTION BUTTONS (QE-style icon buttons) ── */
.cl-ia{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1.5px solid var(--border);background:rgba(255,255,255,.04);cursor:pointer;color:var(--text3);transition:all .15s;flex-shrink:0;padding:0}
.cl-ia:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:var(--text)}
.cl-ia.del:hover{background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.3);color:#f87171}
.cl-ia-grp{display:flex;gap:3px;align-items:center;opacity:0;transition:opacity .15s}
.cl-item:hover .cl-ia-grp{opacity:1}

/* ── LEFT SIDEBAR DRAWER (PM) ── */
.pm-sidebar{position:fixed;top:0;left:0;width:260px;height:100vh;background:#0a111e;border-right:1.5px solid var(--border2);z-index:300;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.5);transform:translateX(-100%);transition:transform .22s ease}
.pm-sidebar.open{transform:translateX(0)}
.pm-sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:299;display:none}
.pm-sidebar-overlay.open{display:block}
.pm-sb-head{padding:16px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
.pm-sb-logo{width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#f97316,#c2410c);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pm-sb-title{font-size:14px;font-weight:700;color:#fff;flex:1}
.pm-sb-close{background:none;border:none;cursor:pointer;color:var(--text3);font-size:20px;padding:2px 5px;border-radius:5px;transition:all .15s;line-height:1}
.pm-sb-close:hover{background:rgba(255,255,255,.08);color:#fff}
.pm-sb-body{flex:1;overflow-y:auto;padding:12px 10px}
.pm-sb-section{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding:8px 10px 4px;margin-top:6px}
.pm-sb-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;transition:all .15s;border:none;background:none;width:100%;text-align:left;font-family:'DM Sans',sans-serif}
.pm-sb-item:hover{background:rgba(255,255,255,.06);color:var(--text)}
.pm-sb-item.active{background:rgba(249,115,22,.15);color:#fb923c}
.pm-sb-foot{padding:14px 16px;border-top:1px solid var(--border);flex-shrink:0}
.pm-sb-user{display:flex;align-items:center;gap:10px}
.pm-sb-avatar{width:32px;height:32px;border-radius:50%;background:#f97316;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.pm-sb-username{font-size:12px;font-weight:600;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.ab-section{background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.ab-section-head{font-size:10px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-bottom:9px;display:flex;align-items:center;gap:6px}
.ab-chosen{display:flex;align-items:center;gap:8px;background:rgba(249,115,22,.1);border:1.5px solid rgba(249,115,22,.3);border-radius:8px;padding:9px 11px}
.ab-pick-head{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 5px}
.ab-pick-item{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;background:rgba(255,255,255,.04);border:1.5px solid var(--border);border-radius:8px;margin-bottom:4px;cursor:pointer;color:var(--text2);font-size:12px;font-family:'DM Sans',sans-serif;transition:all .15s;text-align:left}
.ab-pick-item:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
.auto-select{background:rgba(255,255,255,.07);border:1.5px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;padding:7px 9px;outline:none;cursor:pointer;width:100%;transition:border-color .15s}
.auto-select:focus{border-color:rgba(249,115,22,.5)}
.auto-select option{background:#1a2332}
.auto-input{background:rgba(255,255,255,.06);border:1.5px solid var(--border);border-radius:7px;color:var(--text);font-family:'DM Sans',sans-serif;padding:7px 10px;outline:none;width:100%;transition:border-color .15s}
.auto-input:focus{border-color:rgba(249,115,22,.5)}


/* Label pills (Trello-style thin bars) */
.lp{height:22px;min-width:40px;max-width:140px;border-radius:4px;cursor:default;display:inline-flex;align-items:center;padding:0 8px;overflow:hidden}

.lp-t{font-size:10px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tag pills */
.tp{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;border:1.5px solid;background:transparent;letter-spacing:.02em}
/* Due date */
.due-ok{color:var(--text3)}.due-upcoming{color:#fbbf24}.due-soon{color:#7c3aed}.due-overdue{color:#f87171}.due-done{color:#4ade80}


/* View switcher tabs */
.view-tabs{display:flex;gap:2px;align-items:center}
.view-tab{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border:none;background:none;font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}
.view-tab:hover{background:rgba(255,255,255,.06);color:var(--text2)}
.view-tab.active{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
/* Calendar */
.cal-wrap{flex:1;overflow:auto;padding:20px;min-height:0}
.cal-nav{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:10px;overflow:hidden}
.cal-dh{background:var(--col-header-bg,#0a111e);padding:8px 6px;font-size:10px;font-weight:700;color:var(--text3);text-align:center;text-transform:uppercase;letter-spacing:.06em}
.cal-cell{background:var(--bg2);min-height:110px;padding:7px 6px 6px;transition:background .15s;vertical-align:top;cursor:default}
.cal-cell:hover{background:var(--bg3)}
.cal-cell.today{background:rgba(13,148,136,.09);outline:2px solid #0d9488;outline-offset:-2px;border-radius:0}
.cal-cell.other-month{opacity:.45}
.cal-day{display:flex;align-items:center;margin-bottom:4px}
.cal-day-num{font-size:12px;font-weight:600;color:var(--text3);line-height:1;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
.cal-day-num.today-num{background:#0d9488;color:#fff;font-size:12px;font-weight:700}
.cal-card-chip{font-size:10px;padding:2px 6px;border-radius:4px;margin-bottom:2px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;transition:filter .15s}
.cal-card-chip:hover{filter:brightness(1.2)}
/* Gantt */
.gantt-wrap{flex:1;overflow:auto;padding:20px;min-height:0}
.gantt-grid{display:flex;flex-direction:column;gap:0}
.gantt-ph-del{opacity:0}.gantt-row:hover .gantt-ph-del{opacity:1}
.gantt-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border);min-height:34px}
.gantt-label{width:200px;flex-shrink:0;padding:8px 12px;font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.gantt-label:hover{color:var(--p)}
.gantt-timeline{flex:1;position:relative;height:100%;min-height:44px}
.gantt-bar{position:absolute;height:24px;top:10px;border-radius:6px;cursor:grab;display:flex;align-items:center;padding:0 8px;font-size:10px;font-weight:600;color:#fff;overflow:hidden;white-space:nowrap;transition:filter .15s;user-select:none}
.gantt-bar:hover{filter:brightness(1.15)}
.gantt-bar .resize-handle{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0;transition:opacity .15s}
.gantt-bar:hover .resize-handle{opacity:1;background:rgba(255,255,255,.3);border-radius:0 6px 6px 0}
.gantt-header-row{display:flex;align-items:center;border-bottom:2px solid var(--border);background:var(--gantt-hdr-bg,#0a111e);position:sticky;top:0;z-index:10}
.gantt-month-label{font-size:10px;font-weight:700;color:var(--text3);text-align:center;padding:6px 0;border-right:1px solid var(--border)}
.gantt-today-line{position:absolute;top:0;bottom:0;width:2px;background:#0d9488;z-index:5;opacity:.6}
/* Filter bar enhanced */
.filter-panel{position:fixed;top:94px;left:50%;transform:translateX(-50%);background:#1a2332;border:1.5px solid var(--border2);border-radius:14px;padding:16px 20px;z-index:200;box-shadow:0 16px 48px rgba(0,0,0,.5);min-width:480px;max-width:600px;display:none}
.filter-panel.open{display:block}
/* Settings */
.settings-layout{display:flex;height:calc(100vh - 94px);overflow:hidden}
.settings-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--border);padding:12px 0;background:#0a111e;overflow-y:auto}
.settings-content{flex:1;overflow-y:auto;padding:28px 32px}
.settings-nav-grp{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;padding:10px 16px 3px}
.settings-nav-item{padding:8px 16px;font-size:13px;font-weight:500;color:var(--text3);cursor:pointer;transition:all .15s;border-left:2px solid transparent;display:flex;align-items:center;gap:8px}
.settings-nav-item:hover{background:rgba(255,255,255,.04);color:var(--text2)}
.settings-nav-item.active{background:rgba(255,255,255,.06);color:#fff;border-left-color:var(--p,#f97316)}
.settings-section{margin-bottom:32px}
.settings-section h3{font-size:14px;font-weight:700;color:#fff;margin-bottom:4px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}


/* Card modal 2-column layout */
.modal-main-col{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}
.modal-main-col .mbdy{flex:1;overflow-y:auto}
.modal-act-col{width:35vw;max-width:600px;min-width:280px;flex-shrink:0;border-left:1px solid var(--border);display:flex;flex-direction:column;background:#131c2b;transition:width .2s}
.modal-act-col.collapsed{width:44px;min-width:44px}
.modal-act-col.collapsed .act-col-body{display:none}
.modal-act-col.collapsed .act-panel-title{display:none}
.modal-act-col.collapsed .act-col-tabs{flex-direction:column;border-bottom:none;border-right:none;width:44px;background:transparent;padding-top:4px}
.modal-act-col.collapsed .act-col-tab{flex:none;padding:10px 0;font-size:0;border-bottom:none;border-left:2px solid transparent;border-right:none;width:44px}
.modal-act-col.collapsed .act-col-tab .mi{font-size:18px}
.modal-act-col.collapsed .act-col-tab.active{border-left-color:var(--p);background:rgba(99,102,241,.1);border-bottom-color:transparent}
.modal-act-col.collapsed .act-col-collapse-btn{margin-top:auto;width:44px;padding:10px 0}
.modal-act-col.collapsed #act-col-tabs .badge-dot{top:6px;right:6px}
.act-col-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0;background:#0e1623;gap:0}
.act-col-tab{flex:1;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;border:none;background:none;color:var(--text3);font-family:'DM Sans',sans-serif;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;transition:all .15s;border-bottom:2px solid transparent;position:relative}
.act-col-tab:hover{color:var(--text2);background:rgba(255,255,255,.03)}
.act-col-tab.active{color:#fff;border-bottom-color:var(--p);background:rgba(99,102,241,.06)}
.act-col-tab .mi{font-size:16px}
.act-col-tab .badge-dot{position:absolute;top:6px;right:10px;width:6px;height:6px;border-radius:50%;background:#f97316;display:none}
.act-col-tab .badge-dot.show{display:block}
.act-col-collapse-btn{width:44px;flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--text3);padding:10px 0;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border);transition:color .15s}
.act-col-collapse-btn:hover{color:#fff;background:rgba(255,255,255,.04)}
.act-col-body{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column}
.act-col-body::-webkit-scrollbar{width:3px}
.act-col-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.act-panel{display:none;flex:1;flex-direction:column}
.act-panel.active{display:flex}
.act-panel-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;padding:2px 0 10px;flex-shrink:0}
/* Notes WYSIWYG area */
.act-notes-area{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.wysiwyg-toolbar{display:flex;gap:3px;margin-bottom:5px;flex-wrap:wrap}
.wt-btn{background:rgba(255,255,255,.06);border:none;cursor:pointer;color:var(--text3);padding:3px 6px;border-radius:4px;font-size:11px;transition:all .15s;font-family:'DM Sans',sans-serif}
.wt-btn:hover{background:rgba(255,255,255,.12);color:#fff}
.wt-btn.active{background:rgba(255,255,255,.15);color:#fff}
[contenteditable]{outline:none}
[contenteditable]:empty:before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}


/* ── PROJECT TYPE TOGGLE ── */
.proj-type-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text3);font-family:'DM Sans',sans-serif;transition:all .18s}
.proj-type-btn:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.proj-type-btn.active.timed{background:rgba(13,148,136,.18);border-color:#0d9488;color:#2dd4bf}
.proj-type-btn.active.quoted{background:rgba(251,191,36,.15);border-color:#fbbf24;color:#fbbf24}
.proj-type-btn.active{background:rgba(13,148,136,.18);border-color:#0d9488;color:#2dd4bf}
/* Budget bar states */
.budget-ok{background:#0d9488}
.budget-warn{background:#f59e0b}
.budget-danger{background:#ef4444}
.budget-alert-warn{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#fbbf24}
.budget-alert-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#f87171}
/* Card chip for project type */
.card-type-chip{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;letter-spacing:.04em}
.card-type-timed{background:rgba(13,148,136,.15);color:#2dd4bf}
.card-type-quoted{background:rgba(251,191,36,.15);color:#fbbf24}
.card-type-danger{background:rgba(239,68,68,.15);color:#f87171;animation:budgetPulse 1.5s ease-in-out infinite}
@keyframes budgetPulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── RICH CONTENT (rendered comments & comms) ── */
.rich-content{font-size:12px;color:var(--text2);line-height:1.6;word-break:break-word;font-family:'DM Sans',sans-serif}
.rich-content *{font-family:'DM Sans',sans-serif !important;font-size:inherit;color:inherit}
.rich-content b,.rich-content strong{font-weight:700;color:var(--text)}
.rich-content i,.rich-content em{font-style:italic}
.rich-content u{text-decoration:underline}
.rich-content s,.rich-content strike{text-decoration:line-through;opacity:.6}
.rich-content ul,.rich-content ol{padding-left:18px;margin:4px 0}
.rich-content li{margin:2px 0}
.rich-content a{color:#60a5fa;text-decoration:underline}
.rich-content a:hover{color:#93c5fd}
.rich-content br{display:block;margin:2px 0}
.rich-content p{margin:3px 0}
.rich-content blockquote{border-left:3px solid var(--border2);padding-left:10px;margin:4px 0;opacity:.7}
.rich-content img{max-width:100%;border-radius:6px;margin:4px 0;display:block}
.rich-content pre,.rich-content code{font-family:monospace !important;background:rgba(255,255,255,.06);border-radius:4px;padding:2px 5px;font-size:11px !important}

/* ── COMMS PANEL ── */
.comms-entry{background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;position:relative;transition:border-color .15s}
.comms-entry:hover{border-color:var(--border2)}
.comms-entry-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;flex-wrap:wrap}
.comms-ch-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;letter-spacing:.03em;flex-shrink:0}
.comms-dir-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:10px;font-size:10px;font-weight:600;flex-shrink:0}
.comms-dir-in{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.comms-dir-out{background:rgba(96,165,250,.12);color:#60a5fa;border:1px solid rgba(96,165,250,.2)}
.comms-ts{font-size:10px;color:var(--text3);margin-left:auto}
.comms-body{font-size:12px;color:var(--text2);line-height:1.6;word-break:break-word;font-family:'DM Sans',sans-serif}
.comms-body,.comms-body *{font-family:'DM Sans',sans-serif !important}
.comms-body img{max-width:100%;border-radius:6px;margin-top:4px}
.comms-actions{display:flex;gap:4px;margin-top:8px;opacity:0;transition:opacity .15s}
.comms-entry:hover .comms-actions{opacity:1}
.comms-act-btn{background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;color:var(--text3);padding:3px 8px;font-size:10px;font-weight:600;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:4px;transition:all .15s}
.comms-act-btn:hover{background:rgba(255,255,255,.08);color:var(--text2);border-color:var(--border2)}
.comms-act-btn.del:hover{background:rgba(220,38,38,.1);color:#f87171;border-color:rgba(220,38,38,.2)}
.comms-reply-entry{background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.2);border-radius:7px;padding:7px 10px;margin-top:7px;font-size:11px;color:var(--text2)}
.comms-reply-label{font-size:9px;font-weight:700;color:#818cf8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:flex;align-items:center;gap:4px}
/* Channel + direction toggle buttons in compose */
.comms-ch-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text3);font-family:'DM Sans',sans-serif;transition:all .15s;white-space:nowrap}
.comms-ch-btn:hover{border-color:rgba(255,255,255,.25);color:var(--text2)}
.comms-ch-btn.active{background:rgba(13,148,136,.18);border-color:#0d9488;color:#2dd4bf}
.comms-dir-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:20px;font-size:10px;font-weight:600;cursor:pointer;border:1.5px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text3);font-family:'DM Sans',sans-serif;transition:all .15s}
.comms-dir-btn.active{background:rgba(99,102,241,.18);border-color:#6366f1;color:#818cf8}
/* Channel colour map */
.ch-email{background:rgba(59,130,246,.15);color:#60a5fa;border-color:rgba(59,130,246,.25)}
.ch-whatsapp{background:rgba(34,197,94,.15);color:#4ade80;border-color:rgba(34,197,94,.25)}
.ch-teams{background:rgba(249,115,22,.15);color:#fb923c;border-color:rgba(249,115,22,.25)}
.ch-call{background:rgba(251,191,36,.15);color:#fbbf24;border-color:rgba(251,191,36,.25)}
.ch-inperson{background:rgba(124,58,237,.15);color:#a78bfa;border-color:rgba(124,58,237,.25)}
.cl-insert-zone{height:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .15s,height .15s;position:relative;margin:2px 0}
.cl-insert-zone:hover{opacity:1}
.cl-insert-zone.svc-drag-over{opacity:1;height:36px;background:rgba(13,148,136,.07);border-radius:8px;border:1.5px dashed rgba(13,148,136,.5)}
.cl-insert-zone.svc-drag-over .cl-insert-zone-line{background:var(--teal)}
.cl-insert-zone.svc-drag-over .cl-insert-btn{background:var(--teal);border-color:var(--teal);color:#fff}
.cl-insert-zone-line{flex:1;height:1px;background:var(--border2)}
.cl-insert-btn{width:20px;height:20px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border2);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:14px;line-height:1;flex-shrink:0;transition:background .15s,color .15s}
.cl-insert-zone:hover .cl-insert-btn{background:var(--p);border-color:var(--p);color:#fff}
.cl-insert-zone:hover .cl-insert-zone-line{background:var(--p)}
.cl-items-empty{padding:14px 12px;text-align:center;color:var(--text3);font-size:11px;border:1.5px dashed var(--border);border-radius:8px;cursor:default;transition:background .15s,border-color .15s}
.cl-items-empty.svc-drag-over{background:rgba(13,148,136,.07);border-color:rgba(13,148,136,.5);color:var(--teal)}
.cl-item-drop-line{height:3px;background:var(--teal);border-radius:2px;margin:2px 0;display:none}
.cl-item-drop-line.show{display:block}

/* ── Column owner groups ── */
.col-group-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex-shrink:0;margin-right:8px}
.col-group-hdr{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border:1.5px solid var(--gc,#0d9488);border-bottom:none;border-radius:10px 10px 0 0;background:color-mix(in srgb,var(--gc,#0d9488) 8%,transparent);width:100%;box-sizing:border-box}
.col-group-bracket-l{width:10px;height:10px;border-left:2px solid var(--gc,#0d9488);border-top:2px solid var(--gc,#0d9488);border-radius:4px 0 0 0;flex-shrink:0}
.col-group-bracket-r{width:10px;height:10px;border-right:2px solid var(--gc,#0d9488);border-top:2px solid var(--gc,#0d9488);border-radius:0 4px 0 0;flex-shrink:0;margin-left:auto}
.col-group-name{font-size:11px;font-weight:700;color:var(--gc,#0d9488);letter-spacing:.06em;text-transform:uppercase;flex:1}
.col-group-avatar{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--gc,#0d9488) 20%,transparent);border:1.5px solid var(--gc,#0d9488);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--gc,#0d9488);flex-shrink:0;overflow:hidden}
.col-group-avatar img{width:100%;height:100%;object-fit:cover}
.col-group-add{height:22px;padding:0 8px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:4px;color:var(--text3);font-size:10px;font-weight:600;font-family:'DM Sans',sans-serif;transition:all .15s;flex-shrink:0;white-space:nowrap}
.col-group-add:hover{background:var(--gc,#0d9488);border-color:var(--gc,#0d9488);color:#fff}
.col-group-add .mi{font-size:12px}
.col-group-del{height:22px;width:22px;padding:0;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3);font-family:'DM Sans',sans-serif;transition:all .15s;flex-shrink:0}
.col-group-del:hover{background:rgba(248,113,113,.18);border-color:rgba(248,113,113,.4);color:#f87171}
.col-group-del .mi{font-size:13px}
.col-group-cols{display:flex;gap:16px;align-items:flex-start;flex-shrink:0;border:1.5px solid var(--gc,#0d9488);border-top:none;border-radius:0 0 10px 10px;padding:10px 10px 6px;background:color-mix(in srgb,var(--gc,#0d9488) 3%,transparent)}

#ctl-body, #ctl-body *:not(.mi):not(.material-symbols-outlined){font-family:'DM Sans',sans-serif !important}
#ctl-modal-inner{font-family:'DM Sans',sans-serif}

/* ── Card modal section collapse toggles ── */
.mc-section{margin-bottom:12px;border-radius:10px;background:rgba(255,255,255,.03);border:1.5px solid var(--border);overflow:hidden}
.mc-section-hdr{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;user-select:none;transition:background .15s}
.mc-section-hdr:hover{background:rgba(255,255,255,.04)}
.mc-section-hdr .mc-s-icon{color:var(--text3);font-size:15px;flex-shrink:0}
.mc-section-hdr .mc-s-label{font-size:12px;font-weight:600;color:var(--text2);flex:1}
.mc-section-hdr .mc-s-badge{font-size:10px;font-weight:700;color:var(--text3);background:rgba(255,255,255,.07);padding:1px 7px;border-radius:8px}
.mc-section-hdr .mc-s-chevron{color:var(--text3);font-size:16px;transition:transform .2s;flex-shrink:0}
.mc-section-hdr.open .mc-s-chevron{transform:rotate(90deg)}
.mc-section-body{padding:10px 14px 12px;border-top:1px solid var(--border)}
.mc-section-body.hidden{display:none}
/* ── WYSIWYG description ── */
.desc-toolbar{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:6px;padding:4px 6px;background:rgba(255,255,255,.03);border-radius:7px 7px 0 0;border:1.5px solid var(--border);border-bottom:none}
.dt-btn{background:none;border:none;cursor:pointer;color:var(--text3);padding:3px 6px;border-radius:5px;font-size:12px;font-family:'DM Sans',sans-serif;transition:all .15s;display:flex;align-items:center;line-height:1}
.dt-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.dt-btn.active{background:rgba(255,255,255,.1);color:#fff}
.dt-sep{width:1px;background:var(--border);margin:2px 3px;align-self:stretch}
.mc-desc-editor{min-height:100px;max-height:320px;overflow-y:auto;padding:10px 12px;background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:0 0 8px 8px;color:var(--text);font-size:13px;font-family:'DM Sans',sans-serif;line-height:1.6;outline:none;cursor:text;transition:border-color .15s}
.mc-desc-editor:focus{border-color:rgba(255,255,255,.2)}
.mc-desc-editor:empty:before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.mc-desc-editor b,.mc-desc-editor strong{font-weight:700;color:#fff}
.mc-desc-editor i,.mc-desc-editor em{font-style:italic}
.mc-desc-editor u{text-decoration:underline}
.mc-desc-editor ul,.mc-desc-editor ol{margin:4px 0 4px 18px}
.mc-desc-editor li{margin:2px 0}
/* ── Checklist task detail toggle ── */
.cl-detail-toggle{background:none;border:none;cursor:pointer;color:var(--text3);padding:2px 3px;border-radius:4px;transition:all .15s;display:flex;align-items:center;flex-shrink:0}
.cl-detail-toggle:hover{color:var(--p);background:rgba(99,102,241,.12)}
.cl-detail-toggle.active{color:var(--p)}
.cl-detail-row{padding:3px 0 3px 26px;display:flex;gap:8px;align-items:center}
.cl-detail-row.hidden{display:none}
/* ── Custom fields fixed grid ── */
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.cf-item-fixed{background:rgba(255,255,255,.03);border:1.5px solid var(--border);border-radius:8px;padding:7px 10px;transition:border-color .15s}
.cf-item-fixed:focus-within{border-color:rgba(255,255,255,.18)}
.cf-item-fixed .cf-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;display:flex;align-items:center;gap:4px}
.cf-item-fixed input,.cf-item-fixed textarea{background:none;border:none;outline:none;color:var(--text);font-size:12px;font-family:'DM Sans',sans-serif;width:100%;padding:0}
.cf-item-fixed input::placeholder,.cf-item-fixed textarea::placeholder{color:var(--text3)}
.cl-drag{color:var(--text3);cursor:grab;font-size:15px;padding:4px 2px;flex-shrink:0;user-select:none;display:flex;align-items:center;}
.cl-drag:active{cursor:grabbing;}

.cl-item-drag{color:var(--text3);cursor:grab;font-size:15px;padding:2px 2px;flex-shrink:0;user-select:none;display:flex;align-items:center;opacity:.5;}
.cl-item-drag:hover{opacity:1;}
.cl-item-drag:active{cursor:grabbing;}

/* ── Light mode: right panel ── */
html.light-mode .modal-act-col{background:#f0f4f8;border-left-color:rgba(0,0,0,.1);}
html.light-mode .act-col-tabs{background:#e8eef5;border-bottom-color:rgba(0,0,0,.1);}
html.light-mode .act-col-tab{color:var(--text3);}
html.light-mode .act-col-tab.active{color:var(--p);background:rgba(99,102,241,.08);}
html.light-mode .act-col-body{background:#f0f4f8;}
html.light-mode .act-panel{background:#f0f4f8;}
html.light-mode .act-panel-title{color:var(--text);}

/* ── Light mode: mini timer ── */

/* ── Light mode: timer buttons ── */
html.light-mode .tbtn-start{background:rgba(22,163,74,.12);color:#16a34a;border-color:rgba(22,163,74,.3)}
html.light-mode .tbtn-start:hover{background:rgba(22,163,74,.2)}
html.light-mode .tbtn-stop{background:rgba(220,38,38,.1);color:#dc2626;border-color:rgba(220,38,38,.25)}
html.light-mode .tbtn-stop:hover{background:rgba(220,38,38,.2)}
html.light-mode .tbtn-add{background:rgba(0,0,0,.06);color:var(--text2);border-color:rgba(0,0,0,.12)}

/* ── Checklist ... menu items ── */
.cl-menu-item:hover{background:rgba(255,255,255,.07) !important;}
html.light-mode .cl-menu-item:hover{background:rgba(0,0,0,.07) !important;}

/* ── Priority & aging ── */
.card-prio-chip{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 6px 2px 5px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em}
.card-age-badge{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px}

/* ── Priority picker (dropdown) ── */
.prio-btn{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:all .12s;width:100%;font-family:inherit;text-align:left}
.prio-btn.prio-btn-compact{width:auto;padding:5px 9px;font-size:11px;gap:4px;border-radius:7px}
.prio-btn.prio-btn-compact .mi{font-size:12px}
#mc-prio-wrap .prio-dd{width:160px;left:auto;right:0}
#mc-followup-wrap .prio-dd{width:210px;left:auto;right:0;white-space:nowrap}
.prio-btn:hover{filter:brightness(1.15)}
.prio-btn .mi{font-size:14px}
.prio-btn .cs-btn-arrow{opacity:.5;font-size:10px}
.prio-dd{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg2,#161b27);border:1px solid rgba(255,255,255,.1);border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:100;overflow:hidden}
.prio-dd-item{display:flex;align-items:center;gap:6px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .1s}
.prio-dd-item:hover{background:rgba(255,255,255,.06)}
.prio-dd-item-active{background:rgba(255,255,255,.04)}
.prio-dd-item .mi{font-size:14px}

/* ── Archive "Basement" view ── */
.arch-overlay{position:fixed;inset:0;z-index:700;display:none;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg,#0a0610 0%,#110a1a 30%,#080510 100%)}
.arch-overlay.open{display:flex}
.arch-overlay::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  opacity:.35;mix-blend-mode:overlay}
.arch-overlay::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%,rgba(139,92,246,.04) 0%,transparent 60%),
    radial-gradient(ellipse at 80% 10%,rgba(167,139,250,.03) 0%,transparent 40%)}
.arch-dialog{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1}
.arch-title{padding:16px 24px;display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:700;color:#a78bfa;font-family:'DM Sans',sans-serif;
  border-bottom:1px solid rgba(139,92,246,.15);flex-shrink:0;
  text-shadow:0 0 20px rgba(139,92,246,.3)}
.arch-title .mi{color:#8b5cf6;font-size:22px}
.arch-list{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start}
.arch-item{width:220px;padding:14px;position:relative;border-radius:10px;cursor:grab;
  background:linear-gradient(145deg,rgba(25,18,40,.85),rgba(15,10,28,.9));
  border:1px solid rgba(139,92,246,.1);transition:transform .15s,box-shadow .2s;
  box-shadow:0 4px 16px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:6px;
  user-select:none;-webkit-user-select:none}
.arch-item:hover{box-shadow:0 8px 24px rgba(139,92,246,.1),0 8px 24px rgba(0,0,0,.4)}
.arch-item.shaking{cursor:grabbing}
.arch-item.dusted{border-color:rgba(139,92,246,.3)}
.arch-item .dust-layer{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:linear-gradient(135deg,rgba(60,40,100,.6),rgba(40,25,70,.7));
  transition:opacity .3s}
.arch-item .dust-grain{position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23g)' opacity='.15'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;transition:opacity .3s}
.arch-item-title{font-size:12px;font-weight:600;color:#c4b5fd;line-height:1.4}
.arch-item-meta{font-size:10px;color:#6d5a8a;display:flex;align-items:center;gap:6px}
.arch-item-age{font-size:9px;padding:1px 6px;border-radius:4px;font-weight:700}
.arch-btns{display:flex;gap:4px;margin-top:6px}
.arch-btns button{font-size:10px;padding:3px 8px;border-radius:6px;cursor:pointer;border:1px solid rgba(139,92,246,.2);
  background:rgba(139,92,246,.08);color:#a78bfa;font-family:inherit;font-weight:600;transition:all .15s}
.arch-btns button:hover{background:rgba(139,92,246,.18);border-color:rgba(139,92,246,.4)}
.arch-btns .arch-del{color:#f87171;border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.06)}
.arch-btns .arch-del:hover{background:rgba(239,68,68,.15)}
/* Cobweb images from SVG files */
.arch-web-img{position:absolute;pointer-events:none;z-index:2;opacity:.08;
  filter:invert(47%) sepia(60%) saturate(5000%) hue-rotate(238deg) brightness(90%) contrast(90%)}
/* Hanging spiders */
.arch-spider{position:absolute;pointer-events:none;z-index:3}
.arch-spider-thread{width:1px;background:linear-gradient(180deg,rgba(139,92,246,.2),rgba(139,92,246,.06));position:absolute;top:0;left:50%;transform:translateX(-50%)}
.arch-spider-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);animation:spiderSway 4s ease-in-out infinite}
@keyframes spiderSway{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(-50%) rotate(5deg)}75%{transform:translateX(-50%) rotate(-5deg)}}
/* Dust particles */
.dust-particle{position:absolute;border-radius:50%;pointer-events:none;animation:dustFloat linear infinite;opacity:0}
@keyframes dustFloat{0%{opacity:0;transform:translateY(0) translateX(0)}10%{opacity:.35}90%{opacity:.25}100%{opacity:0;transform:translateY(-80px) translateX(20px)}}
@keyframes dustShake{0%{transform:rotate(0)}15%{transform:rotate(-3deg) scale(1.02)}30%{transform:rotate(2deg)}45%{transform:rotate(-2deg)}60%{transform:rotate(1deg)}75%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
/* Search bar in basement */
.arch-search{margin:0;padding:0 24px 12px;flex-shrink:0;display:flex;gap:10px;align-items:center}
.arch-search input{flex:1;max-width:300px;height:30px;border-radius:8px;border:1px solid rgba(139,92,246,.2);
  background:rgba(0,0,0,.3);color:#c4b5fd;font-size:12px;padding:0 10px;font-family:inherit;outline:none}
.arch-search input::placeholder{color:rgba(139,92,246,.3)}
.arch-search input:focus{border-color:rgba(139,92,246,.4);box-shadow:0 0 12px rgba(139,92,246,.1)}

/* ── Quick search (Ctrl+K) ── */
.qs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:800;display:none;align-items:flex-start;justify-content:center;padding-top:12vh}
.qs-overlay.open{display:flex}
.qs-box{background:var(--bg2,#161b27);border:1px solid rgba(255,255,255,.1);border-radius:12px;width:560px;max-width:92vw;box-shadow:0 16px 48px rgba(0,0,0,.5);overflow:hidden}
.qs-inp-wrap{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06)}
.qs-inp-wrap .mi{color:var(--text3,#64748b)}
.qs-inp{flex:1;background:transparent;border:none;outline:none;font-size:15px;color:var(--text,#e2e8f0);font-family:inherit}
.qs-hint{font-size:10px;color:var(--text3,#64748b);padding:2px 6px;border-radius:4px;background:rgba(255,255,255,.05)}
.qs-list{max-height:400px;overflow-y:auto}
.qs-item{padding:8px 14px;border-bottom:1px solid rgba(255,255,255,.04);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .1s}
.qs-item:hover,.qs-item.active{background:rgba(167,139,250,.12)}
.qs-item-title{flex:1;font-size:12px;font-weight:600;color:var(--text,#e2e8f0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qs-item-path{font-size:10px;color:var(--text3,#64748b);white-space:nowrap}
.qs-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.qs-empty{padding:20px 14px;text-align:center;font-size:12px;color:var(--text3,#64748b)}

/* ── Template picker overlay ── */
.tpl-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:700;display:none;align-items:center;justify-content:center}
.tpl-overlay.open{display:flex}
.tpl-dialog{background:var(--bg2,#161b27);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;width:640px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.tpl-title{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text,#f1f5f9)}
.tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto}
.tpl-card{background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);border-radius:10px;padding:14px;cursor:pointer;transition:all .15s;position:relative}
.tpl-card:hover{border-color:#a78bfa;background:rgba(167,139,250,.06);transform:translateY(-1px)}
.tpl-card-icon{font-size:24px;margin-bottom:6px;opacity:.6;color:#a78bfa}
.tpl-card-name{font-size:13px;font-weight:700;color:var(--text,#e2e8f0);margin-bottom:3px}
.tpl-card-desc{font-size:10px;color:var(--text3,#64748b);line-height:1.4}
.tpl-del-btn{position:absolute;top:6px;right:6px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);color:#f87171;border-radius:5px;padding:2px 4px;cursor:pointer;display:flex;align-items:center;opacity:0;transition:opacity .15s}
.tpl-card:hover .tpl-del-btn{opacity:1}
.tpl-del-btn:hover{background:rgba(239,68,68,.2)}

/* ── Link picker ── */
.link-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:700;align-items:center;justify-content:center}
.link-dialog{background:var(--bg2,#161b27);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;width:560px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.link-pick-row:hover{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.3)!important}

/* ── Bulk select mode ── */
#tb-bulk-btn.active{background:rgba(167,139,250,.18);color:#a78bfa;border-color:rgba(167,139,250,.35)}
.bulk-cb{position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:5px;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;color:#fff}
.bulk-cb:hover{border-color:#a78bfa;background:rgba(167,139,250,.3)}
.card.bulk-selected{outline:2px solid #a78bfa;outline-offset:-1px}
.card.bulk-selected .bulk-cb{background:#a78bfa;border-color:#a78bfa}
.bulk-bar{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:8px;background:var(--bg2,#161b27);border:1.5px solid rgba(167,139,250,.3);border-radius:12px;padding:10px 14px;box-shadow:0 12px 40px rgba(0,0,0,.5);min-width:min(600px, 90vw)}

/* ── Links box (inline) ── */
.mc-links-box{padding:10px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px}

/* ── Card context menu ── */
.ctx-mi{padding:7px 10px;font-size:11px;color:var(--text);cursor:pointer;border-radius:5px;display:flex;align-items:center;gap:8px;transition:background .1s}
.ctx-mi:hover{background:rgba(167,139,250,.12)}
.ctx-mi.danger{color:#f87171}

/* ── Client filter bar (row 2) theme-aware ── */
.filter-bar-2{background:#070f1c;border-bottom:1px solid rgba(255,255,255,.05)}
html.light-mode .filter-bar-2{background:#e8e8f0;border-bottom-color:rgba(0,0,0,.06)}
.fp2{display:inline-flex;align-items:center;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;height:22px;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap;background:rgba(255,255,255,.04);color:var(--text3);font-family:'DM Sans',sans-serif}
.fp2:hover{background:rgba(255,255,255,.08);color:var(--text2)}
.fp2.active{color:#fff;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08)}
html.light-mode .fp2{color:#475569}
html.light-mode .fp2.active{color:#111827}

/* ── Column group subtitle (daily joke) ── */
.col-group-sub{font-weight:500;font-style:italic;font-size:.9em;margin-left:5px;opacity:.75;letter-spacing:.01em;text-transform:none}

/* ── Light-mode readability for group name + filter bar ── */
html.light-mode .col-group-name{color:color-mix(in srgb,var(--gc,#0d9488) 75%,#000 25%)}
html.light-mode .col-group-sub{color:#475569;opacity:.85}
html.light-mode .member-sidebar .fp{color:#475569}
html.light-mode .member-sidebar .fp.active{color:#111827}
.filt-bar-label{color:rgba(255,255,255,.35)}
html.light-mode .filt-bar-label{color:#64748b}

/* ── Responsive: 1280px and below ── */
@media (max-width: 1280px) {
  .modal { min-width: min(700px, 95vw); }
  .auto-panel { width: min(700px, 90vw); }
  .labels-panel { width: min(380px, 85vw); }
  .filter-panel { min-width: min(480px, 85vw); }
}

/* Card more-actions menu */
.mc-more-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:none;cursor:pointer;font-size:12px;font-weight:500;color:var(--text2);font-family:'DM Sans',sans-serif;border-radius:7px;transition:background .1s;text-align:left}
.mc-more-item:hover{background:rgba(255,255,255,.07);color:#fff}