/* ====== Base / Theme ====== */
    :root{
      --bg0:#050b18;
      --bg1:#070f22;
      --panel:rgba(15,23,42,.62);
      --panel2:rgba(2,6,23,.55);
      --stroke:rgba(148,163,184,.18);
      --stroke2:rgba(255,255,255,.08);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --muted2:#64748b;

      --blue:#3b82f6;
      --cyan:#38bdf8;
      --purple:#8b5cf6;
      --green:#10b981;
      --amber:#f59e0b;
      --red:#ef4444;

      --radius-xl:24px;
      --radius-lg:20px;
      --radius-md:16px;
      --radius-sm:12px;

      --shadow: 0 20px 40px -12px rgba(0,0,0,.55);
      --shadow2: 0 12px 28px rgba(0,0,0,.35);

      /* layout */
      --page-pad: 18px;
      --top-area-h: 270px; /* updated by JS */
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
      background:
        radial-gradient(1200px 700px at 10% 20%, rgba(59,130,246,.22), transparent 55%),
        radial-gradient(900px 600px at 85% 30%, rgba(16,185,129,.18), transparent 55%),
        radial-gradient(900px 700px at 40% 95%, rgba(56,189,248,.12), transparent 60%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      color:var(--text);
      overflow-x:hidden;
    }

    a{color:inherit; text-decoration:none}
    button,input,select,textarea{font:inherit}

    /* ====== Beautiful Scrollbars ====== */
    .kanban-body, .reply-list, .modal, body{
      scrollbar-width: thin;
      scrollbar-color: rgba(20,184,166,.72) rgba(226,232,240,.9);
    }
    .kanban-body::-webkit-scrollbar,
    .reply-list::-webkit-scrollbar,
    .modal::-webkit-scrollbar{
      width: 10px;
      height: 10px;
    }
    .kanban-body::-webkit-scrollbar-track,
    .reply-list::-webkit-scrollbar-track,
    .modal::-webkit-scrollbar-track{
      background: rgba(226,232,240,.92);
      border-radius: 999px;
      border: 1px solid rgba(148,163,184,.16);
    }
    .kanban-body::-webkit-scrollbar-thumb,
    .reply-list::-webkit-scrollbar-thumb,
    .modal::-webkit-scrollbar-thumb{
      background: linear-gradient(180deg, rgba(20,184,166,.76), rgba(59,130,246,.68));
      border-radius: 999px;
      border: 2px solid rgba(248,250,252,.96);
      box-shadow: 0 2px 10px rgba(15,23,42,.10);
    }
    .kanban-body::-webkit-scrollbar-thumb:hover,
    .reply-list::-webkit-scrollbar-thumb:hover,
    .modal::-webkit-scrollbar-thumb:hover{
      background: linear-gradient(180deg, rgba(13,148,136,.92), rgba(37,99,235,.82));
    }

    /* ====== Top Nav ====== */
    .top-nav{
      position: sticky;
      top:0;
      z-index: 100;
      padding: 12px var(--page-pad);
      backdrop-filter: blur(18px);
      background: rgba(2,6,23,.55);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .top-nav-inner{
      max-width: 1200px;
      margin: 0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    .brand{
      display:flex; align-items:center; gap:4px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.45);
    }
    .brand-badge{
      width: 48px;
      height: 48px;
      object-fit: contain;
      object-position: center;
      clip-path: none;
      border: 0;
      background: transparent;
      padding: 0;
      margin-inline: 0;
      filter: drop-shadow(0 10px 18px rgba(20,184,166,.12));
    }
    .brand-text{
      display:flex; flex-direction:column; line-height:1.1;
    }
    .brand-line{
      display:flex;
      align-items:baseline;
      gap:8px;
      flex-wrap:wrap;
      direction:ltr;
    }
    .brand-text b{font-size:.95rem}
    .brand-text span{font-size:.78rem; color:var(--muted)}

    .nav-links{
      display:flex;
      gap: 6px;
      flex-wrap: wrap;
      justify-content:center;
      align-items: center;
      flex:1;
      min-width: 200px;
    }
    .nav-link{
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
      color: var(--muted);
      background: transparent;
      transition:.2s ease;
      white-space:nowrap;
      display: inline-flex;
      align-items: center;
      height: 34px;
    }
    .nav-link:hover{color:var(--text); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.06)}
    .nav-link.active{
      color: var(--text);
      background: rgba(59,130,246,.10);
      border-color: rgba(59,130,246,.25);
    }
    .user-slot { display:flex; align-items:center; gap:8px; margin-inline-start:8px; position: relative; }
    .user-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 4px 12px 4px 4px;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      min-width: 140px;
      appearance: none;
    }
    .user-badge:focus,
    .user-badge:focus-visible {
      outline: none;
      box-shadow: none;
    }
    .user-badge:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
    }
    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid #6366f1;
      background: rgba(255,255,255,0.08);
    }
    #user-badge-name {
      color: #fff;
      font-weight: 600;
      font-size: 0.9rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }
    .user-menu {
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(17, 20, 50, 0.95);
      border: 1px solid rgba(79, 172, 254, 0.25);
      border-radius: 12px;
      padding: 8px;
      min-width: 180px;
      display: none;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
      backdrop-filter: blur(12px);
      z-index: 1200;
    }
    .user-menu.open {
      display: flex;
    }
    .user-menu a, .user-menu button {
      display: block;
      width: 100%;
      text-align: inherit;
      padding: 10px 12px;
      color: #e5e7eb;
      text-decoration: none;
      border-radius: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 0.9rem;
      transition: background 0.2s;
    }
    .user-menu a:hover, .user-menu button:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    .nav-actions{
      display:flex; align-items:center; gap:10px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.45);
      cursor:pointer;
      transition:.2s ease;
      user-select:none;
      position: relative;
    }
    .pill:hover{transform: translateY(-1px); background: rgba(15,23,42,.58)}
    .btn-primary{
      position: relative;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(37,99,235,.92));
      color: white;
      cursor:pointer;
      font-weight:800;
      display:inline-flex; align-items:center; gap:8px;
      box-shadow: 0 10px 24px rgba(14,165,233,.28);
      transition:.22s ease;
      white-space:nowrap;
    }
    .btn-primary:hover{transform: translateY(-2px); box-shadow: 0 16px 30px rgba(14,165,233,.38)}
    .btn-primary:active{transform: translateY(0px) scale(.98)}
    .btn-ghost{
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.40);
      color: var(--text);
      cursor:pointer;
      transition:.2s ease;
    }
    .btn-ghost:hover{background: rgba(15,23,42,.58)}
    .icon{ width:18px; height:18px; display:inline-block; }
    .ti{
      --ti-size: 18px;
      width: var(--ti-size);
      height: var(--ti-size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      color: currentColor;
      line-height: 0;
      vertical-align: middle;
    }
    .ti::before{
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background: currentColor;
      -webkit-mask: var(--ti-mask) center / contain no-repeat;
      mask: var(--ti-mask) center / contain no-repeat;
    }
    .ti-xl{ --ti-size: 30px; }
    .ti-bell{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 17h5l-1.4-1.4a2 2 0 0 1-.6-1.4V11a6 6 0 1 0-12 0v3.2a2 2 0 0 1-.6 1.4L4 17h5m6 0v1a3 3 0 0 1-6 0v-1m6 0H9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-check{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-plus{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .ti-note{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3h6l5 5v11a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4M9 9h2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .ti-message{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18 3 21V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H7Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-calendar{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2' ry='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .ti-branch{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h16M6 20V9l6-4 6 4v11M9 20v-5h6v5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-edit{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 20 8-8-4-4-8 8-1 5 5-1Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m14.5 5.5 4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
    .ti-trash{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-attach{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6.5 9 14a3 3 0 1 0 4.2 4.2l7.3-7.3a5 5 0 1 0-7.1-7.1L6.1 11.1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-eye{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
    .ti-download{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v10M8 10l4 4 4-4M4 20h16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .ti-print{ --ti-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V4h10v4M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v6H7v-6Z' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
    .inline-file-icon{
      --ti-size: 14px;
      margin-inline-end: 6px;
      vertical-align: -2px;
    }
    .file-entry-icon{
      --ti-size: 14px;
      margin-inline-end: 6px;
      color: #14b8a6;
      vertical-align: -2px;
    }

    /* ====== Page container ====== */
    .page{
      max-width: 1600px;
      margin: 14px auto 28px;
      padding: 0 var(--page-pad);
    }

    /* ====== Header card ====== */
    .top-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap: 14px;
      padding: 18px 18px;
      background: rgba(15, 23, 42, 0.58);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-xl);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
    }

    .header-left{
      display:flex; align-items:center; gap: 14px;
      min-width: 260px;
    }
    .header-icon-box{
      width: 62px; height:62px;
      border-radius: 20px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 12px 26px rgba(59,130,246,.35);
      position:relative; overflow:hidden;
      flex: 0 0 auto;
    }
    .header-icon-box::after{
      content:"";
      position:absolute; inset:-40%;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,.25), transparent);
      animation: shine 4s linear infinite;
    }
    @keyframes shine{
      0%{transform: translateX(-40%) rotate(20deg)}
      100%{transform: translateX(40%) rotate(20deg)}
    }
    .header-text h1{
      margin:0;
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing:-.4px;
    }
    .header-text p{
      margin:6px 0 0;
      color: var(--muted);
      font-weight:600;
      font-size:.92rem;
    }
    .header-sub{
      margin-top:8px;
      color: rgba(56,189,248,.95);
      font-size:.82rem;
      font-weight:700;
    }

    /* ====== Summary strip ====== */
    .summary-strip{
      margin-top: 14px;
      padding: 14px 14px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(500px 160px at 15% 40%, rgba(59,130,246,.24), transparent 70%),
        radial-gradient(500px 160px at 85% 40%, rgba(16,185,129,.18), transparent 70%),
        linear-gradient(135deg, rgba(15,23,42,.68), rgba(2,6,23,.60));
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow2);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      overflow:hidden;
      position: relative;
    }

    /* Bell moved to be clean + clear */
    .notif-wrap{ position: relative; display:flex; align-items:center; gap:10px; }
    .bell-btn{
      width: 44px; height:44px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.30);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      transition: .18s ease;
      position: relative;
    }
    .bell-btn:hover{ transform: translateY(-1px); background: rgba(2,6,23,.42); }
    .bell-btn:active{ transform: scale(.98); }
    .bell-btn .bell-ico{ color: #fbbf24; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); transition: .3s; }
    .bell-btn:hover .bell-ico { transform: rotate(15deg); }
    .bell-ico.pulse {
      animation: bellPulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
      color: #fbbf24;
      text-shadow: 0 0 15px rgba(251, 191, 36, 0.6);
    }
    @keyframes bellPulse {
      0% { transform: scale(1) rotate(0deg); }
      10% { transform: scale(1.2) rotate(-10deg); }
      20% { transform: scale(1.2) rotate(10deg); }
      30% { transform: scale(1.2) rotate(-10deg); }
      40% { transform: scale(1) rotate(0deg); }
      100% { transform: scale(1) rotate(0deg); }
    }

    /* Motivation Ticker - Moved under Brand */
    .motivation-box {
      margin-top: 5px;
      padding: 2px 8px;
      border-radius: 6px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      max-width: 180px;
      overflow: hidden;
      margin-inline: auto;
    }
    .motivation-text {
      font-size: 0.7rem;
      font-weight: 700;
      color: #94a3b8;
      white-space: nowrap;
      animation: fadeInOut 8s infinite;
      text-align: center;
    }
    @keyframes fadeInOut {
      0%, 10% { opacity: 0; transform: translateY(2px); }
      15%, 85% { opacity: 1; transform: translateY(0); }
      90%, 100% { opacity: 0; transform: translateY(-2px); }
    }

    .bell-badge{
      position:absolute;
      top: -6px;
      inset-inline-end: -6px;
      background: var(--red);
      color:#fff;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      font-size: .72rem;
      display:none;
      align-items:center;
      justify-content:center;
      border: 2px solid rgba(7,15,34,1);
      font-weight: 1000;
      box-shadow: 0 12px 18px rgba(239,68,68,.25);
    }

    .summary-pills{
      display:flex;
      gap: 10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      flex:1;
    }
    .summary-pill{
      display:flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(15,23,42,.45);
      min-width: 150px;
      justify-content:space-between;
    }
    .summary-pill .label{
      display:flex; align-items:center; gap:8px;
      color: var(--muted);
      font-weight:800;
      text-transform: uppercase;
      font-size: .82rem;
    }
    .summary-pill .count{
      font-weight: 1000;
      font-size: 1.05rem;
      color: #fff;
      padding: 2px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      min-width: 44px;
      text-align:center;
    }
    .tagDot{width:10px;height:10px;border-radius:99px}
    .dot-pending{background: rgba(245,158,11,.9)}
    .dot-progress{background: rgba(59,130,246,.95)}
    .dot-review{background: rgba(139,92,246,.95)}
    .dot-completed{background: rgba(16,185,129,.95)}
    .tasks-pagination{
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--bg-panel);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    .tasks-pagination-copy{
      color: var(--muted);
      font-weight: 800;
    }
    .tasks-pagination-actions{
      display:flex;
      align-items:center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .tasks-pagination-actions .btn[disabled]{
      opacity: .45;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* ====== Kanban (Enhanced) ====== */
    .kanban-board{
      margin-top: 24px;
      display:grid;
      grid-template-columns: repeat(4, minmax(300px, 1fr));
      gap: 24px;
      align-items: start;
      min-height: 0;
      padding-bottom: 24px;
      overflow-x: auto;
    }

    .kanban-column{
      background: rgba(15, 23, 42, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      backdrop-filter: blur(24px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      display:flex;
      flex-direction:column;
      min-height: 0;
      overflow:hidden;
      height: calc(100vh - 380px); /* Adjusted for safety */
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .kanban-column:hover{
      border-color: rgba(255, 255, 255, 0.12);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    }

    .kanban-header{
      padding: 16px 20px;
      font-weight: 800;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
    }

    .kanban-header .left{
      display:flex; align-items:center; gap:10px;
      min-width: 0;
    }
    .status-square{
      width:8px;
      height:8px;
      border-radius:2px;
      flex:0 0 auto;
      box-shadow: 0 0 0 1px rgba(255,255,255,.18);
    }
    .sq-pending{background:#f59e0b}
    .sq-progress{background:#3b82f6}
    .sq-review{background:#8b5cf6}
    .sq-completed{background:#10b981}

    .kanban-header .title{
      font-size: 1.05rem;
      letter-spacing: 0.5px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    
    .task-count{
      font-weight: 800;
      font-size: .75rem;
      padding: 4px 10px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.9);
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);
      min-width: 32px;
      text-align:center;
    }

    .status-pending{border-top: 4px solid #f59e0b; color: #fbbf24;}
    .status-progress{border-top: 4px solid #3b82f6; color: #60a5fa;}
    .status-review{border-top: 4px solid #8b5cf6; color: #a78bfa;}
    .status-completed{border-top: 4px solid #10b981; color: #34d399;}

    .kanban-body{
      padding: 16px;
      display:flex;
      flex-direction:column;
      gap: 16px;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    /* Task card (Enhanced) */
    .task-card{
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 12px;
      padding: 16px;
      position:relative;
      cursor:pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .task-card:hover{
      transform: translateY(-4px) scale(1.01);
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
      z-index: 10;
    }
    
    .task-top{
      display:flex; align-items:flex-start; justify-content:space-between; gap: 12px;
      margin-bottom: 2px;
    }
    .task-title{
      margin:0;
      font-size: 0.95rem;
      font-weight: 800;
      color: #f1f5f9;
      line-height: 1.5;
      letter-spacing: -0.01em;
      max-width: 100%;
      word-break: break-word;
      display: flex;
      align-items: center;
    }
    .t-prefix {
      --ti-size: 17px;
      color: #38bdf8;
      margin-inline-end: 8px;
      filter: drop-shadow(0 0 8px rgba(56,189,248,0.3));
    }
    .task-desc{
      margin: 6px 0 0;
      color: #94a3b8;
      font-weight: 500;
      font-size: .88rem;
      line-height: 1.6;
      display: -webkit-box;
      line-clamp: 2;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 3.2em;
    }

    .badge{
      padding: 4px 10px;
      border-radius: 8px;
      font-weight: 700;
      font-size: .68rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      flex: 0 0 auto;
      white-space:nowrap;
    }
    .p-high{ background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.2); }
    .p-medium{ background: rgba(245, 158, 11, 0.15); color: #fcd34d; border: 1px solid rgba(245, 158, 11, 0.2); }
    .p-low{ background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }

    .task-meta{
      margin-top:auto;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.06);
      display:flex;
      align-items:center;
      justify-content:space-between;
      flex-wrap: wrap;
      gap:10px;
      color: #64748b;
      font-size: .78rem;
      font-weight: 600;
    }
    .meta-left,.meta-right{display:flex;align-items:center;gap:8px}
    .meta-left{
      flex: 1 1 100%;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }
    .meta-right {
      margin-inline-start: auto;
      flex-shrink: 0;
      max-width: 100%;
    }
    
    .task-assignee-row {
      margin-top: 14px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 700;
      width: 100%;
    }
    .chip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(15, 23, 42, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.05);
      padding: 4px 10px;
      border-radius: 99px;
      color: #cbd5e1;
      font-weight: 600;
      font-size: 0.75rem;
      transition: all 0.2s;
      white-space:nowrap;
      max-width: 100%;
      min-width: 0;
    }
    .chip > span:last-child{
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .chip .ti{
      --ti-size: 13px;
      opacity: 0.92;
    }
    .chip:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
    .dotUser{
      display: block;
      width:8px;height:8px;border-radius:99px;background: rgba(56,189,248,.85);
      box-shadow: 0 0 0 6px rgba(56,189,248,.08);
    }

    /* Status pill in card */
    .status-pill{
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      font-weight: 950;
      font-size: .76rem;
      white-space:nowrap;
      flex-shrink: 0;
    }
    .status-pill.status-pending{ color: rgba(245,158,11,.95); border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.10); }
    .status-pill.status-progress{ color: rgba(96,165,250,.95); border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.10); }
    .status-pill.status-review{ color: rgba(167,139,250,.95); border-color: rgba(139,92,246,.25); background: rgba(139,92,246,.10); }
    .status-pill.status-completed{ color: rgba(52,211,153,.95); border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.10); }

    /* ====== Actions overlay (Enhanced) ====== */
    .task-actions{
      position:absolute;
      top: 12px;
      inset-inline-end: 12px;
      display:flex;
      flex-direction: column;
      gap: 6px;
      opacity: 0;
      transform: translateX(10px);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10;
      background: rgba(15, 23, 42, 0.8);
      padding: 4px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(4px);
    }
    .task-card:hover .task-actions{ opacity:1; transform: translateX(0); }
    
    .action-btn{
      width: 32px; height:32px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: #94a3b8;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition: all 0.15s;
      font-size: 0;
    }
    .action-btn .ti{ --ti-size: 15px; }
    .action-btn:hover{ background: rgba(255,255,255,0.1); color: #fff; transform: scale(1.1); }
    .action-edit:hover{ color: #60a5fa; }
    .action-reply:hover{ color: #34d399; }
    .action-del:hover{ color: #f87171; }

    /* Mobile: show actions always a bit */
    @media (max-width: 700px){
      .task-actions{opacity:1; transform:none}
    }

    /* ====== Footer ====== */
    footer{
      margin-top: 16px;
      padding: 14px 0 20px;
      color: rgba(226,232,240,.8);
      text-align:center;
      font-weight: 750;
      font-size: .9rem;
      opacity:.9;
    }
    body.cq-light .page {
      color: #0f172a;
    }
    body.cq-light .pill,
    body.cq-light #btnLang {
      background: rgba(255,255,255,0.92) !important;
      border-color: rgba(148,163,184,0.26) !important;
      color: #0f766e !important;
      box-shadow: 0 10px 24px rgba(2,6,23,0.08);
    }
    body.cq-light .pill:hover,
    body.cq-light #btnLang:hover {
      background: #ffffff !important;
      border-color: rgba(20,184,166,0.28) !important;
    }
    body.cq-light .brand {
      background: rgba(255,255,255,0.92);
      border-color: rgba(148,163,184,0.22);
      box-shadow: 0 10px 24px rgba(2,6,23,0.08);
    }
    body.cq-light .brand-text b {
      color: #0f172a;
    }
    body.cq-light .brand-text span {
      color: #64748b;
    }
    body.cq-light .motivation-box {
      background: rgba(240,253,250,0.92);
      border-color: rgba(20,184,166,0.14);
    }
    body.cq-light .motivation-text {
      color: #0f766e;
    }
    body.cq-light .top-header {
      background: rgba(255,255,255,0.9);
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 18px 40px rgba(2,6,23,0.08);
    }
    body.cq-light .header-text h1,
    body.cq-light .header-text p {
      color: #0f172a;
    }
    body.cq-light .header-sub {
      color: #0f766e;
    }
    body.cq-light .summary-strip {
      border-color: rgba(148,163,184,0.18);
      background:
        radial-gradient(500px 160px at 15% 40%, rgba(20,184,166,0.14), transparent 70%),
        radial-gradient(500px 160px at 85% 40%, rgba(59,130,246,0.1), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.92));
      box-shadow: 0 16px 36px rgba(2,6,23,0.08);
    }
    body.cq-light .summary-pill {
      background: rgba(248,250,252,0.96);
      border-color: rgba(148,163,184,0.18);
    }
    body.cq-light .summary-pill .label {
      color: #475569;
    }
    body.cq-light .summary-pill .count {
      background: rgba(255,255,255,0.95);
      border-color: rgba(148,163,184,0.2);
      color: #0f172a;
    }
    body.cq-light .kanban-column {
      background: rgba(255,255,255,0.88);
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 14px 34px rgba(2,6,23,0.08);
    }
    body.cq-light .kanban-column:hover {
      border-color: rgba(20,184,166,0.2);
      box-shadow: 0 18px 40px rgba(20,184,166,0.08);
    }
    body.cq-light .kanban-header {
      border-bottom-color: rgba(148,163,184,0.16);
      background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
    }
    body.cq-light .kanban-header .title,
    body.cq-light .task-count {
      color: #0f172a;
      text-shadow: none;
    }
    body.cq-light .task-count {
      background: rgba(241,245,249,0.95);
      border: 1px solid rgba(148,163,184,0.16);
      box-shadow: none;
    }
    body.cq-light .kanban-body {
      background: transparent;
    }
    body.cq-light footer {
      color: #475569;
    }

    /* ====== Modal ====== */
    .modal-overlay{
      position:fixed; inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.58);
      backdrop-filter: blur(10px);
      z-index: 1000;
      padding: 16px;
    }
    .modal{
      width: min(860px, 100%);
      max-height: 90vh;
      overflow:auto;
      background: rgba(15,23,42,.86);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 20px;
      box-shadow: var(--shadow);
      position:relative;
    }
    .modal-head{
      padding: 16px 16px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .modal-title{
      margin:0;
      font-size: 1.15rem;
      font-weight: 1000;
    }
    .modal-close{
      width: 40px; height:40px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2,6,23,.50);
      color: #fff;
      cursor:pointer;
    }
    .modal-body{padding: 16px}
    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .field label{
      display:block;
      margin-bottom: 6px;
      color: var(--muted);
      font-weight: 850;
      font-size:.9rem;
    }
    .field input,.field select,.field textarea{
      width:100%;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(148,163,184,.22);
      background: rgba(2,6,23,.35);
      color: #fff;
      outline:none;
    }
    .field textarea{min-height: 90px; resize: vertical}
    .modal-foot{
      padding: 14px 16px;
      border-top: 1px solid rgba(255,255,255,.08);
      display:flex; gap: 10px;
      justify-content:flex-end;
    }
    .btn{
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
      cursor:pointer;
      font-weight: 950;
    }
    .btn.secondary{background: rgba(248,250,252,0.96); color: #475569; border-color: rgba(148,163,184,0.18)}
    .btn.primary{background: rgba(59,130,246,.95); color:#fff; border-color: rgba(59,130,246,.35)}
    .btn.danger{background: rgba(239,68,68,.90); color:#fff; border-color: rgba(239,68,68,.30)}
    .btn:active{transform: scale(.98)}

    /* ====== Enhanced Reply Modal ====== */
    .reply-modal-body {
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 75vh;
      max-height: 80vh;
      background: rgba(10, 15, 30, 0.4);
    }
    
    .reply-header {
      padding: 14px 20px;
      background: rgba(15, 23, 42, 0.7);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      flex-shrink: 0;
      backdrop-filter: blur(10px);
    }
    
    .reply-meta-info {
      color: #e2e8f0;
      font-weight: 700;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .reply-role-badge {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.15));
      color: #60a5fa;
      padding: 4px 12px;
      border-radius: 99px;
      font-size: 0.75rem;
      font-weight: 800;
      border: 1px solid rgba(59, 130, 246, 0.25);
      letter-spacing: 0.5px;
      box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);
    }
    
    .reply-attachments-area {
      padding: 12px 20px;
      background: rgba(15, 23, 42, 0.3);
      border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
      display: none;
      flex-shrink: 0;
    }

    .reply-list {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      background: transparent;
      border: none;
      border-radius: 0;
      max-height: none;
      min-height: 0;
    }
    
    .reply {
      max-width: 85%;
      padding: 14px 18px;
      border-radius: 20px;
      border-bottom-left-radius: 4px; /* Assume others msg by default */
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.04);
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      backdrop-filter: blur(5px);
      transition: transform 0.2s;
    }
    .reply:hover { transform: translateY(-1px); }
    
    .reply .who {
      font-size: 0.82rem;
      color: #94a3b8;
      margin-bottom: 4px;
      display:flex; align-items:center; gap:6px;
    }
    .reply .who::before {
      content:""; display:inline-block; width:24px; height:24px; 
      background: linear-gradient(135deg, #475569, #334155);
      border-radius:50%;
    }
    
    .reply .msg {
      color: #f1f5f9;
      font-size: 0.95rem;
      line-height: 1.6;
      font-weight: 500;
    }
    
    .reply .time {
      align-self: flex-end;
      font-size: 0.7rem;
      color: rgba(255, 255, 255, 0.3);
      margin-top: 6px;
      font-weight: 600;
    }

    /* Footer Compose Area */
    .reply-footer {
      padding: 16px 20px;
      background: rgba(15, 23, 42, 0.8);
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      flex-shrink: 0;
      backdrop-filter: blur(20px);
    }
    
    .reply-compose {
      display: flex;
      gap: 12px;
      align-items: center;
      background: rgba(2, 6, 23, 0.4);
      padding: 6px 8px 6px 16px;
      border-radius: 28px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.2s ease;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .reply-compose:focus-within {
      border-color: rgba(59, 130, 246, 0.5);
      background: rgba(2, 6, 23, 0.6);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    }
    
    .reply-compose input[type="text"] {
      flex: 1;
      background: transparent;
      border: none;
      padding: 10px 0;
      font-size: 0.95rem;
      box-shadow: none !important;
      color: #fff;
      min-width: 0;
    }

    .reply-compose input[type="file"] {
      font-size: 0.85rem;
      color: var(--muted);
      max-width: 220px;
    }
    
    .reply-btn-send {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #2563eb);
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    
    .reply-btn-send:hover {
      transform: scale(1.1) rotate(-10deg);
      box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    }
    
    .reply-btn-attach {
      color: #94a3b8;
      background: transparent;
      border: none;
      padding: 8px;
      cursor: pointer;
      transition: color 0.2s;
      font-size: 1.2rem;
      display:flex; align-items:center; justify-content:center;
    }
    
    .reply-btn-attach:hover {
      color: #60a5fa;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
    }
    
    .file-row {
      margin-top: 10px;
      padding-inline-start: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start;
    }

    /* Custom Scrollbar for reply list */
    .reply-list::-webkit-scrollbar { width: 6px; }
    .reply-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(20,184,166,.76), rgba(59,130,246,.68));
      border-radius: 10px;
      border: 1px solid rgba(248,250,252,.94);
    }
    .reply-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(13,148,136,.92), rgba(37,99,235,.82)); }

    /* ====== Notification Panel ====== */
    .notif-panel{
      position:absolute;
      top: calc(100% + 10px);
      inset-inline-end: 0;
      width: min(420px, calc(100vw - 32px));
      max-height: 60vh;
      overflow:auto;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(15,23,42,.86);
      backdrop-filter: blur(16px);
      box-shadow: 0 22px 50px rgba(0,0,0,.45);
      display:none;
      z-index: 1200;
    }
    .notif-panel.open{ display:block; }
    .notif-head{
      padding: 12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .notif-head b{ font-weight:1000; }
    .notif-actions{ display:flex; gap:8px; }
    .notif-item{
      padding: 12px 12px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      display:flex;
      gap: 10px;
      cursor:pointer;
      transition: .15s ease;
    }
    .notif-item:hover{ background: rgba(255,255,255,.04); }
    .notif-dot{
      width:10px;height:10px;border-radius:999px;
      margin-top: 6px;
      background: rgba(56,189,248,.85);
      box-shadow: 0 0 0 6px rgba(56,189,248,.08);
      flex: 0 0 auto;
    }
    .notif-item.read .notif-dot{ background: rgba(148,163,184,.35); box-shadow:none; }
    .notif-body{ min-width:0; flex:1; }
    .notif-title{ font-weight: 1000; color:#f8fafc; font-size:.92rem; margin:0; }
    .notif-desc{ margin:4px 0 0; color:#cbd5e1; font-weight: 750; font-size:.84rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .notif-time{ color: var(--muted2); font-weight: 850; font-size: .78rem; white-space:nowrap; }

    /* ====== Attachment Viewer ====== */
    .viewer{
      width: min(980px, 100%);
      max-height: 90vh;
      overflow:hidden;
      display:flex;
      flex-direction:column;
    }
    .viewer-body{
      padding: 12px;
      overflow:auto;
      background: rgba(2,6,23,.35);
      flex:1;
    }
    .viewer-frame{
      width:100%;
      height: 70vh;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      background: rgba(0,0,0,.25);
    }
    .viewer-img{
      max-width: 100%;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      display:block;
      margin: 0 auto;
    }

    /* ====== Toast ====== */
    .toast-root{
      position: fixed;
      bottom: 18px;
      inset-inline-end: 18px;
      display:flex;
      flex-direction:column;
      gap: 12px;
      z-index: 9999;
      pointer-events:none;
    }
    .toast{
      pointer-events:auto;
      width: min(360px, calc(100vw - 36px));
      border-radius: 16px;
      border: 1px solid rgba(148,163,184,.22);
      background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.86));
      backdrop-filter: blur(18px);
      color: #e5e7eb;
      padding: 12px 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
      position:relative;
      overflow:hidden;
      display:flex;
      gap: 10px;
      align-items:flex-start;
      animation: toastIn .28s ease both;
    }
    @keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
    .toast.closing{animation: toastOut .22s ease both}
    @keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(.98)}}
    .toast::before{
      content:"";
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 30% 40%, rgba(56,189,248,.22), transparent 45%),
        radial-gradient(circle at 70% 60%, rgba(59,130,246,.18), transparent 50%),
        radial-gradient(circle at 45% 80%, rgba(16,185,129,.14), transparent 55%);
      filter: blur(10px);
      animation: waterMove 2.6s ease-in-out infinite;
      opacity:.9;
    }
    @keyframes waterMove{
      0%{transform:translate(-2%,-2%) rotate(0deg)}
      50%{transform:translate(2%,2%) rotate(2deg)}
      100%{transform:translate(-2%,-2%) rotate(0deg)}
    }
    .toast-icon{
      width: 34px; height:34px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(148,163,184,.18);
      position:relative;
      z-index:2;
      font-weight:1000;
    }
    .toast-body{position:relative; z-index:2; flex:1}
    .toast-title{font-weight:1000; font-size:.9rem; margin:0 0 4px; color:#f8fafc}
    .toast-msg{margin:0; font-size:.84rem; line-height:1.45; color:#cbd5e1}
    .toast-bar{position:absolute; left:0; bottom:0; height:3px; width:100%; background: rgba(148,163,184,.18); z-index:2}
    .toast-bar>span{
      display:block; height:100%; width:100%;
      transform-origin:left;
      background: linear-gradient(90deg, rgba(56,189,246,.95), rgba(59,130,246,.85));
      animation: barShrink linear both;
    }
    @keyframes barShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
    .toast.success .toast-icon{border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12)}
    .toast.warning .toast-icon{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12)}
    .toast.error .toast-icon{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12)}

    /* ====== Responsive ====== */
    @media (max-width: 980px){
      .top-nav-inner{flex-wrap:wrap; align-items:flex-start}
      .brand{width:100%; justify-content:flex-start}
      .nav-actions{width:100%; justify-content:space-between}
      .nav-links{order:3; width:100%; min-width:0; justify-content:flex-start; row-gap:8px}
      .user-slot{width:100%; margin-inline-start:0; justify-content:flex-start}
      .user-badge{min-width:0; max-width:100%}
      .page{padding: 0 14px}
      .top-header{flex-direction:column; align-items:flex-start}
      .header-left{min-width: 0}
      .summary-strip{flex-direction:column; align-items:stretch}
      .tasks-pagination{flex-direction:column; align-items:stretch}
      .tasks-pagination-actions{justify-content:stretch}
      .tasks-pagination-actions .btn{flex:1 1 0}
      .summary-pills{justify-content:stretch}
      .summary-pill{min-width: 0}
      .kanban-board{ grid-template-columns: 1fr; }
      .kanban-column{ height: auto; max-height: none; }
      .kanban-body{ max-height: 52vh; }
      .grid2{grid-template-columns:1fr}
      .notif-wrap{ justify-content: flex-end; }
    }

    @media (max-width: 700px){
      .top-nav{padding-inline:14px}
      .top-nav-inner{gap:10px}
      .brand{padding:8px 12px; border-radius:20px}
      .brand-text{min-width:0}
      .nav-actions{align-items:center}
      .nav-links{
        gap:8px;
        padding-bottom:4px;
      }
      .nav-link{
        height:32px;
        padding:7px 11px;
        font-size:.87rem;
      }
      .user-slot{
        padding-top:4px;
      }
      .user-badge{
        width:auto;
        padding-inline-end:10px;
      }
    }

    /* Input/Select/Textarea Theme */
    input, select, textarea {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      outline: none;
      transition: all 0.2s;
    }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(59, 130, 246, 0.5);
      background: rgba(15, 23, 42, 0.8);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
    ::placeholder { color: rgba(148, 163, 184, 0.5); }

    /* ====== Light Theme Refinements ====== */
    body.cq-light {
      background:
        radial-gradient(1100px 520px at 12% 10%, rgba(20,184,166,0.10), transparent 60%),
        radial-gradient(900px 480px at 88% 18%, rgba(59,130,246,0.08), transparent 58%),
        linear-gradient(180deg, #f8fafc 0%, #eef6f5 100%);
      color: #0f172a;
    }
    body.cq-light .top-nav {
      background: rgba(255,255,255,0.82);
      border-bottom: 1px solid rgba(148,163,184,0.18);
      backdrop-filter: blur(18px);
      box-shadow: 0 10px 30px rgba(2,6,23,0.05);
    }
    body.cq-light .nav-link {
      color: #64748b;
      border-color: rgba(148,163,184,0.18);
      background: rgba(255,255,255,0.66);
      box-shadow: 0 6px 16px rgba(15,23,42,0.04);
    }
    body.cq-light .nav-link:hover {
      color: #0f172a;
      background: rgba(240,253,250,0.98);
      border-color: rgba(20,184,166,0.18);
    }
    body.cq-light .nav-link.active {
      color: #0f766e;
      background: linear-gradient(135deg, rgba(20,184,166,0.15), rgba(15,118,110,0.10));
      border-color: rgba(20,184,166,0.24);
      box-shadow: 0 10px 22px rgba(20,184,166,0.10);
    }
    body.cq-light .user-badge {
      background: rgba(255,255,255,0.94);
      border-color: rgba(148,163,184,0.2);
      box-shadow: 0 10px 24px rgba(2,6,23,0.06);
    }
    body.cq-light .user-badge:hover {
      background: #ffffff;
      border-color: rgba(20,184,166,0.18);
      box-shadow: 0 14px 28px rgba(20,184,166,0.12);
    }
    body.cq-light .user-avatar {
      background: linear-gradient(135deg, rgba(20,184,166,0.14), rgba(59,130,246,0.14));
      border-color: rgba(20,184,166,0.38);
    }
    body.cq-light #user-badge-name {
      color: #0f172a;
      text-shadow: none;
    }
    body.cq-light .user-menu {
      background: rgba(255,255,255,0.98);
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 16px 34px rgba(2,6,23,0.10);
    }
    body.cq-light .user-menu a,
    body.cq-light .user-menu button {
      color: #0f172a;
    }
    body.cq-light .user-menu a:hover,
    body.cq-light .user-menu button:hover {
      background: rgba(20,184,166,0.08);
    }
    body.cq-light .bell-btn {
      background: rgba(255,255,255,0.94);
      border-color: rgba(148,163,184,0.2);
      box-shadow: 0 10px 24px rgba(2,6,23,0.08);
    }
    body.cq-light .bell-btn:hover {
      background: #ffffff;
      border-color: rgba(20,184,166,0.2);
    }
    body.cq-light .btn-primary {
      border-color: rgba(15,118,110,0.18);
      background: linear-gradient(135deg, #20b8ac, #0f9f93);
      box-shadow: 0 16px 30px rgba(20,184,166,0.20);
    }
    body.cq-light .btn-primary:hover {
      box-shadow: 0 20px 36px rgba(20,184,166,0.24);
    }
    body.cq-light .header-icon-box {
      background: linear-gradient(135deg, #20b8ac, #3b82f6);
      box-shadow: 0 16px 32px rgba(20,184,166,0.18);
    }
    body.cq-light .top-header {
      background:
        radial-gradient(480px 180px at 12% 18%, rgba(20,184,166,0.10), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.92));
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 18px 42px rgba(2,6,23,0.08);
    }
    body.cq-light .summary-strip {
      border-color: rgba(148,163,184,0.18);
      background:
        radial-gradient(520px 170px at 12% 45%, rgba(20,184,166,0.11), transparent 70%),
        radial-gradient(420px 160px at 88% 35%, rgba(59,130,246,0.08), transparent 70%),
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
      box-shadow: 0 16px 34px rgba(2,6,23,0.06);
    }
    body.cq-light .summary-pill {
      background: rgba(255,255,255,0.92);
      border-color: rgba(148,163,184,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    }
    body.cq-light .summary-pill .count {
      background: #f8fafc;
      border-color: rgba(148,163,184,0.16);
    }
    body.cq-light .kanban-board {
      gap: 20px;
    }
    body.cq-light .kanban-column {
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
      border-color: rgba(148,163,184,0.16);
      border-radius: 22px;
      box-shadow: 0 18px 42px rgba(2,6,23,0.07);
    }
    body.cq-light .kanban-column:hover {
      transform: translateY(-2px);
      border-color: rgba(20,184,166,0.18);
      box-shadow: 0 22px 44px rgba(20,184,166,0.08);
    }
    body.cq-light .kanban-header {
      padding: 18px 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.92));
      border-bottom-color: rgba(148,163,184,0.15);
    }
    body.cq-light .kanban-body {
      padding: 18px;
      gap: 14px;
    }
    body.cq-light .task-card {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
      border-color: rgba(148,163,184,0.16);
      border-radius: 18px;
      box-shadow: 0 10px 26px rgba(15,23,42,0.06);
    }
    body.cq-light .task-card:hover {
      background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.98));
      border-color: rgba(20,184,166,0.22);
      box-shadow: 0 20px 36px rgba(20,184,166,0.10);
    }
    body.cq-light .task-title {
      color: #0f172a;
    }
    body.cq-light .t-prefix {
      color: #14b8a6;
      filter: none;
    }
    body.cq-light .task-desc {
      color: #64748b;
    }
    body.cq-light .task-meta {
      color: #64748b;
      border-top-color: rgba(148,163,184,0.14);
    }
    body.cq-light .task-assignee-row {
      color: #475569;
      border-top-color: rgba(148,163,184,0.16);
    }
    body.cq-light .chip {
      background: rgba(248,250,252,0.96);
      border-color: rgba(148,163,184,0.16);
      color: #475569;
    }
    body.cq-light .chip:hover {
      background: rgba(240,253,250,0.96);
      color: #0f766e;
      border-color: rgba(20,184,166,0.18);
    }
    body.cq-light .dotUser {
      background: rgba(20,184,166,0.85);
      box-shadow: 0 0 0 6px rgba(20,184,166,0.10);
    }
    body.cq-light .badge {
      box-shadow: none;
    }
    body.cq-light .p-high {
      background: rgba(239,68,68,0.10);
      color: #dc2626;
      border-color: rgba(239,68,68,0.16);
    }
    body.cq-light .p-medium {
      background: rgba(245,158,11,0.10);
      color: #d97706;
      border-color: rgba(245,158,11,0.16);
    }
    body.cq-light .p-low {
      background: rgba(59,130,246,0.10);
      color: #2563eb;
      border-color: rgba(59,130,246,0.16);
    }
    body.cq-light .status-pill {
      border-color: rgba(148,163,184,0.18);
      background: rgba(255,255,255,0.82);
    }
    body.cq-light .task-actions {
      background: rgba(255,255,255,0.9);
      border-color: rgba(148,163,184,0.16);
      box-shadow: 0 10px 24px rgba(15,23,42,0.08);
      backdrop-filter: blur(10px);
    }
    body.cq-light .action-btn {
      color: #64748b;
    }
    body.cq-light .action-btn:hover {
      background: rgba(240,253,250,0.96);
      color: #0f766e;
    }
    body.cq-light .file-entry-icon {
      color: #0f9f93;
    }
    body.cq-light .modal-overlay {
      background: rgba(15,23,42,0.18);
      backdrop-filter: blur(8px);
    }
    body.cq-light .modal {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      border-color: rgba(148,163,184,0.18);
      box-shadow: 0 24px 60px rgba(15,23,42,0.14);
      color: #0f172a;
    }
    body.cq-light .modal-head,
    body.cq-light .modal-foot {
      border-color: rgba(148,163,184,0.16);
    }
    body.cq-light .modal-close {
      background: rgba(248,250,252,0.98);
      border-color: rgba(148,163,184,0.18);
      color: #475569;
    }
    body.cq-light .field label {
      color: #334155;
    }
    body.cq-light .field input,
    body.cq-light .field select,
    body.cq-light .field textarea,
    body.cq-light input,
    body.cq-light select,
    body.cq-light textarea,
    body.cq-light #fAssigneeSearch {
      background: rgba(255,255,255,0.95) !important;
      border: 1px solid #BDEDE6 !important;
      color: #0f172a !important;
      box-shadow: none !important;
    }
    body.cq-light input:focus,
    body.cq-light select:focus,
    body.cq-light textarea:focus,
    body.cq-light #fAssigneeSearch:focus {
      border-color: #14B8A6 !important;
      box-shadow: 0 0 0 3px rgba(189,237,230,0.9) !important;
      background: #ffffff !important;
    }
    body.cq-light select,
    body.cq-light .field select {
      border-color: #BDEDE6 !important;
      background: #ffffff !important;
      background-image: none !important;
      -webkit-appearance: none;
      appearance: none;
      outline: none !important;
      box-shadow: none !important;
      color-scheme: light !important;
    }
    body.cq-light select:hover,
    body.cq-light select:active,
    body.cq-light select:focus-visible,
    body.cq-light .field select:hover,
    body.cq-light .field select:active,
    body.cq-light .field select:focus-visible {
      border-color: #14B8A6 !important;
      box-shadow: 0 0 0 3px rgba(189,237,230,0.9) !important;
    }
    body.cq-light select option,
    body.cq-light .field select option {
      background: #ffffff !important;
      color: #0f172a !important;
    }
    body.cq-light select option:hover,
    body.cq-light .field select option:hover {
      background: #0D9488 !important;
      color: #ffffff !important;
    }
    body.cq-light select option:checked,
    body.cq-light select option[selected],
    body.cq-light select option:focus,
    body.cq-light select option:active,
    body.cq-light .field select option:checked,
    body.cq-light .field select option[selected],
    body.cq-light .field select option:focus,
    body.cq-light .field select option:active {
      background: #14B8A6 !important;
      color: #ffffff !important;
    }
    body.cq-light ::placeholder {
      color: rgba(100,116,139,0.72);
    }
    body.cq-light .btn.secondary {
      background: rgba(248,250,252,0.96);
      color: #475569;
      border-color: rgba(148,163,184,0.18);
    }
    body.cq-light .btn.primary {
      background: linear-gradient(135deg, #20b8ac, #0f9f93);
      border-color: rgba(15,118,110,0.18);
      color: #ffffff;
    }
    body.cq-light .btn.danger {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      border-color: rgba(220,38,38,0.2);
    }
    body.cq-light .reply-modal-body,
    body.cq-light .reply-header,
    body.cq-light .reply-footer,
    body.cq-light .reply-attachments-area {
      background: transparent;
      border-color: rgba(148,163,184,0.16);
    }
    body.cq-light .reply-meta-info,
    body.cq-light .reply .msg {
      color: #0f172a;
    }
    body.cq-light .reply-role-badge {
      background: rgba(20,184,166,0.10);
      color: #0f766e;
      border-color: rgba(20,184,166,0.16);
      box-shadow: none;
    }
    body.cq-light .reply {
      background: rgba(255,255,255,0.96);
      border-color: rgba(148,163,184,0.16);
      box-shadow: 0 10px 24px rgba(15,23,42,0.05);
    }
    body.cq-light .reply .who {
      color: #64748b;
    }
    body.cq-light .reply .time {
      color: #94a3b8;
    }
    body.cq-light .reply-compose {
      background: rgba(255,255,255,0.96);
      border-color: rgba(148,163,184,0.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
    }
    body.cq-light .reply-compose:focus-within {
      border-color: rgba(20,184,166,0.28);
      box-shadow: 0 0 0 4px rgba(20,184,166,0.10);
      background: #ffffff;
    }
    body.cq-light .reply-compose input[type="text"] {
      color: #0f172a;
    }
    body.cq-light .notif-panel {
      border-color: rgba(148,163,184,0.18);
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      box-shadow: 0 22px 50px rgba(15,23,42,0.14);
    }
    body.cq-light .notif-head,
    body.cq-light .notif-item {
      border-color: rgba(148,163,184,0.14);
    }
    body.cq-light .notif-item:hover {
      background: rgba(240,253,250,0.9);
    }
    body.cq-light .notif-title {
      color: #0f172a;
    }
    body.cq-light .notif-desc {
      color: #475569;
    }
    body.cq-light .notif-time {
      color: #64748b;
    }
    body.cq-light .viewer-body {
      background: rgba(248,250,252,0.96);
    }
    body.cq-light .viewer-frame,
    body.cq-light .viewer-img {
      border-color: rgba(148,163,184,0.16);
      background: #ffffff;
    }
    body.cq-light .toast {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      color: #0f172a;
      box-shadow: 0 18px 40px rgba(15,23,42,0.12);
    }
    body.cq-light .toast-title {
      color: #0f172a;
    }
    body.cq-light .toast-msg {
      color: #475569;
    }
    body.cq-light footer {
      color: #64748b;
    }