:root{
    /* ---- Dark theme (default) ---- */
    --bg-page:    #13131a;
    --bg-panel:   #1a1a24;
    --bg-card:    #1e1e2a;
    --bg-input:   rgba(255,255,255,0.04);
    --bg-hover:   rgba(255,255,255,0.045);
    --border:     rgba(255,255,255,0.09);
    --border-md:  rgba(255,255,255,0.14);
    --accent:     #6c63f5;
    --accent-dim: rgba(108,99,245,0.16);
    --accent-bd:  rgba(108,99,245,0.4);
    --accent-txt: #a09af5;
    --accent-lt:  #c8c4f8;
    --accent2:    #ff8a4c;
    --accent2-dim: rgba(255,138,76,0.14);
    --header-today-bg: #2f2416;   /* opaque — sticky header must never let scrolled content show through */
    --header-weekend-bg: #201f2b; /* opaque */
    --green:      #5dcaa5;
    --green-dim:  rgba(93,202,165,0.15);
    --red:        #f37272;
    --red-dim:    rgba(243,114,114,0.16);
    --yellow:     #eab308;
    --blue:       #3b82f6;
    --text-1:     #eaeaf0;
    --text-2:     rgba(255,255,255,0.6);
    --text-3:     rgba(255,255,255,0.4);
    --text-4:     rgba(255,255,255,0.24);
    --shadow-modal: 0 24px 60px rgba(0,0,0,0.5);
    --shadow-card:  0 1px 3px rgba(0,0,0,0.24);
    --font: 'DM Sans', system-ui, sans-serif;
    --sans: var(--font);
    --mono: var(--font);
  }
  html[data-theme="light"]{
    --bg-page:    #f2f3f8;
    --bg-panel:   #ffffff;
    --bg-card:    #ffffff;
    --bg-input:   rgba(20,20,40,0.035);
    --bg-hover:   rgba(20,20,40,0.035);
    --border:     rgba(20,20,45,0.09);
    --border-md:  rgba(20,20,45,0.15);
    --accent:     #6c63f5;
    --accent-dim: rgba(108,99,245,0.1);
    --accent-bd:  rgba(108,99,245,0.4);
    --accent-txt: #5b4fe8;
    --accent-lt:  #4338ca;
    --accent2:    #e8672e;
    --accent2-dim: rgba(232,103,46,0.1);
    --header-today-bg: #fbe7d9;   /* opaque — sticky header must never let scrolled content show through */
    --header-weekend-bg: #eceef5; /* opaque */
    --green:      #1f9d75;
    --green-dim:  rgba(31,157,117,0.1);
    --red:        #dc4a4a;
    --red-dim:    rgba(220,74,74,0.1);
    --yellow:     #ca8a04;
    --blue:       #2563eb;
    --text-1:     #1b1c26;
    --text-2:     rgba(20,20,35,0.62);
    --text-3:     rgba(20,20,35,0.42);
    --text-4:     rgba(20,20,35,0.28);
    --shadow-modal: 0 24px 60px rgba(30,30,50,0.22);
    --shadow-card:  0 1px 3px rgba(30,30,50,0.08);
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;
    font-family:var(--font);
    background:var(--bg-page);
    color:var(--text-1);
    display:flex;
    height:100vh;
    overflow:hidden;
    transition:background .2s, color .2s;
  }

  /* ---------------- SIDEBAR ---------------- */
  .sidebar{
    width:260px;
    flex-shrink:0;
    background:var(--bg-panel);
    color:var(--text-2);
    display:flex;
    flex-direction:column;
    border-right:0.5px solid var(--border);
    overflow:hidden;
  }
  .sidebar-head{
    padding:14px 18px;
    border-bottom:0.5px solid var(--border);
  }
  .sidebar-eyebrow{
    font-family:var(--font);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent2);
    display:flex;
    align-items:center;
    gap:6px;
  }
  .sidebar-eyebrow::after{
    content:'';
    width:6px;height:12px;
    background:var(--accent2);
    animation:blink 1.1s steps(1) infinite;
  }
  @keyframes blink{50%{opacity:0;}}
  .sidebar-title{
    font-size:15px;
    font-weight:600;
    color:var(--text-1);
  }
  .sidebar-sub{
    font-size:12px;
    color:var(--text-3);
    margin-top:3px;
    line-height:1.4;
  }

  .filter-row{
    padding:12px 18px;
    border-bottom:0.5px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .filter-row label{
    font-family:var(--font);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-4);
  }
  .filter-row select{
    width:100%;
    background:var(--bg-input);
    border:0.5px solid var(--border-md);
    color:var(--text-1);
    font-family:var(--font);
    font-size:12.5px;
    font-weight:500;
    padding:7px 12px;
    border-radius:20px;
    cursor:pointer;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .filter-row select:hover{background:var(--bg-hover);}
  .filter-row select:focus{border-color:var(--accent-bd);}

  .custom-form{
    border-bottom:0.5px solid var(--border);
  }
  .custom-form-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    padding:12px 18px;
    cursor:pointer;
    text-align:left;
  }
  .custom-form-toggle .palette-label{margin:0;}
  .cf-chevron{
    color:var(--text-4);
    flex-shrink:0;
    transition:transform .18s;
  }
  .custom-form.open .cf-chevron{transform:rotate(180deg);}
  .custom-form-body{
    display:none;
    padding:0 18px 14px;
  }
  .custom-form.open .custom-form-body{display:block;}
  .cf-input{
    width:100%;
    background:var(--bg-input);
    border:0.5px solid var(--border-md);
    color:var(--text-1);
    font-family:var(--font);
    font-size:12px;
    padding:7px 12px;
    border-radius:20px;
    margin-bottom:7px;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .cf-input:hover{background:var(--bg-hover);}
  .cf-input:focus{border-color:var(--accent-bd);}
  .cf-row{display:flex; gap:6px; margin-bottom:6px;}
  .cf-select{
    flex:1;
    min-width:0;
    background:var(--bg-input);
    border:0.5px solid var(--border-md);
    color:var(--text-1);
    font-family:var(--font);
    font-size:11px;
    padding:6px 10px;
    border-radius:20px;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .cf-select:hover{background:var(--bg-hover);}
  .cf-num{
    width:58px;
    flex-shrink:0;
    background:var(--bg-input);
    border:0.5px solid var(--border-md);
    color:var(--text-1);
    font-family:var(--font);
    font-size:11.5px;
    padding:6px 10px;
    border-radius:20px;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .cf-num:hover{background:var(--bg-hover);}
  .cf-hint{
    font-size:10px;
    color:var(--text-4);
    line-height:1.4;
    margin-bottom:9px;
  }
  .cf-add{width:100%; font-size:12px; padding:8px;}

  .palette{
    padding:14px 14px 6px;
    overflow-y:auto;
    flex:1;
  }
  .palette-label{
    font-family:var(--font);
    font-size:10.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--text-4);
    margin:10px 4px 8px;
  }
  .palette-subheading{
    font-family:var(--font);
    font-size:9.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-4);
    margin:14px 2px 7px;
    padding-top:10px;
    border-top:0.5px dashed var(--border);
  }
  .palette-subheading:first-of-type{
    border-top:none;
    padding-top:0;
    margin-top:2px;
  }
  .palette-project-heading{
    font-size:12px;
    font-weight:700;
    color:var(--text-1);
    margin:16px 4px 6px;
    padding-top:12px;
    border-top:0.5px solid var(--border);
  }
  .palette-project-heading:first-of-type{
    border-top:none;
    padding-top:0;
    margin-top:0;
  }
  .drag-card{
    background:var(--bg-card);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:9px 10px 8px;
    margin-bottom:8px;
    cursor:grab;
    transition:border-color .15s, transform .12s, box-shadow .15s, background .12s;
  }
  .drag-card:hover{
    border-color:var(--accent-bd);
    background:var(--bg-hover);
    box-shadow:0 4px 14px rgba(108,99,245,0.16);
  }
  .drag-card:active{cursor:grabbing; transform:scale(0.98);}
  .drag-card.dragging{opacity:0.4;}
  .card-top{
    display:flex;
    align-items:center;
    gap:7px;
  }
  .dot{
    width:9px;height:9px;
    border-radius:3px;
    flex-shrink:0;
  }
  .card-label{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-1);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:1;
    min-width:0;
  }
  .card-remove, .card-edit, .card-info{
    background:none;
    border:none;
    color:var(--text-4);
    font-size:13px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
    flex-shrink:0;
  }
  .card-remove{font-size:14px;}
  .card-remove:hover{color:var(--red);}
  .card-edit:hover{color:var(--text-1);}
  .card-info{display:flex; align-items:center;}
  .card-info i{font-size:14px;}
  .card-info:hover{color:var(--accent-txt);}
  .card-meta{
    font-size:10px;
    color:var(--text-4);
    margin-top:5px;
  }
  .drag-card.editing{cursor:default;}
  .drag-card.editing .cf-input,
  .drag-card.editing .cf-select,
  .drag-card.editing .cf-num{margin-bottom:6px;}
  .cf-edit-actions{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin-top:2px;
  }
  .cf-edit-actions .btn{padding:5px 10px; font-size:11.5px;}

  .sidebar-hint{
    border-top:0.5px solid var(--border);
  }
  .sidebar-hint-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:none;
    border:none;
    padding:12px 18px;
    cursor:pointer;
    text-align:left;
  }
  .sidebar-hint-toggle .palette-label{margin:0;}
  .sidebar-hint.open .cf-chevron{transform:rotate(180deg);}
  .sidebar-hint-body{
    display:none;
    padding:0 18px 16px;
    font-size:11px;
    color:var(--text-3);
    line-height:1.5;
  }
  .sidebar-hint.open .sidebar-hint-body{display:block;}
  .sidebar-hint-body b{color:var(--text-1);}

  .team-legend{
    padding:10px 18px 4px;
    border-top:0.5px solid var(--border);
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .team-chip{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--text-3);
  }
  .team-chip.offline .avatar{
    filter:grayscale(85%);
    opacity:0.45;
  }
  .team-chip.offline{color:var(--text-4);}
  .team-chip.online .avatar{
    box-shadow:0 0 0 1px rgba(255,255,255,0.3), 0 0 0 3px var(--green-dim);
  }
  .avatar{
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
    box-shadow:0 0 0 1px rgba(255,255,255,0.3);
  }
  .avatar.avatar-sm{width:18px; height:18px; font-size:9px;}

  /* ---------------- MAIN ---------------- */
  .main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .toolbar{
    padding:16px 22px;
    background:var(--bg-panel);
    border-bottom:0.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
  }
  .tb-left h1{
    font-size:16px;
    margin:0;
    font-weight:600;
    letter-spacing:-.01em;
    color:var(--text-1);
  }
  .tb-left p{
    margin:2px 0 0;
    font-size:12px;
    color:var(--text-3);
  }
  .tb-right{display:flex; gap:8px; align-items:center;}
  .tb-filter{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin-right:4px;
  }
  .tb-filter label{
    font-family:var(--font);
    font-size:9px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--text-4);
  }
  .tb-filter select{
    font-family:var(--font);
    font-size:12.5px;
    font-weight:500;
    padding:6px 12px;
    border-radius:20px;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-1);
    cursor:pointer;
    outline:none;
    min-width:170px;
    transition:background .12s, border-color .12s;
  }
  .tb-filter select:hover{background:var(--bg-hover);}
  .tb-filter select:focus{border-color:var(--accent-bd);}
  .btn{
    font-family:var(--font);
    font-size:12.5px;
    font-weight:500;
    padding:8px 15px;
    border-radius:20px;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-1);
    cursor:pointer;
    transition:background .12s, border-color .12s, color .12s;
  }
  .btn:hover{background:var(--bg-hover); border-color:var(--border-md);}
  .btn-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .btn-primary:hover{background:#7a71ff; border-color:#7a71ff;}

  .view-toggle{
    display:flex;
    align-items:center;
    background:var(--bg-input);
    border:0.5px solid var(--border-md);
    border-radius:20px;
    padding:3px;
    gap:2px;
    flex-shrink:0;
  }
  .view-toggle-btn{
    display:flex;
    align-items:center;
    gap:5px;
    border:none;
    background:none;
    color:var(--text-3);
    font-family:var(--font);
    font-size:12px;
    font-weight:600;
    padding:6px 13px;
    border-radius:16px;
    cursor:pointer;
    transition:background .12s, color .12s;
    white-space:nowrap;
  }
  .view-toggle-btn:hover{color:var(--text-1);}
  .view-toggle-btn.active{
    background:var(--accent);
    color:#fff;
  }
  .view-toggle-btn i{font-size:14px;}

  .page-nav{
    display:flex;
    align-items:center;
    gap:4px;
  }
  .page-nav-btn{
    width:34px; height:34px;
    border-radius:50%;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    font-size:15px;
    transition:background .12s, color .12s, border-color .12s, opacity .12s;
  }
  .page-nav-btn:hover{background:var(--bg-hover); color:var(--text-1);}
  .page-nav-btn:disabled{opacity:.35; cursor:not-allowed;}
  .page-nav-btn:disabled:hover{background:var(--bg-input); color:var(--text-2);}

  .theme-toggle{
    width:34px; height:34px;
    border-radius:50%;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    font-size:16px;
    transition:background .12s, color .12s, border-color .12s;
  }
  .theme-toggle:hover{background:var(--bg-hover); color:var(--text-1);}
  .theme-toggle .ti-sun{display:none;}
  html[data-theme="light"] .theme-toggle .ti-sun{display:inline;}
  html[data-theme="light"] .theme-toggle .ti-moon{display:none;}

  .legend{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    padding:8px 22px;
    background:var(--bg-panel);
    border-bottom:0.5px solid var(--border);
    font-size:11px;
    color:var(--text-3);
  }
  .legend span{display:flex; align-items:center; gap:5px;}
  .legend i{width:8px;height:8px;border-radius:2px;display:inline-block;}

  /* ---------------- PLANNER ---------------- */
  .planner-scroll{
    flex:1;
    overflow:auto;
    background:var(--bg-card);
    position:relative;
  }
  .planner-flex{
    display:flex;
    width:max-content;
    min-width:100%;
  }
  .planner-names{
    position:sticky;
    left:0;
    z-index:6;
    width:230px;
    flex-shrink:0;
    background:var(--bg-card);
    border-right:0.5px solid var(--border);
  }
  .name-header{
    position:sticky;
    top:0;
    z-index:7;
    height:77px;
    background:var(--bg-card);
    border-bottom:0.5px solid var(--border);
    display:flex;
    align-items:flex-end;
    padding:0 12px 8px;
  }
  .name-header span{
    font-family:var(--font);
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#fff;
    background:var(--accent2);
    padding:2px 9px;
    border-radius:20px;
  }
  .name-row{
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border-bottom:0.5px solid var(--border);
    font-size:12.5px;
    font-weight:500;
    color:var(--text-1);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .name-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 12px 0 12px;
    background:var(--bg-hover);
    border-bottom:0.5px solid var(--border);
    border-top:0.5px solid var(--border);
  }
  .name-section-label{
    font-size:12px;
    font-weight:700;
    color:var(--text-1);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  .name-section-label-btn{
    background:none;
    border:none;
    padding:0;
    font-family:var(--font);
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:7px;
    flex:1;
    min-width:0;
  }
  .name-section-label-btn:hover{color:var(--accent-txt);}
  .name-section-label-btn::before{
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
    background:var(--yellow);
  }
  .name-section-label-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
    flex:1;
  }
  .name-section-label-btn.status-dot-New::before{background:var(--yellow);}
  .name-section-label-btn.status-dot-InProgress::before{background:var(--blue);}
  .name-section-label-btn.status-dot-Completed::before{background:var(--green);}
  .name-section-label-btn.status-dot-Overrun::before{background:var(--red);}
  .g-section-label-btn{
    background:none;
    border:none;
    padding:0;
    font:inherit;
    color:inherit;
    cursor:pointer;
  }
  .g-section-label-btn:hover{color:var(--accent-txt);}
  .name-section-add{
    flex-shrink:0;
    background:none;
    border:0.5px solid var(--border-md);
    border-radius:20px;
    color:var(--text-3);
    font-size:10px;
    font-weight:600;
    padding:3px 9px;
    cursor:pointer;
    transition:border-color .12s, color .12s;
  }
  .name-section-add:hover{border-color:var(--accent-bd); color:var(--accent-txt);}
  .name-row-section{padding-left:26px;}
  .name-row-section-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .name-row-section-delete{
    flex-shrink:0;
    background:none;
    border:none;
    color:var(--text-4);
    cursor:pointer;
    padding:2px;
    display:flex;
    align-items:center;
    opacity:0;
    transition:opacity .12s, color .12s;
  }
  .name-row-section:hover .name-row-section-delete,
  .name-row-section-delete:focus-visible{opacity:1;}
  .name-row-section-delete:hover{color:var(--red);}
  .name-row-section-delete i{font-size:13px;}
  .name-row-developer{font-weight:600;}
  .name-row-developer[data-developer-id="unassigned"]{color:var(--text-3); font-weight:500; font-style:italic;}
  .name-row input[type=checkbox]{accent-color:var(--accent); flex-shrink:0;}
  .name-row.row-active{
    background:var(--accent-dim);
    box-shadow:inset 2px 0 0 var(--accent);
  }
  .add-row{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 12px;
  }
  .add-row input{
    width:100%;
    border:0.5px dashed var(--border-md);
    border-radius:20px;
    padding:6px 12px;
    font-size:12px;
    font-family:var(--font);
    background:transparent;
    color:var(--text-1);
    outline:none;
    transition:border-color .12s;
  }
  .add-row input:focus{border-color:var(--accent-bd);}
  .add-row button{width:100%; padding:7px; font-size:12px;}

  .planner-grid{
    display:grid;
    grid-auto-rows:min-content;
  }
  .g-cell{
    border-bottom:0.5px solid var(--border);
    border-right:0.5px solid var(--border);
    position:relative;
  }
  .g-section{
    background:var(--bg-hover);
    border-bottom:0.5px solid var(--border);
    border-top:0.5px solid var(--border);
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .g-section-label{
    position:sticky;
    left:12px;
    display:inline-block;
    font-size:11px;
    font-weight:700;
    color:var(--text-2);
    white-space:nowrap;
  }
  .g-cell.weekend{background:rgba(255,255,255,0.02);}
  html[data-theme="light"] .g-cell.weekend{background:rgba(20,20,40,0.02);}
  .g-cell.today-col{background:var(--accent2-dim);}
  .g-cell.drag-over{background:var(--accent-dim);}
  .g-cell.not-allowed{
    background:repeating-linear-gradient(45deg, var(--red-dim), var(--red-dim) 5px, transparent 5px, transparent 10px);
    cursor:not-allowed;
  }
  .g-cell.reject{background:var(--red-dim) !important;}
  .g-cell.row-active{background:var(--accent-dim);}
  .g-cell.row-active.weekend{background:var(--accent-dim);}

  .h-month, .h-day, .h-ampm{
    position:sticky;
    background:var(--bg-card);
    z-index:4;
    border-bottom:0.5px solid var(--border);
    border-right:0.5px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font);
    overflow:hidden;
  }
  .h-month{top:0; height:26px; font-size:13px; font-weight:600; color:var(--text-1);}
  .h-day{top:26px; height:30px; font-size:16px; font-weight:700; flex-direction:column; line-height:1.1; color:var(--text-1);}
  .h-day small{font-size:10.5px; font-weight:500; color:var(--text-3); font-family:var(--font);}
  .h-ampm{top:56px; height:21px; font-size:11px; color:var(--text-3); font-weight:600;}
  .h-day.weekend, .h-ampm.weekend{background:var(--header-weekend-bg);}
  .h-day.today-col, .h-ampm.today-col{background:var(--header-today-bg); color:var(--accent2);}

  .block{
    margin:0 2px;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    padding:3px 7px;
    font-size:11.5px;
    font-weight:600;
    color:#fff;
    cursor:grab;
    z-index:2;
    box-shadow:var(--shadow-card);
    transition:transform .1s, opacity .1s;
  }
  .block-content{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
  }
  .block-progress-track{
    height:3px;
    border-radius:2px;
    background:rgba(255,255,255,0.32);
    overflow:hidden;
    flex-shrink:0;
  }
  .block-progress-fill{
    height:100%;
    border-radius:2px;
    background:#e8fff0;
  }
  .block:hover{transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.3);}
  .block:active{cursor:grabbing;}
  .block.block-dragging{opacity:0.35;}
  .block.dimmed{opacity:0.2;}
  .block.overrun{box-shadow:0 0 0 1.5px var(--bg-card), 0 0 0 3px var(--red), var(--shadow-card);}
  .block.remote-dragging{
    opacity:0.6;
    cursor:not-allowed;
    outline:2px dashed var(--accent);
    outline-offset:2px;
    animation:remoteDragPulse 1.1s ease-in-out infinite;
  }
  @keyframes remoteDragPulse{
    0%, 100% { outline-color: var(--accent); }
    50%      { outline-color: transparent; }
  }
  body.dnd-active .actual-marker{ pointer-events:none; }
  .actual-marker{
    align-self:end;
    justify-self:stretch;
    margin:0 1px 2px;
    height:19px;
    padding:0 3px;
    border-radius:5px;
    background:var(--bg-card);
    border:1.5px solid var(--text-4);
    color:var(--text-1);
    font-size:9.5px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    line-height:1;
    cursor:default;
    white-space:nowrap;
    overflow:hidden;
    z-index:1;
  }
  .actual-marker-avatar{
    width:14px;
    height:14px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:7.5px;
    font-weight:700;
    color:#fff;
    line-height:1;
    box-shadow:0 0 0 1px var(--bg-card);
  }
  .actual-marker-extra{
    font-size:9px;
    font-weight:700;
    color:var(--text-3);
    flex-shrink:0;
  }
  .actual-marker-text{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .block .block-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .block .avatar{margin-right:1px;}

  /* ---------------- MODAL ---------------- */
  .modal-overlay{
    position:fixed; inset:0;
    background:rgba(10,10,18,0.55);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50;
  }
  .modal-overlay.open{display:flex;}
  .modal-card{
    background:var(--bg-card);
    border:0.5px solid var(--border);
    border-radius:14px;
    padding:20px;
    width:290px;
    box-shadow:var(--shadow-modal);
  }
  .modal-card h3{margin:0 0 4px; font-size:14.5px; font-weight:700; color:var(--text-1);}
  .modal-sub{font-size:11.5px; color:var(--text-3); margin:0 0 14px; line-height:1.4;}
  .modal-sub.empty{color:var(--text-4); font-style:italic;}
  .modal-stats{
    display:flex;
    gap:10px;
    margin-bottom:16px;
  }
  .modal-stat{
    flex:1;
    background:var(--bg-input);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    text-align:center;
  }
  .modal-stat-value{display:block; font-size:17px; font-weight:700; color:var(--text-1);}
  .modal-stat-label{
    display:block;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-4);
    margin-top:2px;
  }
  .modal-field label{
    font-family:var(--font);
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-4);
    display:block;
    margin-bottom:5px;
  }
  .modal-field select{
    width:100%;
    padding:8px 12px;
    border:0.5px solid var(--border-md);
    border-radius:20px;
    font-size:12.5px;
    font-family:var(--font);
    background:var(--bg-input);
    color:var(--text-1);
    margin-bottom:16px;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .modal-field select:hover{background:var(--bg-hover);}
  .modal-field select:focus{border-color:var(--accent-bd);}
  .modal-alloc{
    text-transform:none;
    font-family:var(--font);
    color:var(--text-3);
    font-weight:500;
    letter-spacing:0;
  }
  .action-info-description{
    font-size:12.5px;
    line-height:1.55;
    color:var(--text-2);
    background:var(--bg-input);
    border:0.5px solid var(--border);
    border-radius:10px;
    padding:11px 13px;
    white-space:pre-wrap;
    max-height:220px;
    overflow-y:auto;
    margin-bottom:16px;
  }
  .action-info-description.empty{
    color:var(--text-4);
    font-style:italic;
  }
  .action-info-description-compact{
    max-height:70px;
    font-size:12px;
    padding:9px 12px;
    margin-bottom:14px;
  }
  .modal-entries{
    max-height:110px;
    overflow-y:auto;
    margin-bottom:8px;
  }
  .modal-entry-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:6px 0;
    border-bottom:0.5px solid var(--border);
    font-size:13px;
  }
  .modal-entry-row:last-child{border-bottom:none;}
  .modal-entry-left{display:flex; align-items:center; gap:6px; min-width:0;}
  .modal-entry-date{color:var(--text-1); font-weight:600; white-space:nowrap;}
  .modal-entry-time{color:var(--text-3); font-weight:500;}
  .modal-entry-feed-badge{
    display:inline-flex;
    align-items:center;
    margin-left:5px;
    color:var(--accent-txt);
  }
  .modal-entry-feed-badge i{font-size:11px;}
  .modal-entry-dev{color:var(--text-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .modal-entry-hours{color:var(--text-3); flex-shrink:0; margin-left:auto; padding-right:4px;}
  .modal-entry-remove{
    background:none;
    border:none;
    color:var(--text-3);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    padding:0 2px;
    flex-shrink:0;
  }
  .modal-entry-remove:hover{color:var(--red);}
  .modal-entry-empty{font-size:11.5px; color:var(--text-3); padding:4px 0 8px;}
  .modal-entry-add{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:6px;
  }
  .modal-entry-add input[type=date],
  .modal-entry-add input[type=time],
  .modal-entry-add input[type=number],
  .modal-entry-add select{
    border:0.5px solid var(--border-md);
    border-radius:20px;
    font-size:12px;
    font-family:var(--font);
    background:var(--bg-input);
    color:var(--text-1);
    padding:7px 10px;
    outline:none;
    min-width:0;
    transition:background .12s, border-color .12s;
  }
  .modal-entry-add input:hover, .modal-entry-add select:hover{background:var(--bg-hover);}
  .modal-entry-add input[type=date]{flex:1.6;}
  .modal-entry-add input[type=time]{flex:1;}
  .modal-entry-add input[type=number]{flex:1;}
  .modal-entry-add select{flex:1.4;}
  .modal-entry-add select#modalEntryHalf{flex:0 0 60px; padding-left:8px; padding-right:8px;}
  .modal-entry-add input:focus, .modal-entry-add select:focus{border-color:var(--accent-bd);}
  .modal-entry-arrow{color:var(--text-3); font-size:11px; flex-shrink:0;}
  .modal-entry-preview{
    font-size:11px;
    font-weight:600;
    color:var(--text-3);
    margin:-2px 0 8px;
    min-height:14px;
  }
  .modal-entry-preview.error{color:var(--red);}
  .modal-entry-add .btn{padding:7px 12px; font-size:12px; flex-shrink:0;}
  .modal-entry-hint{font-size:10.5px; color:var(--text-3); line-height:1.4; margin-bottom:16px;}
  .modal-actions{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .btn-danger{background:var(--red-dim); border-color:var(--red-dim); color:var(--red);}
  .btn-danger:hover{background:rgba(243,114,114,0.28);}

  /* ---------------- Scrollbars ---------------- */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(108,99,245,0.3); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(108,99,245,0.5); }

  /* ---------------- Login page ---------------- */
  .login-page{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
      radial-gradient(circle at 20% 15%, var(--accent-dim), transparent 55%),
      var(--bg-page);
  }
  .login-card{
    width:100%;
    max-width:340px;
    background:var(--bg-card);
    border:0.5px solid var(--border);
    border-radius:16px;
    padding:28px 26px 24px;
    box-shadow:var(--shadow-modal);
    display:flex;
    flex-direction:column;
  }
  .login-brand{margin-bottom:18px;}
  .login-eyebrow{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent2);
  }
  .login-brand h1{
    font-size:19px;
    font-weight:700;
    color:var(--text-1);
    margin:6px 0 4px;
  }
  .login-brand p{
    font-size:12.5px;
    color:var(--text-3);
    margin:0;
    line-height:1.4;
  }
  .login-card label{
    font-size:10.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--text-4);
    margin:14px 0 6px;
  }
  .login-card input[type=text],
  .login-card input[type=password]{
    width:100%;
    padding:10px 13px;
    border-radius:10px;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-1);
    font-family:var(--font);
    font-size:13.5px;
    outline:none;
    transition:border-color .12s, background .12s;
  }
  .login-card input[type=text]:hover,
  .login-card input[type=password]:hover{background:var(--bg-hover);}
  .login-card input[type=text]:focus,
  .login-card input[type=password]:focus{border-color:var(--accent-bd);}
  .login-submit{width:100%; margin-top:20px; padding:11px; font-size:13.5px; font-weight:600;}
  .login-error{
    background:var(--red-dim);
    color:var(--red);
    border-radius:8px;
    padding:9px 12px;
    font-size:12.5px;
    font-weight:500;
    margin-bottom:4px;
  }
  .login-hint{
    margin:18px 0 0;
    font-size:11px;
    color:var(--text-4);
    line-height:1.5;
    text-align:center;
  }
  .login-hint code{
    background:var(--bg-input);
    border-radius:4px;
    padding:1px 5px;
    font-family:var(--font);
    color:var(--text-2);
  }

  /* ---------------- Session controls (toolbar) ---------------- */
  .session-info{
    display:flex;
    align-items:center;
    gap:8px;
    padding-right:6px;
    margin-right:2px;
    border-right:0.5px solid var(--border);
  }
  .session-name{font-size:12px; font-weight:600; color:var(--text-2); white-space:nowrap;}
  .session-logout{
    background:none;
    border:none;
    color:var(--text-3);
    font-size:11.5px;
    font-weight:600;
    cursor:pointer;
    padding:0;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .session-logout:hover{color:var(--text-1);}

  /* ---------------- Right pull-out drawer (view & project settings) ---------------- */
  .right-drawer-backdrop{
    position:fixed;
    inset:0;
    background:rgba(10,10,18,0.45);
    z-index:58;
    display:none;
  }
  .right-drawer-backdrop.open{display:block;}
  .right-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:300px;
    max-width:88vw;
    background:var(--bg-panel);
    border-left:0.5px solid var(--border);
    box-shadow:var(--shadow-modal);
    z-index:59;
    display:flex;
    flex-direction:column;
    transform:translateX(100%);
    transition:transform .22s ease;
  }
  .right-drawer.open{transform:translateX(0);}
  .right-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:0.5px solid var(--border);
    flex-shrink:0;
  }
  .right-drawer-head h3{
    margin:0;
    font-size:14px;
    font-weight:700;
    color:var(--text-1);
  }
  .right-drawer-close{
    width:28px; height:28px;
    border-radius:50%;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:background .12s, color .12s;
  }
  .right-drawer-close:hover{background:var(--bg-hover); color:var(--text-1);}
  .right-drawer-body{
    padding:18px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .drawer-filter{padding:0;}
  .drawer-filter label{
    font-family:var(--font);
    font-size:10.5px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--text-4);
    display:block;
    margin-bottom:6px;
  }
  .drawer-filter select{
    width:100%;
    font-family:var(--font);
    font-size:13px;
    font-weight:500;
    padding:9px 13px;
    border-radius:20px;
    border:0.5px solid var(--border-md);
    background:var(--bg-input);
    color:var(--text-1);
    cursor:pointer;
    outline:none;
    transition:background .12s, border-color .12s;
  }
  .drawer-filter select:hover{background:var(--bg-hover);}
  .drawer-filter select:focus{border-color:var(--accent-bd);}
  .drawer-full-btn{width:100%; padding:10px; font-size:13px;}
  .drawer-theme-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:4px;
    border-top:0.5px solid var(--border);
    margin-top:4px;
    padding-top:16px;
  }
  .drawer-theme-row span{
    font-size:12.5px;
    font-weight:600;
    color:var(--text-2);
  }