* { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
      background: #f3f4f6;
      color: #1f2937;
      min-height: 100vh;
    }

    /* ── Header ─────────────────────────────────────────── */
    .notif-bell { position: relative; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
    .notif-bell:hover { background: rgba(255,255,255,0.15); }
    .notif-bell svg { width: 18px; height: 18px; fill: rgba(255,255,255,0.8); vertical-align: middle; }
    .notif-badge { position: absolute; top: 0; right: 2px; background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; line-height: 1; }
    .notif-dropdown { position: fixed; bottom: 60px; left: var(--sidebar-width); width: 420px; max-height: 480px; overflow-y: auto; background-color: #ffffff; opacity: 1; border: 1px solid #c9cdd3; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); z-index: 10001; display: none; }
    .notif-dropdown.open { display: block; }
    .sidebar.collapsed .notif-dropdown { left: var(--sidebar-collapsed-width); }
    .notif-header { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
    .notif-header h3 { margin: 0; font-size: 0.85rem; color: #1f2937; }
    .notif-mark-all { font-size: 0.7rem; color: var(--bs-secondary); cursor: pointer; background: none; border: none; }
    .notif-mark-all:hover { text-decoration: underline; }
    .notif-item { padding: 10px 16px; border-bottom: 1px solid #f9fafb; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; transition: background 0.15s; }
    .notif-item:hover { background: #f0f4ff; }
    .notif-item.unread { background: #f0f7ff; }
    .notif-item.unread:hover { background: #e0efff; }
    .notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bs-accent); flex-shrink: 0; margin-top: 5px; }
    .notif-dot.read { background: transparent; }
    .notif-body { flex: 1; min-width: 0; }
    .notif-project { font-size: 0.78rem; font-weight: 700; color: var(--bs-primary); line-height: 1.3; }
    .notif-detail { font-size: 0.76rem; color: #374151; margin-top: 2px; line-height: 1.3; }
    .notif-meta { font-size: 0.65rem; color: #9ca3af; margin-top: 3px; }
    .notif-title { font-size: 0.8rem; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-desc { font-size: 0.72rem; color: #6b7280; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .notif-time { font-size: 0.65rem; color: #9ca3af; margin-top: 3px; }
    .notif-empty { padding: 32px 16px; text-align: center; color: #9ca3af; font-size: 0.8rem; }
    .notif-dismiss { background: none; border: none; color: #9ca3af; font-size: 0.75rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; align-self: center; }
    .notif-dismiss:hover { background: #fee2e2; color: #dc2626; }
    .notif-settings-link { display: block; padding: 10px 16px; text-align: center; font-size: 0.72rem; color: var(--bs-secondary); border-top: 1px solid #f3f4f6; cursor: pointer; }
    .notif-settings-link:hover { background: #f0f4ff; }
    .notif-toast { position:fixed;bottom:16px;right:16px;z-index:10000;background:var(--bs-primary);color:#fff;padding:12px 20px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);font-size:0.82rem;max-width:380px;cursor:pointer;animation:notifSlideIn 0.3s ease-out;display:flex;align-items:flex-start;gap:10px }
    .notif-toast-body { flex:1;min-width:0 }
    .notif-toast-title { font-weight:700;margin-bottom:2px }
    .notif-toast-desc { font-size:0.75rem;opacity:0.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
    .notif-toast-close { background:none;border:none;color:rgba(255,255,255,0.6);font-size:1rem;cursor:pointer;padding:0 4px;flex-shrink:0 }
    .notif-toast-close:hover { color:#fff }
    @keyframes notifSlideIn { from { transform:translateX(100%);opacity:0 } to { transform:translateX(0);opacity:1 } }
    @keyframes notifSlideOut { from { transform:translateX(0);opacity:1 } to { transform:translateX(100%);opacity:0 } }

    /* ── Design Tokens ── */
    :root {
      /* Brand palette */
      --bs-primary: #23486A;
      --bs-primary-hover: #3B6790;
      --bs-primary-light: #eef3f9;
      --bs-accent: #EFB036;
      --bs-accent-hover: #D9960B;
      --bs-accent-light: #fef6e0;
      --bs-secondary: #3B6790;
      --bs-tertiary: #4C7B8B;

      /* Focus & interaction */
      --bs-focus-ring: rgba(239, 176, 54, 0.25);
      --bs-focus-border: #EFB036;

      /* Sidebar */
      --sidebar-width: 240px;
      --sidebar-collapsed-width: 56px;
      --sidebar-bg: #152d4a;
      --sidebar-text: rgba(255,255,255,0.55);
      --sidebar-text-hover: rgba(255,255,255,0.85);
      --sidebar-text-active: #ffffff;
      --sidebar-accent: #EFB036;
      --sidebar-divider: rgba(255,255,255,0.1);
      --topbar-height: 0px;
    }

    .app-layout {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    .sidebar {
      width: var(--sidebar-width);
      min-width: var(--sidebar-width);
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow-y: auto;
      overflow-x: hidden;
      transition: width 0.2s ease, min-width 0.2s ease;
      z-index: 100;
    }

    .sidebar.collapsed {
      width: var(--sidebar-collapsed-width);
      min-width: var(--sidebar-collapsed-width);
    }

    .app-content {
      flex: 1;
      overflow-y: auto;
      height: 100vh;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      gap: 10px;
      border-bottom: 1px solid var(--sidebar-divider);
      min-height: 48px;
    }

    .sidebar-icon { width:28px;height:28px;border-radius:6px;flex-shrink:0;cursor:pointer;transition:transform 0.15s }
    .sidebar-icon:hover { transform:scale(1.1) }
    .sidebar-header .logo-text {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--sidebar-text-active);
      letter-spacing: 0.5px;
      white-space: nowrap;
      overflow: hidden;
    }

    .sidebar.collapsed .logo-text { display: none; }

    .sidebar-toggle {
      background: none;
      border: none;
      color: var(--sidebar-text);
      cursor: pointer;
      padding: 4px;
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .sidebar-toggle:hover { color: var(--sidebar-text-active); }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      color: var(--sidebar-text);
      cursor: pointer;
      font-size: 0.84rem;
      font-weight: 500;
      font-family: inherit;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      white-space: nowrap;
      transition: color 0.12s, background 0.12s;
      position: relative;
    }

    .nav-item:hover {
      color: var(--sidebar-text-hover);
      background: rgba(255,255,255,0.05);
    }

    .nav-item.active {
      color: var(--sidebar-text-active);
      background: rgba(255,255,255,0.1);
      border-right: 3px solid var(--sidebar-accent);
    }

    .nav-item .nav-icon {
      width: 20px;
      text-align: center;
      flex-shrink: 0;
      font-size: 1rem;
    }

    .nav-item .nav-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar.collapsed .nav-label { display: none; }
    .sidebar.collapsed .nav-item { justify-content: center; padding: 10px 0; }

    .nav-section {
      padding: 20px 16px 6px;
      font-size: 0.65rem;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      white-space: nowrap;
      overflow: visible;
      line-height: 1.2;
      flex-shrink: 0;
    }

    .sidebar.collapsed .nav-section {
      padding: 8px 0;
      font-size: 0;
      border-top: 1px solid var(--sidebar-divider);
      margin: 4px 8px;
    }

    .sidebar.collapsed .nav-item[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(var(--sidebar-collapsed-width) + 4px);
      top: 50%;
      transform: translateY(-50%);
      background: #1e293b;
      color: white;
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 0.78rem;
      white-space: nowrap;
      z-index: 200;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .sidebar-user {
      margin-top: auto;
      border-top: 1px solid var(--sidebar-divider);
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      position: relative;
    }

    .sidebar-user:hover { background: rgba(255,255,255,0.05); }

    .sidebar-user .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--sidebar-accent);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 600;
      flex-shrink: 0;
    }

    .sidebar-user .user-name {
      color: var(--sidebar-text);
      font-size: 0.8rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar.collapsed .user-name { display: none; }
    .sidebar.collapsed .sidebar-user { justify-content: center; padding: 10px 0; }

    .user-dropdown {
      position: fixed;
      background: #1e293b;
      border-radius: 6px;
      padding: 4px 0;
      min-width: 160px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
      z-index: 300;
      display: none;
    }

    .user-dropdown.open { display: block; }

    .user-dropdown button {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 8px 14px;
      background: none;
      border: none;
      color: rgba(255,255,255,0.8);
      font-size: 0.82rem;
      cursor: pointer;
      font-family: inherit;
    }

    .user-dropdown button:hover {
      background: rgba(255,255,255,0.1);
      color: white;
    }

    .mobile-topbar {
      display: none;
      background: var(--sidebar-bg);
      height: 48px;
      align-items: center;
      padding: 0 14px;
      gap: 12px;
      position: sticky;
      top: 0;
      z-index: 90;
    }

    .mobile-icon {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      cursor: pointer;
    }

    .mobile-topbar .page-title {
      color: var(--sidebar-text-active);
      font-size: 0.9rem;
      font-weight: 600;
    }

    .sidebar-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 99;
    }

    .sidebar-overlay.open { display: block; }

    @media (max-width: 768px) {
      .mobile-topbar { display: flex; }
      :root { --topbar-height: 48px; }

      .sidebar {
        position: fixed;
        left: calc(-1 * var(--sidebar-width) - 20px);
        top: 0;
        width: var(--sidebar-width) !important;
        min-width: var(--sidebar-width) !important;
        transition: left 0.25s ease;
        z-index: 200;
      }

      .sidebar.mobile-open { left: 0; }
      .sidebar.collapsed { width: var(--sidebar-width) !important; }

      .app-content {
        width: 100%;
        height: calc(100vh - var(--topbar-height));
      }
    }

    /* ── Controls bar ────────────────────────────────────── */
    .controls {
      background: white;
      border-bottom: 1px solid #e5e7eb;
      padding: 12px 24px;
      display: flex; gap: 10px;
      flex-wrap: wrap; align-items: center;
    }
    .search-wrap { flex: 1 1 260px; position: relative; }
    .search-wrap svg {
      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
      color: #9ca3af; pointer-events: none;
    }
    .controls input[type="text"] {
      width: 100%; padding: 8px 12px 8px 34px;
      border: 1px solid #d1d5db; border-radius: 6px;
      font-size: 0.875rem; outline: none;
      transition: border-color 0.15s;
    }
    .controls input[type="text"]:focus { border-color: var(--bs-accent); }
    .controls select {
      padding: 8px 10px; border: 1px solid #d1d5db;
      border-radius: 6px; font-size: 0.875rem;
      background: white; outline: none; cursor: pointer; color: #374151;
    }
    .controls select:focus { border-color: var(--bs-accent); }

    /* ── Main content area ───────────────────────────────── */
    .main {
      padding: 18px 24px;
      max-width: 1280px;
      margin: 0 auto;
    }
    .status-bar {
      font-size: 0.78rem; color: #6b7280; margin-bottom: 10px;
    }

    /* ── Activity table ──────────────────────────────────── */
    .table-wrap {
      background: white; border-radius: 8px; overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    }
    table { width: 100%; border-collapse: collapse; }
    thead th {
      text-align: left; padding: 10px 14px;
      background: #f9fafb; border-bottom: 2px solid #e5e7eb;
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: #6b7280; white-space: nowrap;
    }
    tbody td {
      padding: 11px 14px; border-bottom: 1px solid #f3f4f6;
      font-size: 0.875rem; vertical-align: top;
    }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr:hover td { background: #f8faff; cursor: pointer; }
    tbody tr.expanded td { background: #eef4ff; }

    .date-cell { white-space: nowrap; color: #6b7280; font-size: 0.8rem; min-width: 90px; }
    .job-cell  { min-width: 80px; }
    .job-num {
      font-family: "Consolas", "Courier New", monospace;
      font-weight: 700; font-size: 0.825rem; color: var(--bs-primary);
      cursor: pointer; text-decoration: none;
    }
    .job-num:hover { text-decoration: underline; }
    .proj-name {
      font-size: 0.72rem; color: #6b7280; margin-top: 2px;
      max-width: 160px; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .type-cell { min-width: 110px; }
    .tag {
      display: inline-block; padding: 2px 9px;
      border-radius: 9999px; font-size: 0.7rem;
      font-weight: 600; white-space: nowrap;
    }
    .tag-meeting  { background: #dbeafe; color: #1d4ed8; }
    .tag-call     { background: #dcfce7; color: #15803d; }
    .tag-decision { background: #fef3c7; color: #b45309; }
    .tag-field    { background: #ede9fe; color: #7c3aed; }
    .tag-design   { background: #ffe4e6; color: #be123c; }
    .tag-note     { background: #f1f5f9; color: #475569; }
    .attachment-badge {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 10px; margin-top: 4px;
      background: var(--bs-accent-light); color: var(--bs-secondary); border: 1px solid #e0d5b8;
      border-radius: 6px; font-size: 0.72rem; font-weight: 600;
      text-decoration: none; white-space: nowrap;
      transition: background 0.15s, border-color 0.15s;
    }
    .attachment-badge:hover { background: #dbeafe; border-color: #93c5fd; }
    .desc-cell { max-width: 520px; }
    .desc-text {
      color: #374151; line-height: 1.5;
      white-space: pre-wrap; word-break: break-word;
    }
    .desc-text.clamped {
      display: -webkit-box;
      -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden; white-space: normal;
    }
    .expand-hint { font-size: 0.7rem; color: var(--bs-primary); margin-top: 3px; }
    .by-cell { font-size: 0.78rem; color: #6b7280; white-space: nowrap; min-width: 80px; }
    .act-del-btn { background:none; border:none; cursor:pointer; font-size:0.85rem; opacity:0.3; padding:2px 4px; transition:opacity 0.15s; }
    .act-del-btn:hover { opacity:1; }

    .load-more-btn {
      display: block; width: 100%; margin-top: 14px; padding: 11px;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      cursor: pointer; font-size: 0.875rem; color: #374151;
      font-family: inherit; transition: background 0.12s;
    }
    .load-more-btn:hover { background: #f3f4f6; }

    /* ── Projects grid ───────────────────────────────────── */
    .proj-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: 14px;
    }
    .proj-card {
      background: white; border-radius: 10px; padding: 16px 18px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07);
      cursor: pointer; transition: box-shadow 0.15s, transform 0.1s;
      border: 1px solid #e5e7eb;
    }
    .proj-card:hover { box-shadow: 0 4px 14px rgba(35,72,106,0.14); transform: translateY(-1px); }
    .card-job  { font-family: monospace; font-weight: 700; font-size: 0.825rem; color: var(--bs-primary); margin-bottom: 3px; }
    .card-name { font-size: 0.95rem; font-weight: 600; color: #111827; line-height: 1.3; margin-bottom: 5px; }
    .card-pm   { font-size: 0.75rem; color: #6b7280; margin-bottom: 2px; }
    .card-client { font-size: 0.7rem; color: #9ca3af; margin-bottom: 10px; font-style: italic; }
    .card-progress-label {
      display: flex; justify-content: space-between;
      font-size: 0.75rem; color: #6b7280; margin-bottom: 4px;
    }
    .progress-bar-bg  { background: #e5e7eb; border-radius: 999px; height: 6px; overflow: hidden; }
    .progress-bar-fill { background: var(--bs-primary); height: 100%; border-radius: 999px; }
    .card-footer {
      margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;
      font-size: 0.7rem; color: #9ca3af;
    }
    .no-dv { font-size: 0.68rem; color: #d1d5db; font-style: italic; }

    .card-goals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    .goal-pill {
      font-size: 0.68rem; padding: 2px 8px; border-radius: 9999px;
      color: #1f2937; font-weight: 500; position: relative; overflow: hidden;
      white-space: nowrap; border: 2px solid transparent;
    }
    .goal-pill-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.45); pointer-events: none;
    }
    .goal-pill.status-on-track { border-color: #107C10; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-behind { border-color: #F0C040; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-at-risk { border-color: #E07070; color: #0a0a0a; font-weight: 600; }
    .goal-pill.status-not-started { border-color: transparent; opacity: 0.6; }
    .goal-pill.closed { text-decoration: line-through; opacity: 0.4; border-color: transparent; }

    /* ── LIST VIEW ── */
    .proj-list { display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
    .proj-list-header {
      display: flex; align-items: center; padding: 6px 12px;
      position: sticky; top: 0; z-index: 5;
      background: #fff; border-bottom: 1px solid #e5e7eb; color: var(--bs-primary);
      font-size: 0.72rem; font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 2px;
      min-width: 1100px;
    }
    .proj-list-row {
      display: flex; align-items: center;
      padding: 7px 12px;
      border-radius: 5px;
      cursor: pointer; transition: background 0.1s;
      overflow: hidden;
      background: #eef3f9; gap: 0;
      min-width: 1100px;
    }
    .proj-list-row:nth-child(even) { background: #dce8f5; }
    .proj-list-row:hover { background: #c8ddf0; }
    .pl-cell { padding: 0 5px; font-size: 0.77rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0; }
    .pl-job   { width: 72px; font-family: monospace; font-weight: 700; color: var(--bs-primary); font-size: 0.74rem; }
    .pl-name  { width: 260px; font-weight: 600; color: #111827; font-size: 0.81rem; }
    .pl-status { width: 140px; }
    .pl-city-num { width: 120px; }
    .pl-date  { width: 80px; color: #6b7280; font-size: 0.73rem; }
    .pl-client { width: 160px; color: #6b7280; font-style: italic; font-size: 0.73rem; }
    .pl-sp    { width: 52px; text-align: center; flex-shrink: 0; padding: 0; }
    .pl-pm    { width: 80px; color: #6b7280; }
    .pl-city  { width: 90px; color: #6b7280; }
    .pl-planner  { width: 110px; color: #6b7280; }
    .pl-engineer { width: 110px; color: #6b7280; }
    .pl-goals { flex: 1; min-width: 0; padding: 0 5px; display: flex; flex-wrap: nowrap; gap: 3px; align-items: center; overflow: hidden; }
    #view-projects.list-mode .main { max-width: none; }
    .pl-city-link { color: var(--bs-primary); text-decoration: none; font-size: 0.72rem; font-weight: 600; font-family: monospace; }
    .pl-city-link:hover { text-decoration: underline; }
    .pl-sp-link { color: #9ca3af; text-decoration: none; font-size: 0.9rem; line-height: 1; }
    .pl-sp-link:hover { color: var(--bs-primary); }
    .proj-view-toggle { display: flex; gap: 2px; }
    .proj-view-btn {
      background: #f3f4f6; border: 1px solid #d1d5db;
      color: #6b7280; font-size: 0.8rem; padding: 4px 9px; border-radius: 5px;
      cursor: pointer; transition: background 0.1s; line-height: 1;
    }
    .proj-view-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .task-edit-row {
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      padding: 4px 0 8px 22px; border-bottom: 1px solid #f3f4f6;
    }
    .task-edit-row select, .task-edit-row input {
      font-size: 0.72rem; padding: 3px 6px; border: 1px solid #d1d5db;
      border-radius: 4px; font-family: inherit;
    }
    .task-edit-row select { background: white; cursor: pointer; }
    .task-edit-row input[type="date"] { width: 120px; }
    .task-edit-row input[type="number"] { width: 60px; }
    .task-edit-label { font-size: 0.65rem; color: #9ca3af; min-width: 45px; }
    .task-save-btn {
      font-size: 0.68rem; padding: 3px 10px; background: var(--bs-primary); color: white;
      border: none; border-radius: 4px; cursor: pointer; font-family: inherit;
    }
    .task-save-btn:hover { background: var(--bs-primary-hover); }

    /* ── Drawer ──────────────────────────────────────────── */
    .drawer-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 200; opacity: 0; pointer-events: none;
      transition: opacity 0.25s;
    }
    .drawer-overlay.open { opacity: 1; pointer-events: all; }

    .drawer {
      position: fixed; top: 0; right: 0;
      width: min(780px, 100vw); height: 100vh;
      background: white; z-index: 300;
      display: flex; flex-direction: column;
      box-shadow: -8px 0 32px rgba(0,0,0,0.15);
      transform: translateX(100%);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .drawer.open { transform: translateX(0); }

    .drawer-header {
      background: var(--bs-primary); color: white;
      padding: 16px 20px; flex-shrink: 0;
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 12px;
    }
    .dh-job   { font-family: monospace; font-size: 0.85rem; opacity: 0.7; font-weight: 700; margin-bottom: 2px; }
    .dh-name  { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
    .dh-pm    { font-size: 0.75rem; opacity: 0.6; margin-top: 4px; }
    .drawer-close {
      background: rgba(255,255,255,0.15); border: none; color: white;
      width: 28px; height: 28px; border-radius: 5px;
      font-size: 0.9rem; cursor: pointer; flex-shrink: 0;
      font-family: inherit; transition: background 0.12s; margin-top: 2px;
    }
    .drawer-close:hover { background: rgba(255,255,255,0.25); }

    .drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
    .fin-drawer-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #e5e7eb }
    .fin-drawer-filter-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap }
    .fin-drawer-filter-row .fin-filter-label { min-width:42px }
    .fin-drawer-pm-bar { display:flex; gap:4px; flex-wrap:wrap }
    .drawer-body .fin-table { font-size:0.72rem; width:100% }
    .drawer-body .fin-table th, .drawer-body .fin-table td { padding:5px 6px; white-space:nowrap }
    .drawer-body .fin-table td:nth-child(3) { white-space:normal; max-width:220px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }

    /* Drawer sections */
    .d-sec       { margin-bottom: 24px; }
    .d-sec-title {
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.07em;
      color: #9ca3af; margin-bottom: 10px;
      padding-bottom: 6px; border-bottom: 1px solid #f3f4f6;
    }

    /* Progress in drawer */
    .d-prog-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .d-prog-bg  { flex: 1; background: #e5e7eb; border-radius: 999px; height: 8px; overflow: hidden; }
    .d-prog-fill { background: var(--bs-primary); height: 100%; border-radius: 999px; }
    .d-prog-pct { font-size: 0.9rem; font-weight: 700; color: var(--bs-primary); min-width: 38px; text-align: right; }
    .d-dates    { font-size: 0.73rem; color: #9ca3af; margin-top: 3px; }

    /* Goal items */
    .goal-item  { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
    .goal-head  {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 14px; cursor: pointer;
      background: #fafafa; transition: background 0.1s;
      user-select: none;
    }
    .goal-head:hover { background: #f0f4ff; }
    .goal-dot   { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .goal-name  { font-size: 0.875rem; font-weight: 600; color: #111827; flex: 1; }
    .goal-due   { font-size: 0.7rem; color: #9ca3af; white-space: nowrap; }
    .goal-arrow { font-size: 0.75rem; color: #9ca3af; transition: transform 0.15s; }
    .goal-arrow.open { transform: rotate(90deg); }
    .goal-tasks { display: none; padding: 4px 14px 10px; }
    .goal-tasks.open { display: block; }

    .task-row {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 7px 0; border-bottom: 1px solid #f9fafb;
      font-size: 0.8rem;
    }
    .task-row:last-child { border-bottom: none; }
    .task-box {
      width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
      border: 1.5px solid #d1d5db; border-radius: 3px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.6rem;
    }
    .task-box.done { background: var(--bs-primary); border-color: var(--bs-primary); color: white; }
    .task-subj { flex: 1; color: #374151; line-height: 1.4; }
    .task-due  { font-size: 0.68rem; color: #9ca3af; white-space: nowrap; margin-left: auto; }
    .task-assignee {
      font-size: 0.68rem; color: #1f2937; background: #e8f0fe;
      padding: 1px 7px; border-radius: 9999px; white-space: nowrap;
      flex-shrink: 0; font-weight: 500;
    }
    .task-unassigned { color: #9ca3af; font-style: italic; font-size: 0.68rem; flex-shrink: 0; cursor: pointer; }
    /* Assign pill picker */
    .assign-picker { position: relative; }
    .assign-pills {
      display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
      min-height: 28px; padding: 3px 6px;
      border: 1px solid #d1d5db; border-radius: 6px;
      background: white; cursor: pointer; min-width: 130px;
    }
    .assign-pills:hover { border-color: #9ca3af; }
    .assign-caret { font-size: 0.65rem; color: #9ca3af; padding: 0 2px; pointer-events: none; }
    .assign-dropdown {
      position: absolute; top: calc(100% + 3px); left: 0; z-index: 999;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13);
      min-width: 185px; max-height: 220px; overflow-y: auto;
    }
    .assign-option {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px; cursor: pointer; font-size: 0.85rem;
    }
    .assign-option:hover { background: #f3f4f6; }
    .assign-option.selected { background: #eff6ff; }
    .assign-option.selected .assign-check { visibility: visible; }
    .assign-check { visibility: hidden; color: var(--bs-accent); font-size: 0.7rem; margin-left: auto; }
    .task-pri-emoji { font-size: 0.75rem; flex-shrink: 0; cursor: default; }
    .task-notes-area {
      width: 100%; min-height: 48px; max-height: 120px; resize: vertical;
      font-size: 0.75rem; padding: 6px 8px; border: 1px solid #d1d5db;
      border-radius: 4px; font-family: inherit; line-height: 1.4;
    }
    .task-notes-area:focus { border-color: var(--bs-accent); outline: none; }
    .assign-select {
      font-size: 0.68rem; padding: 1px 4px; border: 1px solid #d1d5db;
      border-radius: 4px; background: white; color: #374151;
      cursor: pointer; max-width: 120px; flex-shrink: 0;
    }
    .task-box { cursor: pointer; }
    .task-box:hover { border-color: var(--bs-primary); }
    .saving { opacity: 0.5; pointer-events: none; }
    .goal-status-select {
      font-size: 0.7rem; padding: 2px 6px; border: 1px solid #d1d5db;
      border-radius: 4px; background: white; cursor: pointer; margin-left: 6px;
    }

    .pm-btn {
      font-size: 0.75rem; padding: 3px 10px 3px 3px; border-radius: 9999px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    }
    .pm-btn:hover { filter: brightness(0.95); }
    .pm-btn.active { color: white; }
    .filter-toggle { display: flex; gap: 0; }
    .filter-toggle-btn {
      font-size: 0.7rem; padding: 3px 10px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap;
    }
    .filter-toggle-btn:first-child { border-radius: 9999px 0 0 9999px; border-right: none; }
    .filter-toggle-btn:not(:first-child):not(:last-child) { border-radius: 0; border-right: none; }
    .filter-toggle-btn:last-child { border-radius: 0 9999px 9999px 0; }
    .filter-toggle-btn:hover { background: #f3f4f6; }
    .filter-toggle-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .filter-toggle-btn.active:hover { background: var(--bs-primary-hover); }
    .sort-btn {
      font-size: 0.7rem; padding: 3px 10px; border-radius: 9999px;
      border: 1px solid #d1d5db; background: white; color: #374151;
      cursor: pointer; font-family: inherit; transition: all 0.12s;
      white-space: nowrap;
    }
    .sort-btn:hover { background: #f3f4f6; }
    .sort-btn.seq { background: #f0f4ff; border-color: var(--bs-primary); color: var(--bs-primary); }
    .sort-btn.active { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }
    .sort-btn.active:hover { background: var(--bs-primary-hover); }
    .goal-drop-btn {
      font-size: 0.8rem; padding: 7px 12px; border: 1px solid #d1d5db;
      border-radius: 6px; background: white; cursor: pointer; font-family: inherit;
      color: #374151; white-space: nowrap;
    }
    .goal-drop-btn:hover { border-color: var(--bs-primary); }
    .goal-drop-menu {
      position: absolute; top: 100%; left: 0; z-index: 50;
      background: white; border: 1px solid #d1d5db; border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12); padding: 6px;
      min-width: 220px; max-height: 360px; overflow-y: auto;
      display: flex; flex-direction: column; gap: 3px;
    }
    .goal-drop-item {
      font-size: 0.72rem; padding: 5px 10px; border-radius: 9999px;
      cursor: pointer; font-weight: 500; border: none; text-align: left;
      font-family: inherit; transition: opacity 0.1s;
    }
    .goal-drop-item:hover { opacity: 0.8; }
    .goal-drop-item.selected { box-shadow: inset 0 0 0 2px var(--bs-primary); }

    .d-goal-pill {
      border-radius: 10px; margin-bottom: 8px; overflow: visible;
      position: relative; cursor: pointer; user-select: none;
    }
    .d-goal-pill-bg {
      display: flex; align-items: center; gap: 9px;
      padding: 10px 14px; position: relative; z-index: 1;
    }
    .d-goal-pill-fill {
      position: absolute; left: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.35); z-index: 0;
      border-radius: 10px;
    }
    .d-goal-stats {
      font-size: 0.68rem; color: #6b7280; margin-left: auto;
      display: flex; gap: 8px; align-items: center; white-space: nowrap;
    }
    .d-stats-summary {
      display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
      padding: 12px 16px; background: #f8fafc; border-radius: 8px;
      border: 1px solid #e5e7eb;
    }
    .d-stat-item { text-align: center; }
    .d-stat-val { font-size: 1.1rem; font-weight: 700; color: var(--bs-primary); }
    .d-stat-label { font-size: 0.65rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }

    /* Status dot colors */
    .dot-on-track  { background: #16a34a; }
    .dot-at-risk   { background: #d97706; }
    .dot-off-track { background: #dc2626; }
    .dot-completed { background: #6366f1; }
    .dot-default   { background: #9ca3af; }

    /* Activity in drawer */
    .d-act-item  { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
    .d-act-item:last-child { border-bottom: none; }
    .d-act-meta  { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; flex-wrap: wrap; }
    .d-act-date  { font-size: 0.72rem; color: #9ca3af; }
    .d-act-by    { font-size: 0.72rem; color: #9ca3af; }
    .d-act-desc  { font-size: 0.825rem; color: #374151; line-height: 1.45; }

    /* Info / error boxes */
    .info-box {
      background: #eff6ff; border: 1px solid #bfdbfe;
      border-radius: 7px; padding: 11px 14px;
      color: #1d4ed8; font-size: 0.8rem; line-height: 1.5;
      margin-bottom: 12px;
    }
    .error-box {
      background: #fef2f2; border: 1px solid #fca5a5;
      border-radius: 8px; padding: 16px 20px;
      color: #991b1b; font-size: 0.875rem; line-height: 1.6;
    }
    .error-box strong { display: block; margin-bottom: 6px; }
    .error-box code {
      background: rgba(0,0,0,0.06); padding: 1px 5px;
      border-radius: 3px; font-family: monospace; font-size: 0.82rem;
    }
    .state-box { text-align: center; padding: 48px 24px; color: #9ca3af; font-size: 0.9rem; }
    .state-box .icon { font-size: 2.5rem; margin-bottom: 10px; }
    .state-box strong { display: block; color: #374151; margin-bottom: 4px; font-size: 1rem; }

    /* ── Goal View (flat table) ─────────────────────────── */
    #view-meeting .main { max-width: none; }
    .gv-list { display: flex; flex-direction: column; gap: 2px; }
    .gv-header {
      display: flex; align-items: center; padding: 5px 12px;
      position: sticky; top: 0; z-index: 5;
      background: var(--bs-primary); color: #ffffff;
      font-size: 0.66rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .gv-header > * { color: #ffffff !important; }
    .gv-row {
      display: flex; align-items: center;
      padding: 7px 12px; cursor: pointer; transition: background 0.1s;
      overflow: hidden; background: #eef3f9; gap: 0;
    }
    .gv-row:nth-child(even) { background: #dce8f5; }
    .gv-row:hover { background: #c8ddf0; }
    .gv-cell { padding: 0 5px; font-size: 0.77rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex-shrink: 0; }
    .gv-job   { width: 72px; font-family: monospace; font-weight: 700; color: var(--bs-primary); font-size: 0.74rem; }
    .gv-name  { width: 260px; font-weight: 600; color: #111827; font-size: 0.81rem; }
    .gv-pm    { width: 80px; color: #6b7280; }
    .gv-stats { width: 130px; color: #6b7280; font-size: 0.72rem; }
    .gv-stats strong { color: var(--bs-primary); }
    .gv-goals {
      flex: 1; min-width: 0; padding: 0 5px;
      display: flex; flex-wrap: nowrap; gap: 4px; align-items: center;
      overflow-x: auto; overflow-y: hidden;
      scrollbar-width: thin; scrollbar-color: #c8d6e5 transparent;
    }
    .gv-goals::-webkit-scrollbar { height: 4px; }
    .gv-goals::-webkit-scrollbar-thumb { background: #c8d6e5; border-radius: 4px; }
    .gv-goals::-webkit-scrollbar-track { background: transparent; }
    .gv-goal-wrap { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
    .gv-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      cursor: pointer; transition: transform 0.1s, opacity 0.15s;
    }
    .gv-dot:hover { transform: scale(1.4); }
    .gv-due { font-size: 0.65rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }

    /* Status badge / dropdown (used by drawer) */
    .mv-badge-wrap    { position: relative; flex-shrink: 0; }
    .mv-status-badge  {
      font-size: 0.68rem; font-weight: 600; padding: 2px 8px;
      border-radius: 9999px; white-space: nowrap; cursor: pointer;
      min-width: 76px; text-align: center; display: inline-block;
      user-select: none; transition: opacity 0.12s;
    }
    .mv-status-badge:hover { opacity: 0.82; }
    .mv-badge-on-track { background: #dcfce7; color: #15803d; }
    .mv-badge-behind   { background: #fef9c3; color: #a16207; }
    .mv-badge-at-risk  { background: #fee2e2; color: #991b1b; }
    .mv-badge-closed   { background: rgba(147,197,253,0.35); color: #3b82f6; }
    .mv-badge-default  { background: #f3f4f6; color: #6b7280; }
    .mv-status-dd {
      position: absolute; top: calc(100% + 4px); left: 0; z-index: 200;
      background: white; border: 1px solid #d1d5db; border-radius: 8px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.13); padding: 4px; min-width: 118px;
    }
    .d-goal-pill .mv-badge-wrap { position: relative; z-index: 50; }
    .d-goal-pill .mv-status-dd { z-index: 300; }
    .mv-sdd-item {
      font-size: 0.71rem; font-weight: 600; padding: 5px 12px; border-radius: 9999px;
      cursor: pointer; border: none; width: 100%;
      text-align: left; font-family: inherit; display: block;
      margin: 2px 0;
    }
    .mv-sdd-item:hover { filter: brightness(0.9); }

    /* Drawer collapsed goals (Not Started / Completed) */
    .d-goal-pill.d-collapsed {
      margin-bottom: 4px;
    }
    .d-goal-pill.d-collapsed .d-goal-pill-bg { padding: 6px 12px; }
    .d-goal-pill.d-collapsed .goal-dot,
    .d-goal-pill.d-collapsed .mv-status-badge,
    .d-goal-pill.d-collapsed .goal-name,
    .d-goal-pill.d-collapsed .d-goal-stats,
    .d-goal-pill.d-collapsed .goal-arrow { opacity: 0.4; }
    .d-goal-pill.d-collapsed:hover .goal-dot,
    .d-goal-pill.d-collapsed:hover .mv-status-badge,
    .d-goal-pill.d-collapsed:hover .goal-name,
    .d-goal-pill.d-collapsed:hover .d-goal-stats,
    .d-goal-pill.d-collapsed:hover .goal-arrow { opacity: 0.65; }
    .d-goal-pill.d-collapsed .goal-name { font-size: 0.75rem; }
    .d-goal-pill.d-collapsed .d-goal-stats { font-size: 0.6rem; }
    .d-goal-pill.d-done .goal-name { text-decoration: line-through; }

    /* ── High Effort View ────────────────────────────────── */
    .he-task {
      background: white; border-radius: 8px; border: 1px solid #e5e7eb;
      margin-bottom: 8px; overflow: visible;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: box-shadow 0.12s;
    }
    .he-task:hover { box-shadow: 0 2px 8px var(--bs-focus-ring); }
    .he-task-header {
      display: flex; align-items: center; gap: 10px; padding: 10px 16px;
      cursor: pointer; flex-wrap: wrap;
    }
    .he-task-name { font-size: 0.88rem; font-weight: 600; color: #111827; flex: 1; min-width: 150px; }
    .he-task-proj {
      font-size: 0.72rem; color: #6b7280; flex-shrink: 0;
      display: flex; align-items: center; gap: 6px;
    }
    .he-task-proj-job {
      font-family: monospace; font-weight: 700; font-size: 0.75rem; color: var(--bs-primary);
      cursor: pointer;
    }
    .he-task-proj-job:hover { text-decoration: underline; }
    .he-task-effort {
      font-size: 0.85rem; font-weight: 700; color: var(--bs-primary);
      background: var(--bs-accent-light); padding: 2px 10px; border-radius: 9999px;
      flex-shrink: 0; white-space: nowrap;
    }
    .he-task-meta {
      display: flex; gap: 6px; align-items: center; flex-shrink: 0;
    }
    .he-progress-bar {
      width: 60px; height: 5px; background: #e5e7eb; border-radius: 999px;
      overflow: hidden; flex-shrink: 0;
    }
    .he-progress-fill { height: 100%; background: var(--bs-primary); border-radius: 999px; }

    /* ── Employee Tasks View ──────────────────────────────── */
    .et-header {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 14px 16px 10px; background: #374151; color: white;
    }
    .et-header h2 { font-size: 1.25rem; font-weight: 700; color: white; }
    .et-header .et-date { font-size: 0.82rem; color: rgba(255,255,255,0.7); }
    .et-legend {
      display: flex; gap: 18px; flex-wrap: wrap; padding: 8px 16px;
      font-size: 0.72rem; color: #6b7280; align-items: center;
      background: #f9fafb; border-bottom: 1px solid #e5e7eb;
    }
    .et-legend-group { display: flex; gap: 10px; align-items: center; }
    .et-legend-label { font-weight: 600; color: #374151; text-transform: uppercase; letter-spacing: 0.04em; }
    .et-section {
      margin-bottom: 10px; border: 1px solid #d9d9d9; border-radius: 8px;
      overflow: hidden; background: #fff;
    }
    .et-section-header {
      font-size: 1rem; font-weight: 800; color: #111;
      padding: 8px 16px; display: flex; align-items: center;
    }
    .et-row {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 16px; font-size: 0.78rem;
      border-bottom: 1px solid #f0f0f0;
      min-height: 32px;
    }
    .et-row:hover { filter: brightness(0.97); }
    .et-pri { width: 20px; text-align: center; flex-shrink: 0; font-size: 0.82rem; }
    .et-job { font-weight: 700; width: 60px; flex-shrink: 0; color: #1f2937; }
    .et-proj { width: 200px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4b5563; }
    .et-task { flex: 1; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .et-check { width: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .et-effort { width: 45px; flex-shrink: 0; text-align: right; font-size: 0.7rem; color: #6b7280; }
    .et-row.et-done { opacity: 0.5; }
    .et-row.et-done .et-task { text-decoration: line-through; }
    .et-task-link { color: #1f2937; text-decoration: none; font-weight: 600; }
    .et-job-link { color: #1f2937; text-decoration: none; font-weight: 700; }
    .et-job-link:hover { text-decoration: underline; color: var(--bs-secondary); }
    .et-date-col { width: 90px; flex-shrink: 0; text-align: right; font-size: 0.75rem; color: #374151; white-space: nowrap; }
    .et-status-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
      display: inline-block; vertical-align: middle;
    }
    .et-dot-overdue { background: #C50F1F; }
    .et-dot-soon { background: #F59E0B; }
    .et-no-tasks { padding: 16px; text-align: center; color: #9ca3af; font-size: 0.85rem; }
    .et-pool-section { margin-bottom: 14px; border: 2px dashed var(--bs-accent); border-radius: 10px; overflow: hidden; background: var(--bs-accent-light); }
    .et-pool-header {
      font-size: 1rem; font-weight: 800; color: var(--bs-primary);
      padding: 10px 16px; display: flex; align-items: center; gap: 8px;
      background: linear-gradient(135deg, var(--bs-accent-light) 0%, #fdfaf0 100%); border-bottom: 1px solid #e8d9a8;
    }
    .et-pool-header .pool-count { font-size: 0.75rem; font-weight: 600; background: var(--bs-accent); color: #1f2937; padding: 1px 8px; border-radius: 10px; }
    .et-claim-btn {
      background: var(--bs-accent); color: #1f2937; border: none; border-radius: 4px;
      padding: 2px 10px; font-size: 0.68rem; font-weight: 700; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .et-claim-btn:hover { background: var(--bs-accent-hover); }
    .et-unclaim-btn {
      background: transparent; color: #6b7280; border: 1px solid #d1d5db; border-radius: 4px;
      padding: 2px 8px; font-size: 0.62rem; font-weight: 600; cursor: pointer;
      white-space: nowrap; flex-shrink: 0;
    }
    .et-unclaim-btn:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 640px) {
      header, .controls, .main { padding-left: 14px; padding-right: 14px; }
      .hide-sm { display: none !important; }
      tbody td { padding: 10px; }
      .desc-cell { max-width: 200px; }
      .drawer { width: 100vw; }

      /* Goal view — hide less important columns on small screens */
      .gv-stats { display: none; }
      .gv-name { width: 160px; }
      /* Employee tasks responsive */
      .et-proj { width: 120px; }
      .et-row { gap: 5px; padding: 5px 10px; font-size: 0.72rem; }
      .et-job { width: 50px; }
      .et-date-col { width: 75px; }
      .et-effort { width: 35px; font-size: 0.65rem; }
      .et-check { width: 16px; }
    }

    /* ── My Week Dashboard ─────────────────────────────────── */
    .mw-dashboard {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 16px;
      min-height: 500px;
    }
    .mw-sidebar {
      display: flex; flex-direction: column; gap: 14px;
    }
    .mw-section {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); overflow: hidden;
    }
    .mw-section-header {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; background: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-hover) 100%);
      border-bottom: 1px solid #e5e7eb;
    }
    .mw-section-header .d-sec-title { color: white !important; }
    .mw-section-header .sort-btn {
      background: rgba(255,255,255,0.2); color: white; border-color: rgba(255,255,255,0.3);
    }
    .mw-section-header .sort-btn:hover {
      background: rgba(255,255,255,0.35);
    }
    .mw-badge {
      background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700;
      padding: 1px 6px; border-radius: 9999px; margin-left: 4px;
    }
    .mw-badge:empty, .mw-badge[data-count="0"] { display: none; }
    .mw-item-list {
      max-height: 320px; overflow-y: auto; padding: 6px;
      min-height: 40px;
    }
    .mw-item {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 8px 10px; border-radius: 6px; cursor: grab;
      border: 1px solid transparent; transition: all 0.12s;
      font-size: 0.82rem; margin-bottom: 3px;
    }
    .mw-item:hover { border-color: #d1d5db; background: #fafbff; }
    .mw-item.dragging { opacity: 0.5; border-color: var(--bs-accent); }
    .mw-item-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
    }
    .mw-item-body { flex: 1; min-width: 0; }
    .mw-item-title {
      font-weight: 600; color: #111827; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }
    .mw-item-meta {
      font-size: 0.7rem; color: #9ca3af; margin-top: 2px;
    }
    .mw-item-actions {
      display: flex; gap: 4px; flex-shrink: 0; opacity: 0;
      transition: opacity 0.12s;
    }
    .mw-item:hover .mw-item-actions { opacity: 1; }
    .mw-item-btn {
      background: none; border: none; cursor: pointer;
      font-size: 0.8rem; color: #9ca3af; padding: 2px 4px; border-radius: 3px;
    }
    .mw-item-btn:hover { color: var(--bs-primary); background: #f0f4ff; }
    .mw-scratchpad {
      width: 100%; min-height: 120px; resize: vertical;
      font-size: 0.82rem; padding: 8px 14px; border: none;
      font-family: inherit; line-height: 1.8; outline: none;
    }

    /* ── Timeline (Daily 15-min view) ──────────────────── */
    .mw-timeline-area {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); overflow: hidden;
    }
    .mw-tl-daily {
      display: grid; grid-template-columns: 60px 1fr;
      overflow-y: auto; max-height: 640px;
    }
    .mw-tl-time {
      font-size: 0.72rem; color: #9ca3af; text-align: right;
      padding: 0 8px; height: 36px; line-height: 36px;
      border-bottom: 1px dotted #e5e7eb;
    }
    .mw-tl-time.on-hour {
      font-weight: 700; color: #374151;
      border-top: 1px solid #cbd5e1; border-bottom: 1px dotted #e5e7eb;
      margin-top: -1px;
    }
    .mw-tl-slot {
      height: 36px; border-bottom: 1px dotted #e5e7eb;
      position: relative; cursor: pointer;
      transition: background 0.1s;
    }
    .mw-tl-slot.on-hour { border-top: 1px solid #cbd5e1; margin-top: -1px; }
    .mw-tl-slot:hover { background: #f0f4ff; }
    .mw-tl-slot.drop-target { background: #dbeafe; }
    .mw-add-time-btn {
      position: absolute; bottom: 2px; right: 2px; width: 22px; height: 22px;
      border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.85);
      font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
      opacity: 0; transition: opacity 0.15s; color: #374151; display: flex; align-items: center; justify-content: center;
    }
    .mw-tl-block:hover .mw-add-time-btn, .mw-wk-block:hover .mw-add-time-btn { opacity: 1; }
    .mw-add-time-popup {
      position: fixed; z-index: 9999; background: white; border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18); padding: 12px; min-width: 180px;
    }
    .mw-add-time-popup .mw-atp-row { display: flex; gap: 6px; margin-bottom: 8px; justify-content: center; }
    .mw-add-time-popup button {
      padding: 6px 10px; border-radius: 6px; border: 1px solid #e5e7eb;
      background: #f9fafb; cursor: pointer; font-size: 0.8rem; font-weight: 600;
    }
    .mw-add-time-popup button:hover { background: var(--bs-accent-light); border-color: var(--bs-accent); }
    .mw-add-time-popup .mw-atp-sub { color: #dc2626; }
    .mw-add-time-popup .mw-atp-add { color: #059669; }
    /* ── Task Hover Card ────────────────────────────────── */
    /* ── Month View ──────────────────────────────────────── */
    .mw-month-grid { display: grid; grid-template-columns: 0.5fr repeat(5, 1fr) 0.5fr; gap: 1px; background: #e5e7eb; border-radius: 8px; overflow: hidden; }
    .mw-month-hdr { background: var(--bs-primary); color: white; font-size: 0.7rem; font-weight: 700; text-align: center; padding: 6px 0; }
    .mw-month-cell { background: white; min-height: 85px; padding: 3px 4px; vertical-align: top; }
    .mw-month-cell.weekend { background: #f9fafb; }
    .mw-month-cell.outside { opacity: 0.35; }
    .mw-month-cell.today { box-shadow: inset 0 0 0 2px var(--bs-primary); }
    .mw-month-day { font-size: 0.72rem; font-weight: 700; color: #374151; margin-bottom: 2px; cursor: pointer; display: inline-block; }
    .mw-month-day:hover { color: var(--bs-accent); }
    .mw-month-chip { font-size: 0.62rem; padding: 2px 5px; border-radius: 3px; margin-bottom: 1px;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #1f2937; }
    .mw-month-chip:hover { filter: brightness(0.92); }
    .mw-month-more { font-size: 0.58rem; color: #6b7280; cursor: pointer; padding: 1px 4px; }
    .mw-month-more:hover { color: var(--bs-accent); }
    .task-hover-card {
      position: fixed; z-index: 10000; background: white; border-radius: 10px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.18); padding: 14px 16px; max-width: 340px;
      min-width: 240px; pointer-events: auto; font-size: 0.8rem; line-height: 1.5;
    }
    .task-hover-card .thc-name { font-weight: 700; color: #111827; font-size: 0.85rem; margin-bottom: 8px; }
    .task-hover-card .thc-row { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; }
    .task-hover-card .thc-label { color: #9ca3af; font-size: 0.7rem; min-width: 48px; flex-shrink: 0; }
    .task-hover-card .thc-val { color: #374151; font-size: 0.78rem; }
    .task-hover-card .thc-sep { border-top: 1px solid #f3f4f6; margin: 6px 0; }
    .task-hover-card .thc-bottom { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .task-hover-card .thc-pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; }
    .task-hover-card .thc-status { padding: 1px 8px; border-radius: 10px; font-size: 0.68rem; font-weight: 600; background: #f3f4f6; color: #6b7280; }
    .mw-tl-block {
      position: absolute; left: 2px; right: 2px;
      border-radius: 6px; padding: 4px 8px;
      font-size: 0.75rem; font-weight: 600; overflow: hidden;
      cursor: grab; z-index: 5;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
      border-left: 3px solid rgba(0,0,0,0.15);
    }
    .mw-tl-block-line1 {
      display: flex; align-items: baseline; gap: 4px; min-width: 0;
    }
    .mw-tl-block-line1 .tl-task-label {
      flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mw-tl-block-line1 .tl-due-label {
      flex-shrink: 0; font-size: 0.65rem; font-weight: 500;
    }
    .mw-tl-block-proj {
      font-size: 0.65rem; color: #6b7280; margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .mw-tl-block .mw-resize-handle {
      position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
      cursor: ns-resize; background: transparent;
      border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
    }
    .mw-tl-block .mw-resize-handle:hover {
      background: rgba(0,0,0,0.15);
    }
    .mw-tl-now-line {
      position: absolute; left: 60px; right: 0; height: 2px;
      background: #ef4444; z-index: 10; pointer-events: none;
    }
    .mw-tl-now-dot {
      position: absolute; left: -4px; top: -3px;
      width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
    }

    /* ── Timeline (Weekly 15-min slot view) ──────────────────── */
    .mw-tl-weekly {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
      background: #d1d5db;
    }
    .mw-tl-day-col {
      background: white; display: flex; flex-direction: column;
    }
    .mw-tl-day-header {
      font-size: 0.72rem; font-weight: 700; color: #6b7280;
      text-transform: uppercase; letter-spacing: 0.05em;
      padding: 10px 8px; border-bottom: 2px solid #d1d5db;
      text-align: center; background: #f8fafc;
    }
    .mw-tl-day-header.today { color: white; background: var(--bs-primary); }
    .mw-wk-section-label {
      font-size: 0.58rem; color: #9ca3af; text-transform: uppercase;
      letter-spacing: 0.08em; padding: 4px 6px; font-weight: 700;
      background: #f1f5f9; border-bottom: 2px solid #cbd5e1;
      text-align: center;
    }
    .mw-wk-slot {
      height: 24px; position: relative; cursor: pointer;
      border-bottom: 1px dotted #e5e7eb;
      transition: background 0.1s;
    }
    .mw-wk-slot.on-hour { border-top: 1px solid #cbd5e1; margin-top: -1px; border-bottom: 1px dotted #e5e7eb; }
    .mw-wk-slot:hover { background: #f0f4ff; }
    .mw-wk-slot.drop-target { background: #dbeafe; }
    .mw-wk-hour-label {
      position: absolute; left: 3px; top: 0; font-size: 0.5rem;
      color: #9ca3af; line-height: 24px; pointer-events: none;
    }
    .mw-wk-block {
      position: absolute; left: 1px; right: 1px;
      border-radius: 4px; padding: 1px 3px;
      font-size: 0.58rem; font-weight: 600; overflow: hidden;
      white-space: nowrap; text-overflow: ellipsis;
      cursor: grab; z-index: 5; line-height: 1.3;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      border-left: 3px solid rgba(0,0,0,0.15);
    }
    .mw-wk-block .mw-resize-handle {
      position: absolute; bottom: 0; left: 0; right: 0; height: 5px;
      cursor: ns-resize;
    }
    .mw-wk-block .mw-resize-handle:hover {
      background: rgba(0,0,0,0.12);
    }

    /* ── PARA section ──────────────────────────────────── */
    .mw-para-nav {
      display: flex; gap: 6px; margin-bottom: 12px;
    }
    .mw-para-content {
      background: white; border-radius: 10px; border: 1px solid #e5e7eb;
      box-shadow: 0 1px 3px rgba(0,0,0,0.07); padding: 16px; min-height: 120px;
    }

    /* ── Note compose modal ────────────────────────────── */
    .mw-modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      z-index: 400; display: flex; align-items: center; justify-content: center;
    }
    .mw-modal {
      background: white; border-radius: 12px; width: min(500px, 95vw);
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    }
    .mw-modal-header {
      padding: 14px 18px; border-bottom: 1px solid #e5e7eb;
      font-weight: 700; font-size: 0.95rem; color: var(--bs-primary);
      display: flex; justify-content: space-between; align-items: center;
    }
    .mw-modal-body { padding: 16px 18px; }
    .mw-modal-footer {
      padding: 12px 18px; border-top: 1px solid #e5e7eb;
      display: flex; justify-content: flex-end; gap: 8px;
    }
    .mw-btn-primary {
      background: var(--bs-primary); color: white; border: none; padding: 7px 16px;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      cursor: pointer; font-weight: 600;
    }
    .mw-btn-primary:hover { background: var(--bs-primary-hover); }
    .mw-btn-secondary {
      background: white; color: #374151; border: 1px solid #d1d5db;
      padding: 7px 16px; border-radius: 6px; font-size: 0.82rem;
      font-family: inherit; cursor: pointer;
    }
    .mw-btn-secondary:hover { background: #f3f4f6; }
    .mw-input {
      width: 100%; padding: 8px 10px; border: 1px solid #d1d5db;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      outline: none;
    }
    .mw-input:focus { border-color: var(--bs-accent); box-shadow: 0 0 0 2px var(--bs-focus-ring); }
    .mw-label {
      font-size: 0.75rem; color: #6b7280; display: block; margin-bottom: 4px;
    }
    .mw-field { margin-bottom: 12px; }

    /* ── Settings modal color swatches ─────────────────── */
    .mw-color-row { display: flex; gap: 6px; flex-wrap: wrap; }
    .mw-color-swatch {
      width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
      border: 2px solid transparent; transition: border-color 0.12s;
    }
    .mw-color-swatch:hover { border-color: #374151; }
    .mw-color-swatch.selected { border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-accent); }

    /* ── My Week Responsive ────────────────────────────── */
    @media (max-width: 900px) {
      .mw-dashboard { grid-template-columns: 1fr; }
      .mw-tl-weekly { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 640px) {
      .mw-tl-weekly { grid-template-columns: 1fr 1fr; }
      .mw-sidebar { min-width: 0; }
    }

    /* Destructive button */
    .mw-btn-danger {
      background: #dc2626; color: white; border: none; padding: 7px 16px;
      border-radius: 6px; font-size: 0.82rem; font-family: inherit;
      cursor: pointer; font-weight: 600;
    }
    .mw-btn-danger:hover { background: #b91c1c; }

    /* Status pill picker */
    .bs-status-picker {
      position: relative; display: inline-block; width: 100%;
    }
    .bs-status-selected {
      display: flex; align-items: center; gap: 6px; padding: 6px 10px;
      border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer;
      background: white; font-size: 0.82rem; font-family: inherit;
      transition: border-color 0.12s;
    }
    .bs-status-selected:hover { border-color: #93c5fd; }
    .bs-status-dot {
      width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    }
    .bs-status-dropdown {
      position: absolute; top: 100%; left: 0; right: 0; z-index: 450;
      background: white; border: 1px solid #d1d5db; border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15); margin-top: 2px;
      display: none;
    }
    .bs-status-dropdown.open { display: block; }
    .bs-status-option {
      display: flex; align-items: center; gap: 8px; padding: 8px 12px;
      cursor: pointer; font-size: 0.82rem; transition: background 0.1s;
    }
    .bs-status-option:hover { background: #f3f4f6; }
    .bs-status-option:first-child { border-radius: 6px 6px 0 0; }
    .bs-status-option:last-child { border-radius: 0 0 6px 6px; }
    .bs-status-option.selected { background: #eff6ff; font-weight: 600; }

    /* Toast notification */
    .mw-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--bs-primary); color: #fff; padding: 10px 20px; border-radius: 8px;
      font-size: 0.85rem; z-index: 10001; box-shadow: 0 4px 12px rgba(0,0,0,0.25);
      opacity: 0; transition: opacity 0.3s;
    }
    .mw-toast.show { opacity: 1; }

    /* ── Project Page ──────────────────────────────────────── */
    .project-page { margin: 0; padding: 0 0 40px; }
    .pp-header {
      display: flex; align-items: center; gap: 16px; padding: 10px 24px;
      background: var(--sidebar-bg); color: #fff;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .pp-body { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
    .pp-back {
      background: none; border: none; color: rgba(255,255,255,0.7);
      padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 0.85rem;
      font-family: inherit; transition: color 0.12s, background 0.12s;
    }
    .pp-back:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .pp-title { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
    .pp-job { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; }
    .pp-name { font-size: 1.1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pp-name-edit {
      background: none; border: none; color: rgba(255,255,255,0.4); cursor: pointer;
      font-size: 0.85rem; padding: 2px 4px; border-radius: 3px; transition: color 0.12s, background 0.12s;
      flex-shrink: 0;
    }
    .pp-name-edit:hover { color: #fff; background: rgba(255,255,255,0.15); }
    .pp-pm { font-size: 0.78rem; opacity: 0.8; white-space: nowrap; }
    .pp-sp-link {
      color: #fff; font-size: 0.78rem; text-decoration: none; white-space: nowrap;
      opacity: 0.8; transition: opacity 0.12s;
    }
    .pp-sp-link:hover { opacity: 1; }
    .pp-delete-btn {
      background: rgba(220,38,38,0.15); color: #fca5a5; border: 1px solid rgba(220,38,38,0.3);
      padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 0.75rem;
      font-family: inherit; font-weight: 500; transition: all 0.12s; white-space: nowrap;
    }
    .pp-delete-btn:hover { background: rgba(220,38,38,0.35); color: #fff; border-color: rgba(220,38,38,0.6); }

    .pp-tabs {
      display: flex; gap: 0; border-bottom: 2px solid #e5e7eb; margin-top: 0;
    }
    .pp-tab {
      padding: 10px 20px; background: none; border: none; cursor: pointer;
      font-size: 0.88rem; font-weight: 500; color: #6b7280;
      border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.12s;
    }
    .pp-tab:hover { color: var(--bs-primary); }
    .pp-tab.active { color: var(--bs-primary); font-weight: 700; border-bottom-color: var(--bs-primary); }
    .pp-tab-content { padding-top: 20px; }

    /* Summary layout */
    .pp-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media (max-width: 768px) { .pp-summary { grid-template-columns: 1fr; } }
    .pp-card {
      border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px;
      background: #fff;
    }
    .pp-card-title {
      font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.05em; color: #6b7280; margin-bottom: 10px;
    }
    .pp-stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .pp-stat-label { font-size: 0.8rem; color: #6b7280; }
    .pp-stat-value { font-size: 0.88rem; font-weight: 600; color: #1f2937; }
    .pp-goal-item {
      display: flex; align-items: center; gap: 10px; padding: 8px 0;
      border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.12s;
    }
    .pp-goal-item:hover { background: #f8fafc; margin: 0 -8px; padding: 8px; border-radius: 6px; }
    .pp-goal-item:last-child { border-bottom: none; }
    /* Gantt Chart */
    .pp-gantt { width: 100%; position: relative; overflow: hidden; }
    .pp-gantt-header { display: flex; align-items: flex-end; margin-bottom: 4px; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
    .pp-gantt-label-col { display: none; }
    .pp-gantt-timeline { flex: 1; position: relative; height: 18px; }
    .pp-gantt-date-col { display: none; }
    .pp-gantt-month { position: absolute; bottom: 0; font-size: 0.65rem; color: #9ca3af; transform: translateX(-50%); }
    .pp-gantt-today { position: absolute; top: 0; width: 2px; height: 100%; background: #ef4444; opacity: 0.4; z-index: 1; pointer-events: none; }
    .pp-gantt-body { position: relative; overflow: hidden; }
    .pp-gantt-row { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid #f1f5f9; }
    .pp-gantt-row:hover { background: #f8fafc; }
    .pp-gantt-label { display: none; }
    .pp-gantt-track { flex: 1; position: relative; height: 40px; }
    .pp-gantt-bar { position: absolute; top: 1px; height: 22px; border-radius: 9999px; cursor: pointer; overflow: hidden; min-width: 8px; transition: all 0.15s; display: flex; align-items: center; border: 2px solid transparent; }
    .pp-gantt-bar:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
    .pp-gantt-bar.status-on_track { border-color: #107C10; }
    .pp-gantt-bar.status-behind { border-color: #F0C040; }
    .pp-gantt-bar.status-at_risk { border-color: #E07070; }
    .pp-gantt-bar.status-not_started { border-color: transparent; opacity: 0.7; }
    .pp-gantt-bar.status-closed { border-color: transparent; opacity: 0.4; }
    .pp-gantt-bar-fill { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.45); pointer-events: none; }
    .pp-gantt-bar-label { position: relative; z-index: 1; font-size: 0.62rem; font-weight: 500; color: #1f2937; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.7; }
    .pp-gantt-sublabel { position: absolute; top: 24px; font-size: 0.72rem; font-weight: 600; color: #374151; white-space: nowrap; pointer-events: none; }
    .pp-gantt-start-inline { position: absolute; top: 4px; font-size: 0.62rem; color: #6b7280; white-space: nowrap; margin-right: 4px; text-align: right; }
    .pp-gantt-due-inline { position: absolute; top: 4px; font-size: 0.62rem; color: #6b7280; white-space: nowrap; margin-left: 4px; cursor: pointer; }
    .pp-gantt-due-inline:hover { color: var(--bs-secondary); text-decoration: underline; }
    .pp-gantt-milestone { position: absolute; top: 4px; width: 12px; height: 12px; transform: translateX(-6px) rotate(45deg); border: 2px solid #6b7280; background: white; cursor: pointer; z-index: 2; }
    .pp-gantt-milestone:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
    .pp-flow-del { background: none; border: none; cursor: pointer; opacity: 0.2; font-size: 0.6rem; padding: 0; }
    .pp-flow-del:hover { opacity: 1; }
    /* Goal Editor modal */
    .pp-ge-dep-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; background: #f8fafc; border-radius: 6px; border: 1px solid #e5e7eb; flex-wrap: wrap; }
    .pp-ge-dep-row:hover { border-color: #93c5fd; }
    .pg-edit-goal-btn { cursor: pointer; font-size: 0.78rem; opacity: 0.3; position: relative; z-index: 1; padding: 0 4px; }
    .pg-edit-goal-btn:hover { opacity: 1; }
    .pp-flow-ext { margin-top: 12px; background: #f8fafc; border-radius: 8px; padding: 10px 14px; }
    .pp-flow-ext-title { font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
    .pp-flow-ext-item { font-size: 0.73rem; color: #374151; padding: 3px 0; border-bottom: 1px solid #e5e7eb; display: inline-block; margin-right: 12px; }
    .pp-flow-ext-item:last-child { border-bottom: none; }
    .pp-deliv-pill {
      font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 9999px;
      white-space: nowrap; color: #1f2937;
    }
    .pp-deliv-stats { font-size: 0.75rem; color: #6b7280; margin-left: auto; white-space: nowrap; }
    .pp-team-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f1f5f9; }
    .pp-team-row:last-child { border-bottom: none; }
    .pp-team-role { font-size: 0.78rem; color: #6b7280; }
    .pp-team-name { font-size: 0.78rem; font-weight: 600; color: #1f2937; }
    .pp-activity-item { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
    .pp-activity-item:last-child { border-bottom: none; }
    .pp-activity-date { font-size: 0.75rem; color: #6b7280; }
    .pp-activity-text { font-size: 0.8rem; color: #1f2937; margin-top: 2px; }

    /* Grid layout — controls */
    .pp-grid-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
    .pp-grid-toggle {
      display: inline-flex; border: 1px solid #d1d5db; border-radius: 6px; overflow: hidden;
    }
    .pp-grid-toggle-btn {
      padding: 6px 14px; font-size: 0.78rem; background: #fff; border: none;
      cursor: pointer; color: #6b7280; transition: all 0.12s;
    }
    .pp-grid-toggle-btn.active { background: var(--bs-primary); color: #fff; }
    .pp-grid-toggle-btn:not(:last-child) { border-right: 1px solid #d1d5db; }
    .pp-grid-stats { font-size: 0.75rem; color: #6b7280; }

    /* Grid — section containers */
    .pg-section {
      margin-bottom: 10px; border: 1px solid #e0e0e0; border-radius: 8px;
      overflow: visible; background: #fff;
    }

    /* Grid — goal header */
    .pg-deliv-header {
      display: flex; align-items: center; gap: 8px; padding: 8px 16px;
      font-weight: 700; font-size: 0.85rem; cursor: pointer; position: relative;
      overflow: visible; user-select: none; transition: filter 0.12s;
      border-radius: 8px 8px 0 0;
    }
    .pg-deliv-header:hover { filter: brightness(0.95); }
    .pg-deliv-fill {
      position: absolute; right: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.45); pointer-events: none;
      transition: width 0.3s; border-radius: 0 8px 0 0;
    }
    .pg-deliv-name {
      font-size: 0.85rem; font-weight: 700; color: #1f2937;
      white-space: nowrap; position: relative; z-index: 1;
    }
    .pg-deliv-meta {
      display: flex; align-items: center; gap: 4px; font-size: 0.75rem;
      font-weight: 500; color: #374151; position: relative; z-index: 1;
      white-space: nowrap;
    }
    .pg-deliv-pct {
      margin-left: auto; font-size: 0.82rem; font-weight: 700; color: #1f2937;
      position: relative; z-index: 1; white-space: nowrap;
    }
    .pg-add-task-btn {
      position: relative; z-index: 1; margin-left: 8px;
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(255,255,255,0.7); border: 1px solid rgba(0,0,0,0.15);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1rem; font-weight: 700; color: var(--bs-primary); cursor: pointer;
      line-height: 1; transition: background 0.15s, transform 0.15s;
    }
    .pg-add-task-btn:hover { background: #fff; transform: scale(1.15); box-shadow: 0 1px 4px rgba(0,0,0,0.15); }

    /* Task modal form styles */
    .pp-tm-label { display: block; font-size: 0.75rem; font-weight: 600; color: #6b7280; margin-bottom: 4px; margin-top: 10px; }
    .pp-tm-input { display: block; width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.85rem; margin-bottom: 4px; box-sizing: border-box; }
    .pp-tm-input:focus { outline: none; border-color: var(--bs-accent); box-shadow: 0 0 0 2px var(--bs-focus-ring); }
    .pp-tm-deliv-pill { border: 2px solid transparent; transition: border-color 0.15s; }
    .pp-tm-deliv-pill:hover { filter: brightness(0.95); }
    .pp-tm-selected { border-color: var(--bs-primary) !important; }

    /* Grid — column header */
    .pg-col-header {
      display: flex; align-items: center; gap: 8px; padding: 6px 16px;
      font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: #6b7280;
      border-bottom: 1px solid #e5e7eb; background: #fff;
      position: sticky; top: 0; z-index: 2;
    }

    /* Grid — parent/summary row */
    .pg-parent-row {
      display: flex; align-items: center; gap: 8px; padding: 6px 16px;
      font-weight: 600; font-size: 0.82rem; cursor: pointer; position: relative;
      overflow: hidden; user-select: none; transition: filter 0.12s;
      border-bottom: 1px solid #f0f0f0;
    }
    .pg-parent-row:hover { filter: brightness(0.95); }
    .pg-parent-fill {
      position: absolute; right: 0; top: 0; bottom: 0;
      background: rgba(255,255,255,0.5); pointer-events: none;
    }
    .pg-parent-meta {
      display: flex; align-items: center; gap: 4px; font-size: 0.75rem;
      font-weight: 500; color: #374151; position: relative; z-index: 1;
      white-space: nowrap;
    }
    .pg-parent-pct {
      margin-left: auto; font-size: 0.78rem; font-weight: 700; color: #1f2937;
      position: relative; z-index: 1;
    }

    /* Grid — leaf task row */
    .pg-row {
      display: flex; align-items: center; gap: 8px; padding: 5px 16px;
      font-size: 0.82rem; min-height: 32px; background: #fff;
      border-bottom: 1px solid #f0f0f0; transition: filter 0.08s;
    }
    .pg-row:hover { filter: brightness(0.97); }
    .pg-row.flash-green { background: #dcfce7 !important; transition: background 0.3s; }
    .pg-row.flash-red { background: #fee2e2 !important; transition: background 0.3s; }
    .pg-row.pg-done { opacity: 0.5; }
    .pg-row.pg-done .pg-col-name { text-decoration: line-through; }

    /* Grid — column widths */
    .pg-col-check { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .pg-col-pri { width: 24px; flex-shrink: 0; text-align: center; }
    .pg-col-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f2937; }
    .pg-trigger-bolt { color: #f59e0b; font-size: 0.7rem; cursor: help; margin-left: 3px; }
    .pg-col-deliv { width: 140px; flex-shrink: 0; }
    .pg-col-assignee { width: 120px; flex-shrink: 0; }
    .pg-col-due { width: 100px; flex-shrink: 0; }
    .pg-col-wait { width: 45px; flex-shrink: 0; text-align: center; font-size: 0.75rem; }
    .pg-col-offset { width: 55px; flex-shrink: 0; color: #6b7280; font-size: 0.75rem; }
    .pg-col-effort { width: 55px; flex-shrink: 0; }
    .pg-col-pct { width: 70px; flex-shrink: 0; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

    /* Grid — shared elements */
    .pg-sep { color: #9ca3af; margin: 0 2px; font-size: 0.75rem; position: relative; z-index: 1; }
    .pp-chevron {
      display: inline-block; width: 16px; cursor: pointer; font-size: 0.7rem;
      transition: transform 0.15s; color: #6b7280; user-select: none;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .pp-chevron.open { transform: rotate(90deg); }
    .pp-task-checkbox {
      width: 16px; height: 16px; border: 1.5px solid #d1d5db; border-radius: 3px;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      font-size: 0.65rem; color: transparent; transition: all 0.12s; flex-shrink: 0;
    }
    .pp-task-checkbox.done { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
    .pp-inline-input {
      border: 1px solid var(--bs-accent); border-radius: 4px; padding: 2px 6px;
      font-size: 0.82rem; font-family: inherit; outline: none;
      box-shadow: 0 0 0 2px rgba(96,165,250,0.2);
    }
    .pp-pct-bar {
      display: inline-block; width: 40px; height: 6px; background: #e5e7eb;
      border-radius: 3px; overflow: hidden; vertical-align: middle;
    }
    .pp-pct-fill { height: 100%; background: var(--bs-primary); border-radius: 3px; }
    .pp-pct-text { font-size: 0.75rem; color: #6b7280; margin-left: 4px; }
    .pp-assignee-pill {
      font-size: 0.72rem; padding: 1px 7px; border-radius: 9999px;
      white-space: nowrap; display: inline-block;
    }
    .pp-no-goal { color: #6b7280; font-style: italic; font-size: 0.78rem; }
    .pp-deliv-tag {
      font-size: 0.68rem; padding: 1px 6px; border-radius: 9999px;
      white-space: nowrap; display: inline-block; margin-left: 6px;
    }
    /* Indent levels */
    .pg-indent-0 { padding-left: 8px; }
    .pg-indent-1 { padding-left: 28px; }
    .pg-indent-2 { padding-left: 48px; }
    .pg-indent-3 { padding-left: 68px; }
    .pg-indent-4 { padding-left: 88px; }
    .pg-indent-5 { padding-left: 108px; }

    /* ═══ PROJECT WIZARD ═══ */
    .wiz-overlay { position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);animation:fadeIn 0.15s ease }
    .wiz-modal { background:#fff;border-radius:14px;width:94vw;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 48px rgba(0,0,0,0.25);display:flex;flex-direction:column }
    .wiz-header { background:var(--sidebar-bg);padding:16px 20px;border-radius:14px 14px 0 0;display:flex;justify-content:space-between;align-items:center }
    .wiz-close { background:none;border:none;color:rgba(255,255,255,0.7);font-size:1.2rem;cursor:pointer;padding:4px 8px }
    .wiz-close:hover { color:#fff }
    .wiz-steps { display:flex;align-items:center;padding:16px 20px 8px;gap:0 }
    .wiz-step { display:flex;align-items:center;gap:6px;white-space:nowrap }
    .wiz-step-num { width:24px;height:24px;border-radius:50%;background:#e5e7eb;color:#6b7280;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:600 }
    .wiz-step.active .wiz-step-num { background:var(--bs-primary);color:#fff }
    .wiz-step.done .wiz-step-num { background:#22c55e;color:#fff }
    .wiz-step-label { font-size:0.7rem;color:#9ca3af }
    .wiz-step.active .wiz-step-label { color:var(--bs-primary);font-weight:600 }
    .wiz-step-line { flex:1;height:2px;background:#e5e7eb;margin:0 6px;min-width:12px }
    .wiz-step-line.done { background:#22c55e }
    .wiz-body { padding:20px;flex:1 }
    .wiz-nav { display:flex;justify-content:space-between;padding:12px 20px 20px;border-top:1px solid #f3f4f6 }
    .wiz-field { margin-bottom:14px }
    .wiz-label { display:block;font-size:0.78rem;font-weight:600;color:#374151;margin-bottom:4px }
    .wiz-input { width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:0.85rem;box-sizing:border-box;outline:none;transition:border 0.15s }
    .wiz-input:focus { border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .wiz-error { color:#dc2626;font-size:0.78rem;margin-top:8px;padding:8px 12px;background:#fef2f2;border-radius:6px }
    .wiz-city-grid { display:flex;gap:10px;flex-wrap:wrap }
    .wiz-city-card { flex:1;min-width:120px;padding:14px;border:2px solid #e5e7eb;border-radius:10px;cursor:pointer;text-align:center;transition:all 0.15s }
    .wiz-city-card:hover { border-color:#93c5fd }
    .wiz-city-card.selected { border-color:var(--bs-primary);background:#f0f6ff }
    .wiz-city-name { font-weight:600;font-size:0.88rem;color:#111827 }
    .wiz-city-sub { font-size:0.68rem;color:#6b7280;margin-top:4px }
    .wiz-toggle-row { display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f3f4f6 }
    .wiz-toggle-label { font-size:0.85rem;font-weight:500;color:#111827 }
    .wiz-toggle-sub { font-size:0.7rem;color:#6b7280;margin-top:2px }
    .wiz-toggle { display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px }
    .wiz-toggle-track { width:40px;height:22px;border-radius:11px;background:#d1d5db;position:relative;transition:background 0.2s }
    .wiz-toggle.on .wiz-toggle-track { background:var(--bs-primary) }
    .wiz-toggle-thumb { position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.2) }
    .wiz-toggle.on .wiz-toggle-thumb { transform:translateX(18px) }
    .wiz-toggle-text { font-size:0.75rem;color:#6b7280;min-width:24px }
    .wiz-check-row { display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #f3f4f6;cursor:pointer }
    .wiz-check-row input[type=checkbox] { margin-top:3px;accent-color:var(--bs-primary);width:18px;height:18px }
    .wiz-hint { font-size:0.72rem;color:#ea580c;background:#fff7ed;padding:8px 12px;border-radius:6px;margin-bottom:14px }
    .wiz-review-section { margin-bottom:16px }
    .wiz-review-header { font-size:0.82rem;font-weight:600;color:var(--bs-primary);margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #e5e7eb }
    .wiz-review-row { display:flex;justify-content:space-between;font-size:0.8rem;padding:3px 0 }
    .wiz-review-key { color:#6b7280 }
    .wiz-block-grid { display:flex;flex-wrap:wrap;gap:6px }
    .wiz-block-pill { padding:5px 12px;border-radius:16px;font-size:0.72rem;font-weight:500;border:1.5px solid;cursor:pointer;transition:all 0.15s }
    .wiz-block-pill.on { background:#f0f6ff;border-color:var(--bs-primary);color:var(--bs-primary) }
    .wiz-block-pill.off { background:#f9fafb;border-color:#d1d5db;color:#9ca3af;text-decoration:line-through }
    .wiz-block-pill:hover { opacity:0.85 }
    .wiz-review-footer { font-size:0.72rem;color:#6b7280;text-align:center;margin-top:12px;padding-top:10px;border-top:1px solid #f3f4f6 }
    .wiz-dropdown { position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #d1d5db;border-radius:8px;max-height:200px;overflow-y:auto;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,0.1);margin-top:2px }
    .wiz-dd-item { padding:8px 12px;font-size:0.82rem;cursor:pointer;border-bottom:1px solid #f3f4f6 }
    .wiz-dd-item:hover { background:#f0f6ff }
    .wiz-dd-item:last-child { border-bottom:none }

    /* ═══ CITY CONTACTS ═══ */
    .pp-contact-input { border:1px solid #d1d5db;border-radius:6px;padding:3px 8px;font-size:0.8rem;width:200px;background:#fff }
    .pp-contact-input:focus { outline:none;border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .cc-table { width:100%;border-collapse:collapse;font-size:0.8rem }
    .cc-table th { text-align:left;padding:6px 8px;background:#f3f4f6;border-bottom:2px solid #e5e7eb;font-weight:600;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.03em;color:#6b7280 }
    .cc-table td { padding:4px 8px;border-bottom:1px solid #e5e7eb }
    .cc-table input:not([type=checkbox]) { border:1px solid transparent;padding:2px 4px;width:100%;font-size:0.78rem;border-radius:4px;background:transparent }
    .cc-table input:not([type=checkbox]):focus { border-color:var(--bs-accent);outline:none;background:#fff }
    .cc-table tr:hover input:not([type=checkbox]) { background:#f9fafb }

    /* ═══ TEMPLATE EDITOR ═══ */
    .tpl-controls { padding:12px 16px;background:#f9fafb;border-bottom:1px solid #e5e7eb }
    .tpl-city-row { display:flex;align-items:center;gap:12px;margin-bottom:8px }
    .tpl-city-label { font-size:0.78rem;font-weight:600;color:#374151 }
    .tpl-radio { font-size:0.8rem;color:#374151;cursor:pointer;display:flex;align-items:center;gap:4px }
    .tpl-radio input { accent-color:var(--bs-primary) }
    .tpl-tag-row { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px }
    .tpl-tag-btn { padding:4px 12px;border-radius:16px;font-size:0.72rem;font-weight:600;border:2px solid var(--tag-color);color:var(--tag-color);background:#fff;cursor:pointer;transition:all 0.15s }
    .tpl-tag-btn.active { background:var(--tag-color);color:#fff }
    .tpl-tag-btn:hover { opacity:0.85 }
    .tpl-stats { font-size:0.72rem;color:#6b7280 }
    .tpl-body { padding:0 }
    .tpl-tag-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 1px;vertical-align:middle }

    /* Template editor: task name column — resizable in outline view */
    .tpl-col-name { width:340px;min-width:160px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1f2937;position:relative }
    .tpl-col-resize { position:absolute;right:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:3 }
    .tpl-col-resize:hover, .tpl-col-resize.dragging { background:rgba(59,130,246,0.3) }

    /* Template editor: inline tag strip — fills middle, pushes wait/effort to right */
    .tpl-col-tags-inline { display:flex;align-items:center;gap:2px;flex:1;flex-wrap:wrap }
    .tpl-col-tags-hdr { flex:1 }

    /* Each inline tag toggle pill */
    .tpl-tag-pill { display:inline-block;font-size:0.7rem;font-weight:500;padding:3px 10px;border-radius:999px;border:1.5px solid var(--tag-color);cursor:pointer;white-space:nowrap;transition:all 0.15s;user-select:none;position:relative;z-index:2 }
    .tpl-tag-pill.on { background:var(--tag-color);color:#fff }
    .tpl-tag-pill.off { background:#fff;color:var(--tag-color);opacity:0.35 }
    .tpl-tag-pill.off:hover { opacity:0.7 }

    /* Template editor: tighter gap on rows to align with header */
    .tpl-col-header { gap:4px }
    .tpl-row { gap:4px !important }
    .tpl-parent-row { background:#f8f9fb !important;border-bottom:1px solid #e0e3e8 !important;font-weight:700 }
    .tpl-parent-row:hover { background:#f0f2f5 !important }
    .tpl-parent-row .tpl-col-tags-inline { min-width:auto }
    /* Template task row — clickable */
    .tpl-row { cursor:pointer }
    .tpl-row:hover { background:rgba(59,130,246,0.04) !important }

    /* Template edit dialog */
    .tpl-dialog-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;display:flex;align-items:center;justify-content:center }
    .tpl-dialog { background:#fff;border-radius:12px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3) }
    .tpl-dialog-header { display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#1e293b;color:#fff;border-radius:12px 12px 0 0 }
    .tpl-dialog-header h3 { margin:0;font-size:0.95rem;font-weight:600 }
    .tpl-dialog-close { background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;opacity:0.7;padding:0 4px }
    .tpl-dialog-close:hover { opacity:1 }
    .tpl-dialog-body { padding:20px }
    .tpl-dialog-field { margin-bottom:16px }
    .tpl-dialog-field label { display:block;font-size:0.75rem;font-weight:600;color:#374151;margin-bottom:4px }
    .tpl-dialog-field input { width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:0.85rem;box-sizing:border-box }
    .tpl-dialog-field input:focus { outline:none;border-color:var(--bs-accent);box-shadow:0 0 0 2px var(--bs-focus-ring) }
    .tpl-dialog-tags { display:flex;flex-wrap:wrap;gap:6px;margin-top:4px }
    .tpl-goal-picker { flex-wrap:wrap;gap:4px;margin-top:6px;padding:8px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px }
    .tpl-dialog-footer { display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid #e5e7eb }
    .tpl-dialog-save { background:var(--bs-primary);color:#fff;border:none;padding:8px 20px;border-radius:6px;font-size:0.8rem;font-weight:600;cursor:pointer }
    .tpl-dialog-save:hover { background:var(--bs-primary-hover) }
    .tpl-dialog-delete { background:none;border:none;color:#dc2626;font-size:0.78rem;cursor:pointer;padding:4px 8px }
    .tpl-dialog-delete:hover { text-decoration:underline }
    .tpl-del-btn:hover { opacity:1;color:#dc2626 }

    /* ═══ PROJECT SWITCHER ═══ */
    .pp-switcher-trigger { cursor:pointer;border-bottom:2px dotted rgba(255,255,255,0.4);transition:border-color 0.15s }
    .pp-switcher-trigger:hover { border-bottom-color:rgba(255,255,255,0.8) }
    .pp-switcher { position:absolute;top:100%;left:0;width:380px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,0.2);z-index:10002;margin-top:6px }
    .pp-switcher-input { width:100%;padding:10px 12px;border:none;border-bottom:1px solid #e5e7eb;font-size:0.85rem;outline:none;border-radius:8px 8px 0 0;box-sizing:border-box }
    .pp-switcher-list { max-height:320px;overflow-y:auto }
    .pp-switcher-item { padding:8px 12px;cursor:pointer;font-size:0.82rem;display:flex;gap:8px;align-items:baseline;border-bottom:1px solid #f3f4f6 }
    .pp-switcher-item:hover { background:#f0f4ff }
    .pp-switcher-item.active { background:#eef2ff;font-weight:600 }
    .pp-switcher-job { font-family:monospace;font-weight:700;color:var(--bs-primary);white-space:nowrap }
    .pp-switcher-name { color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
    .pp-switcher-pm { color:#9ca3af;font-size:0.72rem;margin-left:auto;white-space:nowrap }

    /* ═══ SURVEYOR COORDINATION DASHBOARD ═══ */
    .sv-title-bar { display:flex;align-items:center;gap:16px;padding:16px 0 8px }
    .sv-logo { height:68px }
    .sv-title-text { flex:1 }
    .sv-title { font-size:1.05rem;font-weight:700;color:var(--bs-primary) }
    .sv-legend { font-size:0.72rem;color:#6b7280;margin-top:2px }
    .sv-legend span { margin-right:12px }
    .sv-header { display:flex;align-items:center;gap:12px;padding:4px 0 8px;flex-wrap:wrap }
    .sv-tabs { display:flex;gap:4px;flex:1;flex-wrap:wrap }
    .sv-tab { padding:6px 14px;border:none;background:none;font-size:0.82rem;font-weight:500;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;border-radius:0;transition:all 0.15s }
    .sv-tab:hover { color:var(--bs-primary) }
    .sv-tab-active { color:var(--bs-primary);font-weight:600;border-bottom-color:var(--bs-primary) }
    .sv-table { width:100%;border-collapse:collapse;font-size:0.82rem;margin-top:4px }
    .sv-table th { padding:8px 10px;text-align:left;font-size:0.72rem;font-weight:600;color:#fff;background:#2a5a8c;white-space:nowrap }
    .sv-col-check { width:32px;text-align:center !important }
    .sv-table td { padding:7px 10px;border-bottom:1px solid #d1d5db;vertical-align:middle;overflow:hidden;text-overflow:ellipsis }
    @media print { .sv-col-check { display:none !important } }
    .sv-row { background:#fff }
    .sv-stripe { background:#e8edf2 }
    .sv-row:hover { background:#dce4ed }
    .sv-future-divider { font-size:0.95rem;font-weight:700;color:#1f2937;margin:18px 0 6px;padding:4px 0;border-bottom:2px solid #1f2937 }
    .sv-comment { max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:#374151 }
    .sv-comment:hover { color:var(--bs-primary);text-decoration:underline dotted }
    .sv-check { width:16px;height:16px;cursor:pointer;accent-color:var(--bs-primary) }
    @media (max-width:768px) {
      .sv-title-bar { flex-direction:column;gap:8px }
      .sv-header { flex-direction:column;align-items:flex-start;gap:8px }
      .sv-tabs { width:100%;overflow-x:auto }
      .sv-comment { max-width:120px }
    }

    /* ─── Home Page ─── */
    .home-grid { display:grid; grid-template-columns:3fr 2fr; gap:16px; align-items:start }
    @media (max-width: 768px) { .home-grid { grid-template-columns:1fr; } }
    .home-card { background:white; border:1px solid #e2e8f0; border-radius:10px; overflow:visible }
    .home-card-header { padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #f1f5f9 }
    .home-card-title { font-size:13px; font-weight:700; color:var(--bs-primary) }
    .home-card-body { padding:0 }
    .home-card-footer { padding:8px 16px; border-top:1px solid #f1f5f9; text-align:center }
    .home-card-footer a { font-size:11px; color:var(--bs-secondary); text-decoration:none; font-weight:500 }
    .home-badges { display:flex; gap:6px; flex-wrap:wrap }
    .home-badge { font-size:10px; padding:2px 8px; border-radius:12px; font-weight:600 }
    .home-badge-overdue { background:#fef2f2; color:#dc2626 }
    .home-badge-today { background:#fffbeb; color:#ea580c }
    .home-badge-week { background:#f8fafc; color:#64748b }
    .home-badge-progress { background:#eff6ff; color:#1e40af }
    .home-badge-done { background:#f0fdf4; color:#166534 }

    .home-section-label { padding:6px 16px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:#94a3b8; background:#fafbfc }

    .home-task-row { padding:8px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #f8fafc; font-size:12px; cursor:pointer; transition:background 0.1s }
    .home-task-row:hover { background:#f8fafc }
    .home-task-row:last-child { border-bottom:none }
    .home-task-done .home-task-name { text-decoration:line-through; color:#94a3b8 }

    .home-urgency { width:3px; min-height:28px; border-radius:2px; flex-shrink:0 }
    .home-urgency-overdue { background:#dc2626 }
    .home-urgency-today { background:#ea580c }
    .home-urgency-upcoming { background:#94a3b8 }
    .home-urgency-done { background:#22c55e }

    .home-task-content { flex:1; min-width:0 }
    .home-task-name { font-weight:500; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
    .home-task-meta { font-size:10px; color:#94a3b8; margin-top:1px }
    .home-date { font-size:11px; font-weight:600; white-space:nowrap }
    .home-date-overdue { color:#dc2626 }
    .home-date-today { color:#ea580c }
    .home-date-upcoming { color:#64748b }
    .home-date-done { color:#22c55e; text-decoration:line-through }
    .home-assignee { font-size:10px; color:#64748b; font-weight:500; white-space:nowrap }
    .home-check { width:15px; height:15px; cursor:pointer; accent-color:var(--bs-primary); flex-shrink:0 }
    .home-badge-active { outline:2px solid currentColor; outline-offset:-1px }

    .home-attn-row { padding:10px 16px; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background 0.1s }
    .home-attn-row:hover { background:#f8fafc }
    .home-attn-row:last-child { border-bottom:none }
    .home-attn-job { font-family:'SF Mono','Consolas',monospace; font-size:11px; color:var(--bs-primary); font-weight:700 }
    .home-attn-name { font-size:12px; font-weight:600; color:#1e293b }
    .home-attn-reason { font-size:11px; margin-top:2px }

    .home-log-input { width:100%; border:1px solid #e2e8f0; border-radius:6px; padding:10px 12px; font-size:12px; resize:none; min-height:60px; font-family:inherit; color:#334155; background:#f8fafc }
    .home-log-input:focus { outline:none; border-color:var(--bs-accent); background:white }
    .home-log-footer { display:flex; gap:8px; margin-top:8px; align-items:center }
    .home-log-select { width:100%; padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; font-size:11px; color:#334155; background:#f8fafc }
    .home-log-select:focus { outline:none; border-color:var(--bs-accent) }
    .home-log-btn { background:var(--bs-primary); color:white; border:none; padding:6px 16px; border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap }
    .home-log-btn:hover { background:#2a4a72 }
    .home-type-pill { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:3px 10px; font-size:10px; color:#64748b; cursor:pointer; font-family:inherit; transition:all 0.1s }
    .home-type-pill:hover { border-color:#94a3b8; color:#334155 }
    .home-type-pill.home-type-active { background:var(--bs-primary); color:white; border-color:var(--bs-primary) }

    .home-proj-dropdown { position:absolute; top:100%; left:0; right:0; max-height:200px; overflow-y:auto; background:white; border:1px solid #e2e8f0; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:100; margin-top:2px }
    .home-proj-option { padding:6px 10px; font-size:11px; cursor:pointer }
    .home-proj-option:hover { background:#f1f5f9 }

    @media (max-width:768px) {
      #home-dashboard { grid-template-columns:1fr !important }
    }

/* ── Project Financial Tab ─────────────────────────── */
.pf-verdict-strip { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:20px; margin-bottom:20px }
.pf-flow { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:16px }
.pf-flow-item { text-align:center; min-width:100px }
.pf-flow-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:#6b7280; margin-bottom:2px }
.pf-flow-value { font-size:1.15rem; font-weight:700; color:var(--bs-primary) }
.pf-flow-arrow { font-size:1.3rem; color:#d1d5db }
.pf-positive .pf-flow-value { color:#059669 }
.pf-negative .pf-flow-value { color:#dc2626 }
.pf-budget-bar { margin-bottom:16px }
.pf-budget-label { font-size:0.75rem; color:#6b7280; margin-bottom:4px }
.pf-kpi-row { display:flex; gap:12px; flex-wrap:wrap }
.pf-selector-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; flex-wrap:wrap }
.pf-selector-bar select { font-size:0.82rem; min-width:220px }
.pf-selector-bar .pf-invoice-select { min-width:260px }
.pf-period-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
.pf-period-chips::-webkit-scrollbar { height:4px }
.pf-period-chips::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px }
.pf-period-chip { white-space:nowrap; padding:5px 12px; border:1px solid #d1d5db; border-radius:9999px; background:#fff; font-size:0.76rem; font-weight:500; color:#374151; cursor:pointer; transition:all 0.15s; flex-shrink:0 }
.pf-period-chip:hover { background:#f0f4f8; border-color:#9ca3af }
.pf-period-chip.pf-chip-margin-pos { border-color:#86efac; background:#f0fdf4 }
.pf-period-chip.pf-chip-margin-neg { border-color:#fca5a5; background:#fef2f2 }
.pf-period-chip.pf-chip-active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.pf-period-range { font-size:0.72rem; color:#6b7280; margin-top:2px }
.pf-invoice-highlight td { background:var(--bs-accent-light) !important; border-left:3px solid var(--bs-accent) }
.pf-invoice-link { color:var(--bs-primary); text-decoration:none; font-family:monospace }
.pf-invoice-link:hover { text-decoration:underline; color:var(--bs-secondary) }
.pf-kpi-chip { flex:1; min-width:100px; text-align:center; background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:10px 8px }
.pf-kpi-chip.pf-chip-good { border-color:#bbf7d0; background:#f0fdf4 }
.pf-kpi-chip.pf-chip-warn { border-color:#fecaca; background:#fef2f2 }
.pf-kpi-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; margin-bottom:2px }
.pf-kpi-value { font-size:1rem; font-weight:700; color:#111827 }
.pf-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.pf-detail-col { display:flex; flex-direction:column; gap:16px }
.pf-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04) }
.pf-card-title { font-size:0.82rem; font-weight:700; color:var(--bs-primary); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.04em }
.pf-table { width:100%; border-collapse:collapse; font-size:0.8rem }
.pf-table th { text-align:left; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; padding:6px 8px; border-bottom:2px solid #e5e7eb; font-weight:600 }
.pf-table td { padding:6px 8px; border-bottom:1px solid #f1f5f9 }
.pf-table tr:hover td { background:#f9fafb }
.pf-table .pf-num { text-align:right; font-variant-numeric:tabular-nums }
.pf-table tfoot td { font-weight:700; border-top:2px solid #e5e7eb; border-bottom:none }
.pf-status { font-size:0.68rem; padding:2px 8px; border-radius:9999px; font-weight:600; text-transform:capitalize }
.pf-status-paid { background:#dcfce7; color:#166534 }
.pf-status-sent { background:#dbeafe; color:#1e40af }
.pf-status-draft { background:#f3f4f6; color:#6b7280 }
.pf-status-overdue { background:#fee2e2; color:#991b1b }
.pf-drill-parent { cursor:pointer }
.pf-drill-parent:hover td { background:#f0f4ff }
.pf-drill-arrow { display:inline-block; font-size:0.6rem; width:12px; color:#9ca3af; transition:transform 0.15s }
.pf-drill-detail td { padding:0 !important; background:#f8fafc !important; border-bottom:1px solid #e5e7eb }
.pf-drill-table { margin:4px 0 4px 24px; width:calc(100% - 24px); font-size:0.75rem }
.pf-drill-table th { font-size:0.65rem; padding:4px 6px; color:#9ca3af }
.pf-drill-table td { padding:3px 6px; border-bottom:1px solid #f1f5f9 }
.pf-drill-table tr:hover td { background:#eef2ff }
@media (max-width:768px) {
  .pf-detail-grid { grid-template-columns:1fr }
  .pf-flow { gap:8px }
  .pf-flow-item { min-width:70px }
  .pf-flow-value { font-size:0.95rem }
  .pf-kpi-row { gap:8px }
  .pf-selector-bar { flex-direction:column }
  .pf-selector-bar select { min-width:100% }
  .pf-period-chips { gap:4px }
}

/* ── Finance Module ──────────────────────────────────────────────── */
.fin-filter-row { display:flex; gap:24px; padding:12px 16px; background:#f9fafb; border-bottom:1px solid #e5e7eb; flex-wrap:wrap }
.fin-filter-row.fin-filter-dimmed { opacity:0.4; pointer-events:none; position:relative }
.fin-filter-group { display:flex; align-items:center; gap:8px }
.fin-filter-label { font-size:0.7rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:0.04em; min-width:40px }
.fin-chip-row { display:flex; gap:4px; flex-wrap:wrap }
.fin-filter-chip { padding:4px 10px; border:1px solid #d1d5db; border-radius:9999px; background:#fff; font-size:0.72rem; font-weight:500; color:#374151; cursor:pointer; transition:all 0.12s; white-space:nowrap }
.fin-filter-chip:hover { background:#f0f4f8; border-color:#9ca3af }
.fin-filter-chip.fin-chip-active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.fin-month-dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:#16a34a; margin-left:3px; vertical-align:super }
.fin-chip-active .fin-month-dot { background:#86efac }
.fin-period-label { padding:12px 16px 0; font-size:0.78rem; color:#6b7280; font-weight:500 }
.fin-kpi-strip { display:flex; gap:12px; padding:16px; flex-wrap:wrap }
.fin-kpi-strip.fin-kpi-secondary { padding-top:0 }
.fin-kpi-secondary .fin-kpi-card { padding:10px 8px }
.fin-kpi-secondary .fin-kpi-value { font-size:1.15rem }
.fin-kpi-card { flex:1; min-width:120px; text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px 12px }
.fin-kpi-value { font-size:1.6rem; font-weight:700; color:#111827 }
.fin-kpi-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; color:#6b7280; margin-top:4px }
.fin-kpi-subtitle { font-size:0.65rem; color:#9ca3af; margin-top:2px }
.fin-kpi-delta { font-size:0.7rem; margin-top:4px }
.fin-kpi-delta.up { color:#16a34a }
.fin-kpi-delta.down { color:#dc2626 }
.fin-kpi-card.margin-good { border-color:#bbf7d0; background:#f0fdf4 }
.fin-kpi-card.margin-warn { border-color:#fde68a; background:#fffbeb }
.fin-kpi-card.margin-bad { border-color:#fecaca; background:#fef2f2 }
.fin-view-filters { display:flex; gap:16px; padding:8px 16px; border-bottom:1px solid #f3f4f6; flex-wrap:wrap; align-items:center }
.fin-view-filter-group { display:flex; align-items:center; gap:6px }
.fin-client-search { padding:4px 10px; border:1px solid #d1d5db; border-radius:9999px; font-size:0.72rem; font-family:inherit; color:#374151; outline:none; width:160px; transition:border-color 0.12s }
.fin-client-search:focus { border-color:var(--bs-accent) }
.fin-clear-btn { position:absolute; right:6px; top:6px; width:20px; height:20px; border-radius:50%; border:none; background:#dc2626; color:#fff; font-size:0.8rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; padding:0 }
.fin-clear-btn:hover { background:#b91c1c }
.fin-view-filter-group { position:relative }
.fin-table { width:100%; border-collapse:collapse; font-size:0.78rem }
.fin-table th { text-align:left; padding:8px 10px; background:#f9fafb; border-bottom:2px solid #e5e7eb; font-weight:600; color:#374151; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; cursor:pointer; white-space:nowrap; user-select:none }
.fin-table th:hover { background:#f0f4f8 }
.fin-table th.fin-num, .fin-table td.fin-num { text-align:right }
.fin-table td { padding:7px 10px; border-bottom:1px solid #f3f4f6; color:#374151 }
.fin-table tbody tr:nth-child(even) td { background:#f9fafb }
.fin-table tr:hover td { background:#eef2f7 }
.fin-table tfoot td { font-weight:700; border-top:2px solid #e5e7eb; background:#f9fafb }
.fin-table a { color:var(--bs-primary); text-decoration:none }
.fin-table a:hover { text-decoration:underline }
.fin-status { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:0.68rem; font-weight:600 }
.fin-status-paid { background:#dcfce7; color:#166534 }
.fin-status-open { background:#fef9c3; color:#854d0e }
.fin-status-late { background:#fee2e2; color:#991b1b }
.fin-status-stale { background:#fee2e2; color:#991b1b; font-size:0.62rem; margin-left:4px }
.fin-status-cancelled { background:#f1f5f9; color:#64748b }
.mw-btn-sm { padding:2px 8px; font-size:0.7rem; border-radius:4px; cursor:pointer; border:none; font-weight:600 }
.mw-btn-sm.mw-btn-danger { background:#fee2e2; color:#991b1b }
.mw-btn-sm.mw-btn-danger:hover { background:#fecaca }
.fin-detail-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 16px 16px }
.fin-detail-full { padding:0 16px 16px }
.fin-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden }
.fin-card-title { padding:10px 14px; font-weight:600; font-size:0.8rem; color:var(--bs-primary); border-bottom:1px solid #f3f4f6 }
.fin-toggle-row { display:flex; gap:0; margin:12px 14px }
.fin-toggle-btn { font-size:0.72rem; padding:5px 14px; border:1px solid #d1d5db; background:#fff; color:#374151; cursor:pointer; transition:all 0.12s; white-space:nowrap }
.fin-toggle-btn:first-child { border-radius:9999px 0 0 9999px; border-right:none }
.fin-toggle-btn:last-child { border-radius:0 9999px 9999px 0 }
.fin-toggle-btn:not(:first-child):not(:last-child) { border-right:none }
.fin-toggle-btn.active { background:var(--bs-primary); color:#fff; border-color:var(--bs-primary) }
.fin-heat-green { background:#dcfce7 }
.fin-heat-yellow { background:#fef9c3 }
.fin-heat-red { background:#fee2e2 }
.fin-heat-neutral { background:transparent }
.fin-mhs-table { width:100%; border-collapse:collapse; font-size:0.75rem }
.fin-mhs-table th { padding:6px 8px; background:#4472C4; color:#fff; font-weight:600; text-align:right; border:1px solid #3b63a8; white-space:nowrap }
.fin-mhs-table th:first-child { text-align:left }
.fin-mhs-table td { padding:5px 8px; text-align:right; border:1px solid #e5e7eb }
.fin-mhs-table td:first-child { text-align:left; font-weight:400 }
.fin-mhs-table tr:nth-child(even) td { background:#d6e4f0 }
.fin-mhs-table tr:nth-child(odd) td { background:#fff }
.fin-mhs-summary td { font-weight:700 }
.fin-mhs-separator td { border-bottom:3px solid var(--bs-primary) }
.fin-mhs-total-col { font-weight:700 }
.fin-publish-btn { padding:8px 20px; background:var(--bs-primary); color:#fff; border:none; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; transition:background 0.12s }
.fin-publish-btn:hover { background:#2d4f7a }
.fin-publish-published { color:#16a34a; font-size:0.78rem }
.fin-yoy-row { padding:4px 16px; background:#f0f4f8; font-size:0.72rem; color:#6b7280; border-bottom:1px solid #e5e7eb }
.fin-sort-asc::after { content:' \25B2'; font-size:0.6rem }
.fin-sort-desc::after { content:' \25BC'; font-size:0.6rem }
.fin-kpi-card.fin-kpi-clickable { cursor:pointer; transition:transform 0.1s, box-shadow 0.1s }
.fin-kpi-card.fin-kpi-clickable:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08) }
.fin-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 16px 16px }
.fin-chart-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; min-height:280px }
.fin-chart-card canvas { width:100% !important; height:240px !important }
#finChartExpBreak { max-width:180px; max-height:180px; margin:0 auto }
#finChartInvStatus { max-width:180px; max-height:180px; margin:0 auto }
#finChartInvARAging { cursor:pointer }
.fin-chart-title { font-weight:600; font-size:0.8rem; color:var(--bs-primary); margin-bottom:12px }
#finExpLegend, #finInvStatusLegend { margin-top:8px }
.fin-exp-legend-row { display:flex; align-items:center; gap:6px; font-size:0.72rem; color:#374151; padding:3px 0 }
.fin-exp-legend-row:hover { background:#f9fafb; border-radius:6px }
.fin-exp-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.fin-exp-legend-label { white-space:nowrap; min-width:110px }
.fin-exp-legend-val { font-variant-numeric:tabular-nums; white-space:nowrap }
.fin-exp-legend-total { border-top:1px solid #e5e7eb; padding-top:6px; margin-top:2px }
@media (max-width: 900px) {
  .fin-detail-split { grid-template-columns:1fr }
  .fin-kpi-strip { flex-wrap:wrap }
  .fin-kpi-card { min-width:100px }
  .fin-chart-grid { grid-template-columns:1fr }
}

/* ── Project Notes ──────────────────────────────────────────────── */
.pn-container { max-width:720px; margin:0 auto; padding:16px 0 }
.pn-compose { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:16px; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04) }
.pn-compose textarea { width:100%; border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; font-size:0.85rem; font-family:inherit; resize:vertical; box-sizing:border-box; line-height:1.5; transition:border-color 0.15s }
.pn-compose textarea:focus { outline:none; border-color:var(--bs-accent); box-shadow:0 0 0 3px var(--bs-focus-ring) }
.pn-compose-footer { display:flex; justify-content:flex-end; margin-top:8px }
.pn-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); transition:opacity 0.2s }
.pn-card.pn-resolved { opacity:0.55; border-color:#f1f5f9 }
.pn-card-row { display:flex; align-items:flex-start; gap:10px }
.pn-card-body { flex:1; min-width:0 }
.pn-card-header { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px }
.pn-card-actions { margin-left:auto; display:flex; align-items:center; gap:2px }
.pn-avatar { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; color:#fff; font-weight:600; font-size:12px; flex-shrink:0 }
.pn-author { font-size:0.82rem; font-weight:600; color:#111827 }
.pn-time { font-size:0.72rem; color:#9ca3af }
.pn-content { font-size:0.85rem; color:#374151; line-height:1.5; white-space:pre-wrap; word-break:break-word }
.pn-resolved-info { font-size:0.72rem; color:#16a34a; margin-top:6px; display:flex; align-items:center; gap:4px }
.pn-card-footer { display:flex; justify-content:flex-end; margin-top:8px }
.pn-btn-icon { background:none; border:none; cursor:pointer; padding:2px 4px; font-size:0.85rem }
.pn-btn-icon.pn-pinned { opacity:1; color:var(--bs-accent) }
.pn-btn-icon.pn-unpinned { opacity:0.3 }
.pn-btn-edit { background:none; border:none; cursor:pointer; font-size:0.72rem; padding:2px 6px; color:#6b7280 }
.pn-btn-delete { background:none; border:none; cursor:pointer; font-size:0.72rem; padding:2px 6px; color:#dc2626 }
.pn-btn-resolve { background:none; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-size:0.72rem; padding:3px 10px; color:#16a34a; display:flex; align-items:center; gap:3px }
.pn-btn-resolve:hover { background:#f0fdf4; border-color:#bbf7d0 }
.pn-list { display:flex; flex-direction:column; gap:8px }
.pn-group { margin-bottom:24px }
.pn-group-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; cursor:pointer }
.pn-group-header:hover { opacity:0.8 }
.pn-job-badge { font-size:0.82rem; font-family:monospace; font-weight:700; color:var(--bs-primary); background:var(--bs-primary-light); padding:2px 8px; border-radius:4px }
.pn-group-name { font-size:0.85rem; font-weight:600; color:#374151 }
.pn-view-header { display:flex; align-items:center; gap:8px; margin-bottom:16px }
.pn-view-title { font-size:0.95rem; font-weight:700; color:var(--bs-primary); margin:0 }
.pn-view-count { font-size:0.75rem; color:#6b7280 }
.pn-resolved-toggle { font-size:0.82rem; color:#6b7280; cursor:pointer; padding:8px 0; user-select:none }
@media (max-width:768px) {
  .pn-container { padding:12px 0 }
  .pn-card { padding:12px }
}

/* ── Captures View ─────────────────────────────────────────── */
.capture-action-btn {
  font-size: 0.72rem;
  padding: 4px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  color: #374151;
  transition: background 0.15s;
}
.capture-action-btn:hover { background: #f3f4f6; }
.capture-action-dismiss { color: #9ca3af; border-color: #e5e7eb; }
.capture-action-dismiss:hover { background: #fef2f2; color: #dc2626; }