:root {
      --bg-primary: #1a1a1a;
      --bg-secondary: #2d2d2d;
      --bg-tertiary: #3a3a3a;
      --text-primary: #ffffff;
      --text-secondary: #e0e0e0;
      --border-color: #4e4e4e9e;
      --accent-color: #00000085;
      --success-color: #28a745;
      --danger-color: #dc3545;
      --bs-progress-bar-color: white;
      --bs-secondary-bg: rgba(255, 255, 255, 0.228) !important;
  }

  [data-theme="light"] {
      --bg-primary: #f4f5f7;
      --bg-secondary: #ffffff;
      --bg-tertiary: #ebecf0;
      --text-primary: #172b4d;
      --text-secondary: #5e6c84;
      --border-color: #dfe1e6;
      --accent-color: #0079bf;
      --glass-bg: rgba(255, 255, 255, 0.9);
      --glass-border: rgba(0, 0, 0, 0.1);
  }

  /* Force white text in Preview Modal regardless of theme */
  #previewCardModal .modal-content {
      color: white !important;
      background: rgba(30, 30, 30, 0.95);
      /* Dark background for preview */
  }

  #previewCardModal .text-muted {
      color: #b0b0b0 !important;
  }

  /* Global text-muted color override for better visibility */
  .text-muted {
      color: #b0b0b0 !important;
  }

  ::placeholder {
      color: #cccccc !important;
      /* Lighter gray for better visibility */
  }

  /* For older WebKit-based browsers (Chrome, Safari, older Edge) */
  ::-webkit-input-placeholder {
      color: #cccccc;
  }


  .app-header {
      -ms-overflow-style: none;
      /* For Internet Explorer and Edge */
      scrollbar-width: none;
      /* For Firefox */
  }

  .app-header::-webkit-scrollbar {
      display: none;
      /* For Chrome, Safari, and Opera */
  }

  .progress-bar {
      background-color: white;
  }

  .ai-settings-check-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px 16px;
  }

  .ai-settings-check-grid .form-check {
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 8px 10px 8px 34px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
  }

  .ai-run-status-bar {
      margin-right: auto;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      color: var(--text-secondary);
      background: rgba(255, 255, 255, 0.06);
      font-size: 0.9rem;
  }

  .ai-global-status-bar {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 4000;
      max-width: min(720px, calc(100vw - 28px));
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(14px);
  }

  .ai-run-status-bar[data-state="applied"],
  .ai-run-status-bar[data-state="redone"] {
      color: #b7f7c1;
      border-color: rgba(40, 167, 69, 0.35);
  }

  .ai-run-status-bar[data-state="failed"] {
      color: #ffd0d6;
      border-color: rgba(220, 53, 69, 0.45);
  }

  .ai-review-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .ai-review-row {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 12px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
  }

  .ai-review-row small {
      display: block;
      color: var(--text-secondary);
      margin-top: 2px;
  }

  .ai-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 12px;
  }

  .ai-stat-tile {
      min-height: 92px;
      padding: 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

  .ai-stat-tile span {
      color: var(--text-secondary);
      font-size: 0.82rem;
  }

  .ai-stat-tile strong {
      color: var(--text-primary);
      font-size: 1.5rem;
  }

  /* For older Firefox versions */
  :-moz-placeholder {
      color: #cccccc;
      opacity: 1;
      /* Ensures full opacity as Firefox might apply a default opacity */
  }

  /* For older Internet Explorer 10-11 */
  :-ms-input-placeholder {
      color: #cccccc;
  }

  ::-webkit-scrollbar {
      width: 3px;
      height: 7px;
  }

  ::-webkit-scrollbar-thumb {
      background: rgba(128, 128, 128, 0.436);
      border-radius: 25px;
  }

  &::-webkit-scrollbar-track {
      background-color: rgba(128, 128, 128, 0.436);
  }



  .container {
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
  }


  .cards-container::-webkit-scrollbar {
      width: 3px;
  }

  .cards-container::-webkit-scrollbar-thumb {

      transition: all 0.3s ease;
  }





  body {
      font-family: 'Cera Pro', "Roboto", serif;
      font-optical-sizing: auto;
      font-weight: weight;
      font-style: normal;
      font-variation-settings: "wdth" 200;
  }


  body {
      margin: 0;
      /* Remove default margin */
      padding: 0;
      background-color: transparent;
      background-size: cover;
      /* Ensures the image covers the whole area */
      background-position: center;
      /* Keeps it centered */
      background-repeat: no-repeat;
      /* Prevents tiling */
      height: 100vh;
      /* Makes body take full viewport height */
  }

/* Background renderer. The active layer remains visible until the next image
 * has loaded and decoded, then the two layers cross-fade. */
.background-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}

/* Eva Presence Light — one semantic status language across Eva-hosted surfaces. */
.eva-presence-light {
    --eva-presence-hue: 246;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid hsla(var(--eva-presence-hue), 70%, 88%, .58);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), hsla(var(--eva-presence-hue), 76%, 72%, .45) 25%, hsla(var(--eva-presence-hue), 58%, 38%, .22) 58%, rgba(20,20,34,.12));
    box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 7px 26px hsla(var(--eva-presence-hue), 70%, 62%, .22);
    animation: eva-presence-breathe 3200ms ease-in-out infinite;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.eva-presence-slot {
    position: relative;
    min-height: 44px;
}
.eva-presence-slot > .eva-presence-light {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
}
.eva-presence-light::after { content: ""; width: 42%; height: 42%; border-radius: inherit; background: rgba(255,255,255,.55); filter: blur(3px); opacity: .62; transform: translate(-22%, -22%); }
.eva-presence-live-region { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
[data-eva-presence-state="gathering"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="gathering"] { --eva-presence-hue: 241; animation-duration: 1800ms; }
[data-eva-presence-state="connecting"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="connecting"] { --eva-presence-hue: 276; animation-duration: 1400ms; }
[data-eva-presence-state="composing"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="composing"] { --eva-presence-hue: 263; animation-duration: 1100ms; }
[data-eva-presence-state="ready"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="ready"] { --eva-presence-hue: 39; animation: eva-presence-ready-bloom 260ms ease-out 1; }
[data-eva-presence-state="attention"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="attention"] { --eva-presence-hue: 8; animation-duration: 900ms; }
[data-eva-presence-state="stopped"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="stopped"] { --eva-presence-hue: 220; opacity: .74; animation: none; }
[data-eva-presence-state="offline"] .eva-presence-light, .eva-presence-light[data-eva-presence-state="offline"] { --eva-presence-hue: 210; opacity: .5; filter: grayscale(0.6); animation: none; }
.eva-header-light { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.eva-selection-light { width: 10px; height: 10px; display: inline-block; vertical-align: middle; }
.modal:not(.show) .eva-presence-light, [hidden] .eva-presence-light { animation-play-state: paused; }
@keyframes eva-presence-breathe { 0%,100% { transform: scale(.98); } 50% { transform: scale(1.02); } }
@keyframes eva-presence-ready-bloom { from { box-shadow: 0 0 0 0 hsla(var(--eva-presence-hue), 78%, 76%, .55); } to { box-shadow: 0 0 0 18px hsla(var(--eva-presence-hue), 78%, 76%, 0); } }
@media (max-width: 390px) {
    .eva-presence-slot { min-height: 36px; }
    .eva-presence-slot > .eva-presence-light { top: -10px; right: -10px; }
    .eva-presence-light { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .eva-presence-light, [data-eva-presence-state] .eva-presence-light, .eva-presence-light::after { animation: none !important; transition-duration: 120ms !important; } }
body.reduce-motion,
body.reduce-motion * {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
}

.background-layer.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .background-layer {
        transition: opacity 0.9s ease !important;
    }
}

  body {
      background-color: var(--bg-primary);
      color: var(--text-primary);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
  }

  .kanban-container {
      height: 100vh;
      display: flex;
      flex-direction: column;
  }

  .app-header {
      background: transparent !important;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      box-shadow: none;
      padding-right: 20px;
      /* Padding for actions */
      position: relative;
      z-index: 1000;
  }

  .user-menu-btn,
  .header-icon-btn {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      cursor: pointer;
      overflow: hidden;
      font-size: 20px;
      color: var(--text-primary);
      transition: background 0.2s;
      border: none;
      /* Ensure no border for buttons */
      padding: 0;
      /* Reset padding */
  }

  .user-menu-btn:hover,
  .header-icon-btn:hover {
      background: rgba(255, 255, 255, 0.2);
  }

  .board-tabs {
      padding: 10px;
      display: flex;
      align-items: center;
      margin-right: 12px;
      gap: 10px;
      overflow: visible;
      overflow-y: hidden;
      flex-wrap: nowrap;
      /* Prevent wrapping */
      flex-grow: 1;
      /* Take available space */
      border: none;
      /* Remove border as it's on parent */
      background: transparent !important;
      /* Remove bg as it's on parent */
      box-shadow: none;
      backdrop-filter: none;
      scrollbar-width: none; /* Hide Firefox scrollbar */
      -ms-overflow-style: none; /* Hide IE/Edge scrollbar */
  }

  .board-tabs::-webkit-scrollbar {
      display: none; /* Hide Chrome/Safari/Opera scrollbar */
  }


  .board-tab {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      user-select: none;
      color: var(--text-secondary);
      white-space: nowrap;
      /* Prevent text wrapping */
      flex-shrink: 0;
      /* Prevent tab from shrinking */
      width: var(--tab-width, auto);
      min-width: var(--tab-min-width, 120px);
      justify-content: center;
      /* Center content if fixed width */
  }

  .board-tab .board-icon {
      margin-right: 0 !important;
  }

  .no-caret::after {
      display: none !important;
  }

  .header-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      background: transparent !important;
  }

  .header-actions-left,
  .header-actions-right {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
  }

  .header-actions-right,
  .header-actions-right-start {
      margin-left: auto;
  }

  .header-actions-left > *,
  .header-actions-right > * {
      flex: 0 0 auto;
  }

  /* ── Sync Widget ─────────────────────────────────────────── */
  .prism-sync-widget {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      cursor: default;
      font-size: 12px;
      color: rgba(255,255,255,0.75);
      transition: background 0.2s;
      white-space: nowrap;
      max-width: 180px;
  }

  .prism-sync-widget .sync-status-area {
      display: flex;
      align-items: center;
      gap: 5px;
      overflow: hidden;
  }

  .prism-sync-widget .sync-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 110px;
  }

  .prism-sync-widget .sync-header-icon {
      color: #fff !important;
      flex: 0 0 auto;
  }

  .app-header .board-tabs .board-sync-pending-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 50%;
      background: #f59e0b;
      box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
  }

  .header-actions .sync-status-area.sync-badge-synced {
      color: #fff !important;
  }

  .header-actions .sync-status-area.sync-badge-synced .sync-success-check {
      color: #10b981;
      font-weight: 700;
  }

  .automation-api-sessions {
      display: grid;
      gap: 8px;
  }

  .automation-api-session {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
  }

  /* Collapse label on very small screens */
  @media (max-width: 520px) {
      .app-header.header-labels-compact .prism-sync-widget .sync-label { display: none !important; }
      .prism-sync-widget { padding: 4px 6px; }
      .automation-api-session {
          align-items: flex-start;
          flex-direction: column;
      }
  }




  .board-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;

      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 2px 2px #0000001d;
      border-top: rgb(107 100 81 / 27%) 0.1px solid;
  }

  .board-card:hover {
      background: rgba(0, 123, 255, 0.1);
      transform: translateY(-2px);
      border-color: rgba(189, 200, 212, 0.3);
  }

  .board-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  .board-icon {
      font-size: 20px;
      margin-right: 10px;
  }

  .board-name {
      font-weight: 500;
      font-size: 16px;
  }

  .board-status {
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      margin-right: 10px;
  }

  .board-status.enabled {
      background: rgba(40, 167, 69, 0.2);
      color: #28a745;
  }

  .board-status.disabled {
      background: rgba(220, 53, 69, 0.2);
      color: #dc3545;
  }

  .board-actions {
      display: flex;
      gap: 5px;
  }

  .boards-container {
      max-height: 70vh;
      overflow-y: auto;
  }




  .board-tab.active {
      background: var(--accent-color);
      color: white;
  }

  .column-buttons {

      padding-right: 15px;

  }

  .card-actions {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .card-menu-btn {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Keep card actions stable after selection or keyboard focus. Hovering a
     card must not inject extra figures into the board. */
  .card.active-card .card-actions,
  .card:focus-within .card-actions {
      opacity: 1;
      visibility: visible;
  }

  .card.active-card .card-menu-btn,
  .card:focus-within .card-menu-btn {
      opacity: 1;
      visibility: visible;
  }

  .column-header .btn {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Column controls appear after a column is selected or keyboard-focused,
     never merely because the pointer passed over its surface. */
  .column.column-selected .column-header .btn,
  .column:focus-within .column-header .btn,
  .column:hover .column-header .btn {
      opacity: 1;
      visibility: visible;
  }


  /* Board menu button visibility */
  .board-menu-btn {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
      margin-right: 5px;
  }

  /* Theme Selector */
  .theme-selector {
      display: flex;
      gap: 10px;
      margin-top: 5px;
  }

  .theme-option {
      cursor: pointer;
      text-align: center;
      opacity: 0.7;
      transition: all 0.2s;
  }

  .theme-option:hover {
      opacity: 1;
      transform: translateY(-2px);
  }

  .theme-option.active {
      opacity: 1;
      font-weight: bold;
  }

  .theme-preview {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      margin-bottom: 5px;
      border: 2px solid transparent;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .theme-option.active .theme-preview {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  }

  /* Space Selector Dropdown */
  .space-dropdown-toggle {
      width: 32px;
      height: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-weight: bold;
  }

  .space-dropdown-toggle:hover,
  .space-dropdown-toggle:focus {

      border-color: rgba(255, 255, 255, 0.3);
      color: white;
      box-shadow: none;
  }

  .space-dropdown-toggle::after {
      display: none;
      /* Hide default caret */
  }

  .space-initial {
      font-size: 14px;
      text-transform: uppercase;
  }

  .tab-right-actions .dropdown-menu {
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .tab-right-actions .dropdown-item {
      color: var(--text-color);
  }

  .tab-right-actions .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
  }

  .tab-right-actions .dropdown-item.active {
      background: var(--accent-color);
      color: white;
  }

  .tab-right-actions .dropdown-divider {
      border-top-color: rgba(255, 255, 255, 0.1);
  }


  /* Show board-menu-btn on hover or when board tab is active */
  .board-tab:hover .board-menu-btn {
      opacity: 1;
      visibility: visible;
  }

  .add-board-btn,
  .delete-board {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Show add-board-btn on board tabs container hover */
  #boardTabs:hover .add-board-btn {
      opacity: 1;
      visibility: visible;
  }

  /* Show delete-board on individual board tab hover */
  .board-tab:hover .delete-board {
      opacity: 1;
      visibility: visible;
  }

  .add-board-btn {
      background: transparent;
      border: none;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 16px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .kanban-board {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      flex: 1;
      padding: 20px;
      overflow: visible;
      overflow-y: hidden;
      padding-bottom: 0px;
      padding-right: 0px;
      padding-left: 0px;
  }

  .columns-container {
      display: flex;
      /*  gap: 15px;*/
      min-height: calc(100vh - 120px);
      padding-bottom: 10px;
  }

  .column-btn {

      border-radius: 8px;
      min-width: 60px;
      max-width: 60px;
      padding: 28px 15px;
      height: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      transition: all 0.2s ease;
      color: var(--text-secondary);
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      box-shadow: 2px 2px 2px #0000001d;
      margin-bottom: 10px;
      display: none;
  }

  .column-btn:hover {
      border-color: var(--accent-color);
  }

  .column.expanded {
      /*     padding: 28px 15px;*/

  }

  .nav-link {
      width: 90px;
  }




  .column {
      background: var(--bg-secondary);
      background-color: rgba(0, 0, 0, 0.5);

      border: 1px solid var(--border-color);
      border-radius: 8px;
      min-width: 320px;
      padding: 15px;
      display: flex;
      flex-direction: column;
      transition: none;
      box-shadow: 2px 2px 2px #0000001d;
      border-top: rgb(107 100 81 / 27%) 0.1px solid;
      padding-bottom: 0px;
      cursor: pointer;
      position: relative;
  }

  /* Selected column state */
  .column.column-selected {
      z-index: 10;
  }



  .column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 15px;
      padding-bottom: 10px;
      cursor: move;
      text-align: left;
  }

  .column-header > :first-child {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
  }


  .column-title {
      font-weight: 600;
      font-size: 16px;
      color: var(--text-primary);

      padding: 2px 4px;
      border-radius: 3px;
      transition: background-color 0.2s;
      text-transform: uppercase;
  }

  .column-title:hover {
      background-color: transparent;
  }



  .column-actions {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-left: auto;
      flex: 0 0 auto;
      white-space: nowrap;
  }



  .btn-sm {
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 4px;
  }

  .btn-outline-secondary {
      color: white;
      border-color: rgba(255, 255, 255, 0.5);
  }

  .btn-outline-secondary:hover,
  .btn-outline-secondary.active {
      background-color: rgba(255, 255, 255, 0.14);
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
  }

  .cards-container {
      flex: 1;
      overflow-y: auto;
      min-height: 200px;
      overflow-x: hidden;
      /* padding-right: 15px;*/
  }

  .boardeva-card-window-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, .12));
      background: var(--surface-color, rgba(25, 29, 34, .96));
  }

  .boardeva-card-window-nav-bottom {
      border-top: 1px solid var(--border-color, rgba(255, 255, 255, .12));
      border-bottom: 0;
      margin-top: 8px;
  }

  .boardeva-card-window-nav .small {
      text-align: center;
  }

  .column.collapsed .cards-container {
      display: none;
  }

  @media (max-width: 480px) {
      .boardeva-card-window-nav { gap: 4px; padding-inline: 4px; }
      .boardeva-card-window-nav .btn { padding: 4px 6px; }
      .boardeva-card-window-nav .small { font-size: 11px; }
  }


  .settings-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 20px;
  }

  .tab-button {
      flex: 1;
      padding: 15px;
      background: none;
      border: none;
      color: var(--text-secondary);

      font-weight: 500;
      border-bottom: 3px solid transparent;
  }

  .tab-button.active {
      color: var(--text-primary);
      border-bottom-color: var(--accent-color);
  }

  .tab-button:hover:not(.active) {
      background-color: var(--bg-tertiary);
  }

  .tab-content {}

  .tab-content.active {
      display: block;
  }

  .setting-item {
      margin-bottom: 20px;
  }

  .setting-item label {
      display: block;
      margin-bottom: 5px;
      font-weight: 500;
  }

  .setting-item input[type="checkbox"] {
      margin-right: 10px;
  }

  .setting-item select {
      width: 100%;
      padding: 8px;
      border-radius: 4px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
  }

  .gallery-content {
      text-align: center;
      padding: 20px;
  }

  .modal-content,
  .card {
      background: #15141447;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 12px;
      margin-bottom: 10px;

      transition: all 0.2s ease;
      position: relative;
      backdrop-filter: blur(20px);
      box-shadow: 5px 3px 10px #00000061;
      border-top: rgb(107 100 81 / 27%) 0.1px solid;
  }

  .card:hover {
      border-color: rgba(189, 200, 212, 0.3);
      background: rgba(0, 123, 255, 0.1);
  }

  input[type=checkbox] {
      accent-color: rgba(0, 123, 255, 0.3);
  }



  .card {
      transition: none;
  }

  .card:hover {
      box-shadow: 0 4px 4px rgba(68, 68, 68, 0.3);
  }

  .card.active-card {
      /* transform: translateY(-2px);  REMOVED: No more movement animation */
      z-index: 100;
      border: 1px solid white !important;
      box-shadow: 0 0 0 1px white !important;
      /* Double ensure visibility */
  }

  .card-favorite-toggle i {
      font-size: 10px !important;
      /* Very small as requested */
      transition: transform 0.2s ease;
  }

  .card-favorite-toggle:hover i {
      transform: scale(1.2);
  }

  /* Preview Modal Styles */
  .markdown-content img {
      max-width: 100%;
      border-radius: 4px;
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3 {
      margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
  }

  .markdown-content p {
      margin-bottom: 0.5rem;
      line-height: 1.5;
  }

  .markdown-content ul,
  .markdown-content ol {
      padding-left: 1.5rem;
  }

  .markdown-content blockquote {
      border-left: 3px solid var(--accent-color);
      padding-left: 1rem;
      color: var(--text-secondary);
      margin-left: 0;
  }

  .markdown-content code {
      background: rgba(255, 255, 255, 0.1);
      padding: 2px 4px;
      border-radius: 3px;
      font-family: monospace;
      font-size: 0.9em;
  }

  .markdown-content pre {
      background: rgba(0, 0, 0, 0.3);
      padding: 10px;
      border-radius: 6px;
      overflow: visible;
  }

  .markdown-content pre code {
      background: transparent;
      padding: 0;
  }

  .btn-close {

      color: white;
  }

  .card.color-gray {

      background: transparent
  }

  .card.color-blue {

      background: linear-gradient(135deg, rgba(0, 123, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);
  }

  .card.color-green {

      background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%);
  }

  .card.color-purple {

      background: linear-gradient(135deg, rgba(111, 66, 193, 0.1) 0%, rgba(111, 66, 193, 0.05) 100%);
  }

  .card.color-orange {

      background: linear-gradient(135deg, rgba(253, 126, 20, 0.1) 0%, rgba(253, 126, 20, 0.05) 100%);
  }

  .card.color-red {

      background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.05) 100%);
  }

  .btn-close {
      --bs-btn-close-color: white;
      color: white !important;
  }

  #searchResults {
      display: none;
  }

  .color-picker {
      display: flex;
      gap: 10px;
      margin: 10px 0;
  }

  .color-option {
      width: 30px;
      height: 30px;
      border-radius: 50%;

      border: 2px solid transparent;
      transition: all 0.2s ease;
  }

  .color-option:hover,
  .color-option.selected {
      border-color: #fff;
      transform: scale(1.1);
  }

  .color-option.default {
      background: #6c757d;
  }

  .color-option.blue {
      background: #007bff;
  }

  .color-option.green {
      background: #28a745;
  }

  .color-option.yellow {
      background: #ffc107;
  }

  .color-option.purple {
      background: #6f42c1;
  }

  .color-option.orange {
      background: #fd7e14;
  }

  .color-option.red {
      background: #dc3545;
  }


  .tags-container {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
  }

  .tag {
      background: rgb(114 114 114 / 20%);
      color: #a5a5a5;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 13px;
      border: 1px solid rgb(118 118 118 / 30%);
  }

  .tag-input {
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 5px;
      font-size: 13px;
      min-width: 100px;
      margin-top: 15px;
      margin-bottom: 5px
  }

  .card-tags {
      margin-top: 0px;
      margin-bottom: 10px;

  }









  .card-menu-btn {
      margin-left: auto;
      opacity: 0.7;
  }

  .card-menu-btn:hover {
      opacity: 1;
  }


  .card.dragging {
      /* Leave a clear placeholder without rotating or shaking the live card. */
      opacity: .35 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
  }

  .column.dragging {
      opacity: .4 !important;
      transform: none !important;
      filter: none !important;
      transition: none !important;
  }

  .boardeva-drag-ghost {
      position: fixed !important;
      inset: 0 auto auto 0 !important;
      z-index: 2147482000 !important;
      pointer-events: none !important;
      margin: 0 !important;
      opacity: .78 !important;
      overflow: hidden !important;
      transform-origin: 0 0 !important;
      transition: none !important;
      animation: none !important;
      box-shadow: 0 18px 38px rgba(0, 0, 0, .42) !important;
      cursor: grabbing !important;
  }

  .boardeva-card-drag-ghost {
      max-height: min(260px, 52vh) !important;
  }

  .boardeva-drag-group-count {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 1;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 999px;
      padding: 3px 9px;
      background: rgba(8, 12, 20, .88);
      color: #fff;
      font: 600 12px/1.4 system-ui, sans-serif;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }

  .boardeva-column-drag-ghost {
      max-height: min(300px, 58vh) !important;
  }

  body.boardeva-pointer-dragging,
  body.boardeva-pointer-dragging * {
      cursor: grabbing !important;
      user-select: none !important;
  }

  .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-right: -15px;
      margin-left: -15px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent !important;
      background-color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
  }

  .card-title {
      font-weight: 500;
      font-size: 14px;
      flex: 1;
      margin-right: 10px;

      padding: 2px 4px;
      border-radius: 3px;
      color: var(--text-primary);
  }

  /* Smart icons inherit the normal UI color until the user chooses a custom
     appearance in the picker. */
  .card-icon,
  .column-icon,
  .board-icon {
      color: var(--text-primary, #fff);
  }

  .card-title:hover {
      background-color: transparent;
  }

  .card-nav {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-right: 10px;
  }

  .nav-btn {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 2px 6px;
      border-radius: 3px;

      font-size: 10px;
  }

  .nav-btn:hover {
      background: var(--accent-color);
      color: white;
  }

  .nav-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
  }

  .card-date {
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
  }

  .card-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .card.expanded .card-content {
      max-height: 500px;
      /* The card itself supplies the surface styling. Keep expanded content
         transparent so it does not create a darker panel inside the card. */
      background-color: transparent;
      border-radius: 4px;
      padding: 8px;
      margin-top: 8px;
      overflow-y: auto;
  }

.card.expanded .card-description {
      max-height: 300px;
      overflow-y: auto;
  }

  .card-actions {
      display: initial;
      gap: 5px;
      margin-top: 8px;
  }

  .subitems {
      margin-top: 10px;
      padding-top: 10px;
      margin-left: 10px;

  }

  .subitem {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      font-size: 15px;
  }

  .subitem input[type="checkbox"] {
      margin: 0;
  }

  .subitem.completed {
      text-decoration: line-through;
      color: var(--text-secondary);
  }

  .subitem-text {
      flex: 1;

      padding: 2px 4px;
      border-radius: 3px;
      color: var(--text-primary);
  }

  .subitem-text:hover {
      background-color: transparent;
  }

  .btn.disabled,
  .btn:disabled,
  fieldset:disabled .btn {

      background-color: #58585857;
  }



  .modal-content {
      background: rgba(20, 20, 20, 0.6) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid var(--border-color) !important;
      color: var(--text-primary);
      border-top: 1px solid var(--border-color) !important;
  }

  .settings-sidebar {
      background: rgba(255, 255, 255, 0.02) !important;
      border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
      flex: 0 0 150px;
      min-width: 150px;
  }

  .settings-sidebar .nav-link {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.6) !important;
      border-radius: 6px;
      margin: 4px 8px;
      transition: all 0.2s ease;
      text-align: left;
      display: flex;
      align-items: center;
      white-space: nowrap;
  }

  .settings-sidebar .nav-link:hover {
      background: rgba(255, 255, 255, 0.05) !important;
      color: white !important;
  }

  .settings-sidebar .nav-link.active {
      background: var(--accent-color) !important;
      color: white !important;
  }

  .settings-content {
      background: transparent !important;
      min-width: 0;
  }

  .modal-header {
      border-bottom: 1px solid var(--border-color);
  }

  .modal-footer {
      border-top: 1px solid var(--border-color);
  }

  .form-control,
  .form-select {
      background: #0404043d;
      border: 1px solid var(--border-color);
      color: var(--text-primary);
  }

  .form-control:focus,
  .form-select:focus {
      background: #0404043d;
      border-color: var(--accent-color);
      color: var(--text-primary);
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  .btn-primary {
      background: var(--accent-color);
      border-color: var(--accent-color);
  }

  .btn-success {
      background: var(--success-color);
      border-color: var(--success-color);
  }

  .btn-danger {
      background: var(--danger-color);
      border-color: var(--danger-color);
  }

  .btn-secondary {
      background: #00000052;

      border-color: var(--border-color);
      color: var(--text-primary);
  }

  .close {
      color: var(--text-primary);
  }

  .subitem-input {
      background: var(--bg-primary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-top: 5px;
      background: #0404043d
  }

  .delete-board {
      background: transparent;
      border: none;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      margin-right: -10px;
  }

  .inline-edit {
      background: var(--bg-primary);
      border: 1px solid var(--accent-color);
      color: var(--text-primary);
      border-radius: 3px;
      padding: 2px 4px;
      font-size: inherit;
      font-weight: inherit;
      width: 100%;
  }


  .colapseColumnButton {

      display: none;
  }



  .drag-over {
      background-color: rgba(0, 123, 255, 0.1);
      border-color: var(--accent-color);
  }

  @media (max-width: 768px) {

      .add-board-btn,
      .delete-board {
          opacity: 1;
          visibility: visible;
      }

      .column-header .btn {
          opacity: 1;
          visibility: visible;
      }

      .columns-container {
          flex-direction: column;
      }

      .column,
      .column-btn {
          min-width: 100%;
          max-width: 100%;
      }

      .card-actions,
      .card-menu-btn {
          opacity: 1;
          visibility: visible;
      }


  }


  @media (min-width: 769px) {

      .column {

          flex: 1;


      }

      .board-tab {
          max-width: 30%;
      }

      #columnsContainer>div:nth-child(1) {
          margin-left: 15px;
      }

      .column.collapsed {
          min-width: 40px;
          max-width: 40px;
          padding: 15px 5px;
      }

      .column.collapsed .column-header {
          flex-direction: column;
          border-bottom: none;
          margin-bottom: 0;
          padding-bottom: 0;
      }

      .column.collapsed .column-title {
          writing-mode: vertical-rl;
          text-orientation: mixed;
          font-size: 14px;
          white-space: nowrap;
      }

      .column.collapsed .column-actions {
          flex-direction: column;
          margin-top: 10px;
      }

      .column.collapsed .column-icon {
          display: none;
      }


      #columnsContainer {
          display: flex;
          height: 100%;
          /* overflow: visible;
          /* Allow horizontal scrolling for columns */
          /* overflow-y: hidden;  */

      }

      .column {
          flex-shrink: 0;
          height: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
      }

  .column-body {
      flex: 1;
          overflow-y: auto;
          overflow-x: hidden;
      }

      .cards-container {
          height: 100%;

      }
  }







  /* Add this CSS to handle mobile column collapse behavior */


  /* Mobile behavior - columns stay straight, just hide body */
  @media (max-width: 768px) {
      .column.collapsed {
          width: 100%;
          /* Keep full width on mobile */
          transform: none;
          /* No rotation on mobile */
          transform-origin: none;
      }

      .kanban-board {
          flex: 1;
          padding: 20px;
          overflow: visible;
          overflow-y: auto;
      }

      .column.collapsed {

          padding: 0px;

      }

      .colapseColumnButton {

          display: block;
      }

      .column.collapsed .column-header {
          writing-mode: horizontal-tb;
          /* Keep horizontal text */
          text-orientation: mixed;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          border-radius: 8px;
      }

      .column.collapsed .column-body {
          display: none;
          /* Hide body completely on mobile */
      }

      .column.expanded {
          width: 100%;
          transform: none;
      }

      .column.expanded .column-header {
          writing-mode: horizontal-tb;
          text-orientation: mixed;
          display: flex;
          align-items: center;
          justify-content: space-between;
      }
  }


  /* Template Grid Styles */
  .template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 15px;
      margin-top: 10px;
      max-height: 300px;
      overflow-y: auto;
      padding: 5px;
  }

  .template-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 15px;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
  }

  .template-card:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.05);
      border-color: var(--text-secondary);
  }

  .template-card.selected {
      border-color: var(--accent-color);
      background: rgba(0, 123, 255, 0.1);
      box-shadow: 0 0 0 2px var(--accent-color);
  }

  .template-icon {
      font-size: 24px;
      margin-bottom: 5px;
  }

  .template-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-primary);
  }

  .template-desc {
      font-size: 11px;
      color: var(--text-secondary);
      display: none;
      /* Hidden for now to save space, can be shown if needed */
  }

  .boardeva-board-intent,
  .boardeva-recipe-picker {
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 12px;
      padding: 12px;
      background: rgba(15, 23, 42, 0.18);
  }

  /* 4-Step Wizard Themes */
  #boardModal[data-wizard-theme="organize"] .progress-bar { background-color: #0284c7; }
  #boardModal[data-wizard-theme="study"] .progress-bar { background-color: #7c3aed; }
  #boardModal[data-wizard-theme="read"] .progress-bar { background-color: #16a34a; }

  /* Purpose Grid & Cards */
  .boardeva-purpose-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
  }
  .boardeva-purpose-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1.5px solid rgba(148, 163, 184, 0.22);
      border-radius: 12px;
      background: rgba(30, 41, 59, 0.35);
      color: var(--text-primary);
      text-align: left;
      transition: border-color .18s ease, background .18s ease, transform .18s ease;
      cursor: pointer;
  }
  .boardeva-purpose-card:hover {
      border-color: rgba(148, 163, 184, 0.45);
      background: rgba(30, 41, 59, 0.55);
      transform: translateY(-1px);
  }
  .boardeva-purpose-card:focus-visible {
      outline: 2px solid var(--accent-color, #4dabf7);
      outline-offset: 2px;
  }
  .boardeva-purpose-card.active {
      border-color: var(--accent-color, #4dabf7);
      background: rgba(77, 171, 247, 0.12);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  }
  #boardModal[data-wizard-theme="organize"] .boardeva-purpose-card.active { border-color: #0284c7; background: rgba(2, 132, 199, 0.14); }
  #boardModal[data-wizard-theme="study"] .boardeva-purpose-card.active { border-color: #7c3aed; background: rgba(124, 58, 237, 0.14); }
  #boardModal[data-wizard-theme="read"] .boardeva-purpose-card.active { border-color: #16a34a; background: rgba(22, 163, 74, 0.14); }

  .boardeva-purpose-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.15rem;
      flex-shrink: 0;
  }
  .organize-icon { background: rgba(2, 132, 199, 0.18); color: #38bdf8; }
  .study-icon { background: rgba(124, 58, 237, 0.18); color: #a78bfa; }
  .read-icon { background: rgba(22, 163, 74, 0.18); color: #4ade80; }
  .boardeva-purpose-title { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 2px; }
  .boardeva-purpose-desc { display: block; font-size: 0.78rem; line-height: 1.35; color: var(--text-secondary); }

  /* Recipe Grid & Enhanced Cards */
  .boardeva-recipe-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 10px;
      max-height: 280px;
      overflow-y: auto;
  }

  .boardeva-recipe-card {
      min-height: 82px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      column-gap: 10px;
      align-items: center;
      text-align: left;
      padding: 12px;
      border: 1.5px solid rgba(148, 163, 184, 0.24);
      border-radius: 12px;
      color: var(--text-primary);
      background: rgba(30, 41, 59, 0.35);
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
      cursor: pointer;
  }

  .boardeva-recipe-card:hover,
  .boardeva-recipe-card.selected {
      border-color: var(--accent-color, #4dabf7);
      background: rgba(77, 171, 247, 0.14);
      transform: translateY(-1px);
  }

  .boardeva-recipe-icon { font-size: 1.3rem; color: var(--accent-color, #4dabf7); }
  .boardeva-recipe-content { display: flex; flex-direction: column; min-width: 0; }
  .boardeva-recipe-name { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
  .boardeva-recipe-desc { font-size: .75rem; color: var(--text-secondary); line-height: 1.3; margin-top: 2px; }
  .boardeva-recipe-columns { font-size: .7rem; color: var(--text-secondary); }
  .boardeva-quick-create-btn { padding: 3px 8px; font-size: 0.72rem; border-radius: 6px; }

  /* Mini Column Pills */
  .boardeva-mini-pills-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .boardeva-mini-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 0.68rem;
      padding: 1px 6px;
      border-radius: 9999px;
      background: rgba(148, 163, 184, 0.14);
      border: 1px solid rgba(148, 163, 184, 0.2);
      color: var(--text-secondary);
      white-space: nowrap;
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
  }

  .boardeva-recipe-summary {
      line-height: 1.45;
      min-height: 2.8em;
  }

  /* Starter Cards Choice */
  .boardeva-starter-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
  }
  .boardeva-starter-card {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px;
      border: 1.5px solid rgba(148, 163, 184, 0.22);
      border-radius: 12px;
      background: rgba(30, 41, 59, 0.35);
      text-align: left;
      color: var(--text-primary);
      transition: all .18s ease;
      cursor: pointer;
  }
  .boardeva-starter-card:hover {
      border-color: rgba(148, 163, 184, 0.45);
      transform: translateY(-1px);
  }
  .boardeva-starter-card.active {
      border-color: var(--accent-color, #4dabf7);
      background: rgba(77, 171, 247, 0.14);
  }
  .starter-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      background: rgba(148, 163, 184, 0.15);
      color: var(--accent-color, #4dabf7);
      flex-shrink: 0;
  }

  /* Title Suggestion Chips */
  .boardeva-title-chip {
      font-size: 0.76rem !important;
      padding: 2px 10px !important;
      border-radius: 9999px !important;
      border: 1px dashed rgba(148, 163, 184, 0.35) !important;
      background: rgba(15, 23, 42, 0.25) !important;
      color: var(--text-primary) !important;
      transition: all .15s ease !important;
  }
  .boardeva-title-chip:hover {
      border-color: var(--accent-color, #4dabf7) !important;
      background: rgba(77, 171, 247, 0.12) !important;
      transform: translateY(-1px);
  }

  /* Blueprint Preview Card */
  .boardeva-blueprint-preview {
      background: rgba(15, 23, 42, 0.28);
      border: 1px solid rgba(148, 163, 184, 0.25);
      border-radius: 12px;
  }

  .boardeva-ai-import-drawer summary { cursor: pointer; user-select: none; }
  .boardeva-ai-import-drawer summary:hover { color: var(--accent-color, #4dabf7); }

  .boardeva-import-modal .modal-body { max-height: min(78vh, 820px); overflow-y: auto; }
  .boardeva-prompt-text,
  .boardeva-import-json {
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .75rem;
      line-height: 1.45;
      resize: vertical;
  }
  .boardeva-import-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
  .boardeva-import-preview-column { border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; padding: 10px; background: rgba(15, 23, 42, .16); }
  .boardeva-import-preview-column ul { margin: 8px 0 0; padding-left: 1.1rem; font-size: .8rem; }

  #boardModal .modal-dialog { max-width: 760px; }
  #boardModal .modal-body { max-height: min(76dvh, 760px); overflow-y: auto; }
  #boardModal .boardeva-wizard-progress .progress { height: 4px; }
  #boardModal .boardeva-advanced-board-options > summary { cursor: pointer; color: var(--text-secondary); font-size: .85rem; }
  #boardModal #boardWizardGoal,
  #boardModal #boardWizardSource { resize: vertical; }
  #boardModal #boardWizardReviewCards { max-height: min(28vh, 260px); overflow-y: auto; }
  @media (max-width: 575.98px) {
    #boardModal .modal-dialog { margin: .5rem; }
    #boardModal .modal-footer { flex-wrap: wrap; gap: .5rem; }
    #boardModal #boardWizardDiscard { margin-right: auto !important; }
    .boardeva-purpose-grid { grid-template-columns: 1fr; gap: 8px; }
    .boardeva-starter-cards-grid { grid-template-columns: 1fr; gap: 8px; }
    .boardeva-recipe-grid { grid-template-columns: 1fr; }
  }

  .boardeva-settings-tabs {
      border-bottom-color: rgba(148, 163, 184, .22);
      gap: 4px;
  }
  .boardeva-settings-tabs .nav-link {
      color: var(--text-secondary);
      border: 0;
      border-radius: 8px 8px 0 0;
      font-size: .78rem;
  }
  .boardeva-settings-tabs .nav-link:hover,
  .boardeva-settings-tabs .nav-link.active {
      color: var(--text-primary);
      background: rgba(77, 171, 247, .14);
  }
  .boardeva-settings-tab-content { min-height: 270px; }
  .boardeva-settings-heading { color: var(--text-primary); font-size: .92rem; margin: 4px 0 14px; }
  .boardeva-settings-pane-content { display: grid; gap: 10px; }
  .boardeva-setting-switch {
      padding: 10px 12px;
      border: 1px solid rgba(148, 163, 184, .16);
      border-radius: 10px;
      background: rgba(15, 23, 42, .14);
  }
  .boardeva-setting-switch strong { font-size: .82rem; }
  .boardeva-setting-switch small { display: block; margin-top: 2px; color: var(--text-secondary); font-size: .7rem; }
  .boardeva-settings-card { padding: 10px 12px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 10px; }
  .column-workflow-settings { border-top: 1px solid rgba(148, 163, 184, .14); padding-top: 12px; }

  /* Tab Bar Right Actions */
  .tab-right-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
  }

  /* Theme Selector */
  .theme-selector {
      display: flex;
      gap: 10px;
      margin-top: 5px;
  }

  .theme-option {
      cursor: pointer;
      text-align: center;
      opacity: 0.7;
      transition: all 0.2s;
  }

  .theme-option:hover {
      opacity: 1;
      transform: translateY(-2px);
  }

  .theme-option.active {
      opacity: 1;
      font-weight: bold;
  }

  .theme-preview {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      margin-bottom: 5px;
      border: 2px solid transparent;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .theme-option.active .theme-preview {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
  }

  /* Space Selector Dropdown */
  .space-dropdown-toggle {
      width: auto;
      min-width: 32px;
      height: 32px;
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: white;
      font-weight: bold;
      gap: 6px;
  }

  .space-dropdown-toggle:hover,
  .space-dropdown-toggle:focus {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      color: white;
      box-shadow: none;
  }

  /* Ensure caret is shown */
  .space-dropdown-toggle::after {
      display: inline-block;
      margin-left: 0.255em;
      vertical-align: 0.255em;
      content: "";
      border-top: 0.3em solid;
      border-right: 0.3em solid transparent;
      border-bottom: 0;
      border-left: 0.3em solid transparent;
  }

  .space-initial {
      font-size: 14px;
      text-transform: uppercase;
  }

  .tab-right-actions .dropdown-menu {
      position: absolute;
      /* Ensure absolute positioning */
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      z-index: 1000;
  }

  .tab-right-actions .dropdown-item {
      color: var(--text-color);
  }

  .tab-right-actions .dropdown-item:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
  }

  .tab-right-actions .dropdown-item.active {
      background: var(--accent-color);
      color: white;
  }

  .tab-right-actions .dropdown-divider {
      border-top-color: rgba(255, 255, 255, 0.1);
  }

  .search-btn {
      border-radius: 50%;
      width: 32px;
      height: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
  }

  .search-btn:hover {
      background-color: rgba(255, 255, 255, 0.2);
      transform: scale(1.1);
  }

  /* Card Colors */

  .card.color-default {}

  .card.color-red {

      background: rgba(255, 95, 95, 0.1);
  }

  .card.color-green {

      background: rgba(76, 175, 80, 0.1);
  }

  .card.color-blue {

      background: rgba(33, 150, 243, 0.1);
  }

  .card.color-yellow {

      background: rgba(255, 235, 59, 0.1);
  }

  .card.color-purple {

      background: rgba(156, 39, 176, 0.1);
  }

  .card.color-orange {

      background: rgba(255, 152, 0, 0.1);
  }

  /* Filter Dropdown */
  .filter-dropdown-menu {
      width: 380px;
      min-height: 200px;
      max-height: 500px;
      overflow-y: auto;
      padding: 15px;
      background: white;
      backdrop-filter: none;
      border: 1px solid var(--glass-border);
  }

  .color-filter-option {
      display: flex;
      align-items: center;
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.2s;
      color: var(--text-primary);
  }

  .color-filter-option:hover {
      background: rgba(255, 255, 255, 0.1);
  }

  .color-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 10px;
      border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* Card selection styling */
  .card.card-selected {
    z-index: 10;
  }

  .column {
      min-width: var(--column-width, 320px);
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      margin-right: 15px;
      display: flex;
      flex-direction: column;
      max-height: 100%;
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* No column background filter */
  body.no-column-filter .column {
      backdrop-filter: none;
      background: rgba(0, 0, 0, 0.3);
  }

  /* Board Backgrounds */
  .kanban-board.board-bg-green {
      background: linear-gradient(135deg, #0f2e18, #1b4d2e);
  }

  .kanban-board.board-bg-blue {
      background: linear-gradient(135deg, #0f182e, #1b2e4d);
  }

  .kanban-board.board-bg-red {
      background: linear-gradient(135deg, #2e0f0f, #4d1b1b);
  }

  .kanban-board.board-bg-yellow {
      background: linear-gradient(135deg, #2e2e0f, #4d4d1b);
  }

  .kanban-board.board-bg-purple {
      background: linear-gradient(135deg, #1a0f2e, #2d1b4d);
  }

  /* Dark Menus */
  .dropdown-menu {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
  }

  .dropdown-item {
      color: var(--text-primary);
  }

  .dropdown-item:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
  }

  /* Search Modal Dark Theme */
  #searchModal .modal-content {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
  }

  #searchModal .list-group-item {
      background: var(--bg-primary);
      border-color: var(--border-color);
      color: var(--text-primary);
  }

  #searchModal .list-group-item:hover {
      background: var(--accent-color);
      color: white;
  }

  #searchModal .list-group-item .text-muted {
      color: var(--text-secondary) !important;
  }

  #searchModal .list-group-item:hover .text-muted {
      color: rgba(255, 255, 255, 0.8) !important;
  }

  .plugin-manager-modal {
      background: rgba(15, 23, 42, 0.97);
      backdrop-filter: blur(24px);
      border: 1px solid rgba(20, 184, 166, 0.28);
      color: #e2e8f0;
  }

  .plugin-manager-header-icon {
      color: #2dd4bf;
      font-size: 1.1rem;
  }

  .plugin-manager-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
  }

  .plugin-manager-section-title {
      color: #f8fafc;
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 9px;
      text-transform: uppercase;
  }

  .plugin-manager-list {
      display: grid;
      gap: 10px;
  }

  .plugin-manager-row {
      align-items: flex-start;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 8px;
      display: grid;
      gap: 12px;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      padding: 12px;
  }

  .plugin-manager-icon {
      align-items: center;
      background: rgba(20, 184, 166, 0.16);
      border: 1px solid rgba(45, 212, 191, 0.32);
      border-radius: 8px;
      color: #5eead4;
      display: flex;
      height: 38px;
      justify-content: center;
      width: 38px;
  }

  .plugin-manager-main {
      min-width: 0;
  }

  .plugin-manager-title-line {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 4px;
  }

  .plugin-manager-title {
      color: #f8fafc;
      font-size: 0.95rem;
      font-weight: 700;
  }

  .plugin-manager-badge {
      background: rgba(148, 163, 184, 0.16);
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 999px;
      color: #cbd5e1;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 7px;
  }

  .plugin-manager-badge.is-enabled {
      background: rgba(34, 197, 94, 0.16);
      border-color: rgba(34, 197, 94, 0.28);
      color: #86efac;
  }

  .plugin-manager-description {
      color: #94a3b8;
      font-size: 0.78rem;
      line-height: 1.45;
      margin-bottom: 9px;
  }

  .plugin-manager-permissions {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
  }

  .plugin-permission-pill {
      background: rgba(255, 255, 255, 0.055);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      color: #cbd5e1;
      font-size: 0.68rem;
      padding: 2px 7px;
  }

  .plugin-manager-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
  }

  .plugin-manager-btn {
      align-items: center;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 7px;
      color: #e2e8f0;
      display: inline-flex;
      font-size: 0.78rem;
      font-weight: 700;
      gap: 6px;
      min-height: 34px;
      padding: 7px 10px;
  }

  .plugin-manager-btn.primary {
      background: rgba(20, 184, 166, 0.18);
      border-color: rgba(45, 212, 191, 0.34);
      color: #ccfbf1;
  }

  .plugin-manager-empty,
  .plugin-manager-empty.text-danger,
  .plugin-manager-status.text-danger {
      color: #fca5a5 !important;
  }
  .plugin-manager-status {
      color: #94a3b8;
      font-size: 0.78rem;
  }

  .plugin-manager-empty {
      border: 1px dashed rgba(148, 163, 184, 0.24);
      border-radius: 8px;
      padding: 12px;
  }

  .plugin-manager-empty.text-danger,
  .plugin-manager-status.text-danger {
      color: #fca5a5 !important;
  }
  .plugin-manager-status {
      margin-top: 12px;
      min-height: 18px;
  }

  @media (max-width: 620px) {
      .plugin-manager-row {
          grid-template-columns: 34px minmax(0, 1fr);
      }

      .plugin-manager-actions {
          grid-column: 1 / -1;
          justify-content: stretch;
      }

      .plugin-manager-btn {
          justify-content: center;
          width: 100%;
      }
  }

  /* Card Highlight Animation */
  @keyframes highlightPulse {
      0% {
          box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0.7);
          transform: scale(1);
      }

      50% {
          box-shadow: 0 0 0 10px rgba(var(--accent-color-rgb), 0);
          transform: scale(1.02);
      }

      100% {
          box-shadow: 0 0 0 0 rgba(var(--accent-color-rgb), 0);
          transform: scale(1);
      }
  }

  .highlight-card {
      animation: highlightPulse 2s ease-out;
      border: 2px solid var(--accent-color) !important;
      z-index: 10;
  }

  /* Filter Dropdown Tabs */
  .filter-dropdown-menu {
      width: 380px;
      padding: 0;
      overflow: hidden;
  }

  .filter-tabs {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      border-bottom: 0;
  }

  .filter-tab {
      flex: 1;
      padding: 10px;
      border: 0;
      font: inherit;
      text-align: center;
      cursor: pointer;
      font-size: 15px;
      color: var(--text-secondary);
      transition: all 0.2s;
      border-bottom: 0;
      background: transparent;
  }

  .filter-tabs-icons-only .filter-tab { min-width: 40px; padding: 10px 6px; }
  .filter-tabs-icons-only .filter-tab .filter-tab-label { display: none; }
  .filter-modal-context-menu { min-width: 210px; }

  .filter-tab.active {
      color: var(--text-primary);
      border-bottom: 0;
      background: rgba(77, 171, 247, .2);
      box-shadow: inset 0 0 0 1px rgba(123, 190, 255, .25);
  }

  .filter-content {
      padding: 10px;
      max-height: 300px;
      overflow-y: auto;
  }

  .filter-display-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-top: 1px solid var(--border-color);
      padding: 10px 12px 12px;
      background: rgba(255, 255, 255, 0.03);
  }

  .filter-display-option {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      margin: 0;
      color: var(--text-primary);
      cursor: pointer;
      line-height: 1.2;
  }

  .filter-display-option input {
      flex: 0 0 auto;
      margin-top: 0;
      accent-color: var(--accent-color);
      cursor: pointer;
  }

  .filter-display-option strong {
      min-width: 0;
      font-size: 0.84rem;
  }

  .filter-clear-button {
      flex: 0 0 auto;
      margin-left: auto;
  }

  .filter-display-option span {
      display: grid;
      gap: 3px;
  }

  .filter-display-option small {
      color: var(--text-secondary);
      font-size: 0.76rem;
  }
  .filter-tab-content {
      display: none;
  }

  .filter-tab-content.active {
      display: block;
  }

  /* Date Filter Options */
  .filter-date-option {
      display: flex;
      align-items: center;
      padding: 8px;
      cursor: pointer;
      border-radius: 4px;
      transition: background 0.2s;
  }

  .filter-date-option:hover {
      background: rgba(255, 255, 255, 0.1);
  }

  .filter-date-option input[type="radio"] {
      margin-right: 10px;
      accent-color: var(--accent-color);
  }

  .custom-date-inputs {
      margin-top: 10px;
      padding-left: 25px;
      display: none;
  }

  .custom-date-inputs.show {
      display: block;
  }

  .custom-date-inputs input {
      width: 100%;
      margin-bottom: 5px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 5px;
      border-radius: 4px;
  }

  /* Favorite Icon Active State */
  .card-favorite-toggle.text-warning i {
      font-weight: 900;
      /* Ensure solid style for fas */
      color: #ffc107;
      /* Bootstrap warning color */
  }

  /* Card Description Color */
  .card-description {
      color: white !important;
  }

  /* Card previews use compact interface typography even when their Markdown
     contains document-level headings. Reader/editor typography is untouched. */
  .card .card-description.markdown-content {
      font-size: 0.82rem;
      line-height: 1.45;
  }

  .card .card-description.markdown-content h1 {
      font-size: 1.15rem;
      line-height: 1.25;
      margin: 0.6rem 0 0.35rem;
  }

  .card .card-description.markdown-content h2 {
      font-size: 1.05rem;
      line-height: 1.3;
      margin: 0.55rem 0 0.3rem;
  }

  .card .card-description.markdown-content h3,
  .card .card-description.markdown-content h4,
  .card .card-description.markdown-content h5,
  .card .card-description.markdown-content h6 {
      font-size: 0.95rem;
      line-height: 1.35;
      margin: 0.5rem 0 0.25rem;
  }

  .card .card-description.markdown-content p,
  .card .card-description.markdown-content li {
      font-size: inherit;
      line-height: inherit;
  }

  .card .card-description.markdown-content ul,
  .card .card-description.markdown-content ol {
      padding-left: 1.25rem;
  }

  /* Rendered subtask icons inherit the card's normal white UI color. A
     manually selected color remains an inline style on the inner icon and
     therefore still wins over this inherited default. */
  .card .subitem-icon {
      display: inline-flex;
      flex: 0 0 1.1rem;
      align-items: center;
      justify-content: center;
      color: var(--text-primary, #fff);
  }

  .card .subitem-icon i {
      color: inherit;
  }

  /* Active Card Highlight */
  .card.active-card {
      border: 2px solid white !important;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
      /* transform: scale(1.02);  REMOVED: No more scale animation on click */
      transition: none;
      z-index: 100;
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
      #spaceDropdownMenu {
          display: none !important;
      }

      /* Ensure favorite button is visible on mobile */
      .card-favorite-toggle {
          opacity: 1 !important;
          visibility: visible !important;
      }
  }

  /* Ensure timer text is visible */
  .card-timer-text {
      display: inline-block;
      color: white !important;
  }

  /* Ensure favorite button is visible */
  .card-favorite-toggle {
      opacity: 1;
      visibility: visible;
  }

  /* Input group text styling */
  .input-group-text {
      background: transparent !important;
      color: white !important;
      border: 1px solid var(--border-color) !important;
  }


/* ══════════════════════════════════════════════════════════════
   UPGRADE / BILLING MODAL
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.upgrade-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 20px;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.upgrade-modal-overlay.upgrade-modal-visible {
    opacity: 1;
}

/* ── Panel ── */
.upgrade-modal-panel {
    position: relative;
    background: linear-gradient(160deg, #141427 0%, #1c1c35 60%, #12122a 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05) inset;
    max-width: 880px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
    transform: translateY(20px);
    transition: transform 0.28s cubic-bezier(.34,1.56,.64,1);
}

.upgrade-modal-overlay.upgrade-modal-visible .upgrade-modal-panel {
    transform: translateY(0);
}

/* ── Close ── */
.upgrade-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
    padding: 0;
}

.upgrade-modal-close:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
}

/* ── Hero Header ── */
.upgrade-modal-hero {
    position: relative;
    padding: 40px 40px 32px;
    overflow: hidden;
    text-align: center;
}

.upgrade-hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 220px;
    background: radial-gradient(ellipse, rgba(130,80,255,0.28) 0%, transparent 70%);
    pointer-events: none;
}

.upgrade-hero-content {
    position: relative;
}

.upgrade-reason-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,165,0,0.12);
    border: 1px solid rgba(255,165,0,0.3);
    color: #ffc857;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
    font-weight: 500;
}

.upgrade-reason-icon {
    font-size: 15px;
}

.upgrade-hero-title {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.upgrade-gradient-text {
    background: linear-gradient(90deg, #a78bfa, #60a5fa, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.upgrade-hero-sub {
    color: rgba(255,255,255,0.55);
    font-size: 15px;
    margin: 0;
}

/* ── Plans Grid ── */
.upgrade-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 0 32px 24px;
}

@media (max-width: 680px) {
    .upgrade-plans-grid {
        grid-template-columns: 1fr;
        padding: 0 20px 20px;
    }
    .upgrade-modal-hero {
        padding: 28px 20px 20px;
    }
    .upgrade-hero-title {
        font-size: 24px;
    }
}

/* ── Plan Card Base ── */
.upgrade-plan-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.upgrade-plan-card:hover {
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-3px);
}

.upgrade-plan-current {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Free Card ── */
.upgrade-plan-free .upgrade-plan-header h3 {
    color: rgba(255,255,255,0.7);
}

/* ── Premium Card ── */
.upgrade-plan-premium {
    border-color: rgba(167,139,250,0.4);
    box-shadow: 0 0 30px rgba(130,80,255,0.12);
}

.upgrade-plan-premium:hover {
    border-color: rgba(167,139,250,0.7);
    box-shadow: 0 0 40px rgba(130,80,255,0.2);
}

.upgrade-plan-popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #7c3aed, #4f46e5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 100px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

/* ── Pro Card ── */
.upgrade-plan-pro {
    border-color: rgba(52,211,153,0.35);
    box-shadow: 0 0 30px rgba(16,185,129,0.08);
}

.upgrade-plan-pro:hover {
    border-color: rgba(52,211,153,0.6);
    box-shadow: 0 0 40px rgba(16,185,129,0.15);
}

/* ── Plan Header ── */
.upgrade-plan-header {
    text-align: center;
}

.upgrade-plan-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}

.upgrade-plan-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}

.upgrade-plan-price {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.upgrade-plan-price .upgrade-plan-period {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
}

.upgrade-plan-trial {
    font-size: 12px;
    color: rgba(52,211,153,0.9);
    margin-top: 5px;
    font-weight: 500;
}

/* ── Features List ── */
.upgrade-plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.upgrade-plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
}

.upgrade-plan-features li i.fa-check {
    color: #34d399;
    font-size: 11px;
    flex-shrink: 0;
}

.upgrade-feature-no {
    color: rgba(255,255,255,0.3) !important;
    text-decoration: line-through;
}

.upgrade-feature-no i.fa-times {
    color: rgba(255,100,100,0.5) !important;
    font-size: 11px;
    flex-shrink: 0;
}

/* ── Plan Actions ── */
.upgrade-plan-action {
    margin-top: auto;
}

.upgrade-plan-action-pro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upgrade-pro-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Buttons */
.upgrade-btn-current {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.35);
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: not-allowed;
}

.upgrade-btn-premium {
    width: 100%;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    border: none;
    color: #fff;
    border-radius: 10px;
    padding: 11px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(124,58,237,0.5);
}

.upgrade-btn-premium:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 6px 28px rgba(124,58,237,0.65);
}

.upgrade-btn-pro {
    width: 100%;
    background: rgba(52,211,153,0.12);
    border: 1px solid rgba(52,211,153,0.4);
    color: #34d399;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.upgrade-btn-pro:hover {
    background: rgba(52,211,153,0.22);
    box-shadow: 0 4px 16px rgba(52,211,153,0.25);
    transform: translateY(-1px);
}

.upgrade-btn-pro-lifetime {
    width: 100%;
    background: linear-gradient(135deg, #065f46, #047857);
    border: 1px solid rgba(52,211,153,0.5);
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(5,150,105,0.4);
}

.upgrade-btn-pro-lifetime:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Footer ── */
.upgrade-modal-footer {
    padding: 16px 32px 28px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.upgrade-link-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 4px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.upgrade-link-btn:hover {
    color: rgba(255,255,255,0.8);
}

.upgrade-footer-divider {
    color: rgba(255,255,255,0.2);
    font-size: 13px;
}

.upgrade-footer-secure {
    color: rgba(255,255,255,0.3);
    font-size: 12px;
}

/* ── Split Header Styles ── */
.app-header.split-header {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
}

.app-header.split-header .header-actions {
    order: 1;
    height: 42px;
    padding: 5px 20px;
    justify-content: flex-start;
    width: 100%;
}

.app-header.split-header .header-actions-right-start {
    margin-left: auto !important;
}

.app-header.split-header .board-tabs {
    order: 2;
    padding: 10px 20px;
    width: 100%;
    margin-right: 0;
}

.app-header.split-header .board-switcher-btn {
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 15px !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.app-header.split-header .board-switcher-btn:hover {
    background: transparent !important;
    color: #fff !important;
}

/* Ensure header buttons in split-header top bar are properly vertically centered */
.app-header.split-header .header-actions > * {
    align-self: center;
}

/* ── Right Bar Icon Customize Items ── */
.icon-customize-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
}

.icon-customize-item:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.icon-customize-item .btn {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.15s ease;
}

.icon-customize-item .btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.icon-customize-item .btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ── Board Switcher Dropdown Style ── */
.board-switcher-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.board-switcher-btn:hover,
.board-switcher-btn:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    box-shadow: none !important;
}

.board-switcher-btn::after {
    display: none !important; /* Hide caret on mobile */
}

.board-initial {
    font-size: 14px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .board-initial {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .board-switcher-btn {
        width: auto !important;
        min-width: 32px !important;
        height: 32px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        gap: 6px;
    }

    .board-switcher-btn::after {
        display: inline-block !important;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
}
.nestboard-hidden-plan {
    display: none !important;
}

/* Smart boards and responsive settings/header */
.settings-dialog {
    width: min(1080px, calc(100vw - 32px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#settingsModal .modal-content {
    max-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.link-preview-outline,
.card-actions .btn-secondary,
.column-header .btn-outline-light,
.column-btn {
    border-color: rgba(226, 232, 240, 0.38) !important;
}
.link-preview-outline:hover,
.card-actions .btn-secondary:hover,
.column-header .btn-outline-light:hover,
.column-btn:hover {
    border-color: rgba(241, 245, 249, 0.72) !important;
}
.link-preview-outline:focus-visible,
.card-actions button:focus-visible {
    outline: 2px solid rgba(226, 232, 240, 0.9);
    outline-offset: 2px;
}
.card-actions.card-actions-has-link {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 36px;
    gap: 5px;
}
.card-actions-has-link .card-menu-btn {
    float: none !important;
    margin-left: auto;
}
.card-actions-has-link .card-preview-mode {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.38);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.22);
}
.card-preview-mode button {
    min-width: 48px;
    padding: 5px 9px;
    color: rgba(255, 255, 255, 0.82);
    border: 0;
    background: transparent;
    font: inherit;
    line-height: 1.2;
}
.card-preview-mode button.active {
    color: #fff;
    background: rgba(226, 232, 240, 0.2);
}
.card-live-link-preview {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.24);
    border-radius: 7px;
    background: rgba(15, 23, 42, 0.24);
}
.card-live-link-preview iframe,
.card-live-link-preview webview {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
.link-browser-surface {
    display: flex;
    flex-direction: column;
    background: #181818;
}
.link-browser-toolbar {
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 7px 12px;
    background: #181818;
}
.link-browser-address {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: #e2e8f0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.link-browser-frame-wrap {
    min-height: 0;
    flex: 1;
    background: #fff;
}
.link-browser-frame-wrap iframe,
.link-browser-frame-wrap webview {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.card-content > .card-actions.card-actions-has-link {
    padding-inline-end: 32px;
}
.card.preview-mode-link .card-content > :not(.card-live-link-preview) {
    display: none !important;
}
.card-live-link-preview iframe {
    width: 100%;
    height: 100%;
}

/* Save/cancel actions live beside the title and close control. This keeps
   modal chrome reachable without a fixed footer separator. */
#settingsModal .modal-header,
#cardModal .modal-header,
#editBoardModal .modal-header,
#editColumnModal .modal-header,
#editSpaceModal .modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
#settingsModal .modal-header .btn-close,
#cardModal .modal-header .btn-close,
#editBoardModal .modal-header .btn-close,
#editColumnModal .modal-header .btn-close,
#editSpaceModal .modal-header .btn-close {
    flex: 0 0 auto;
    filter: invert(1) grayscale(1) brightness(2) !important;
    opacity: 1 !important;
}
#settingsModal > .modal-dialog > .modal-content > .modal-footer,
#cardModal > .modal-dialog > .modal-content > .modal-footer {
    display: none !important;
    border-top: 0 !important;
}

#settingsModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
}

#settingsModal .modal-body > .d-flex {
    align-items: stretch;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    width: 100%;
}

#settingsModal .settings-sidebar {
    flex: 0 0 250px;
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    overflow-y: auto;
    padding: 8px 0;
}

#settingsModal .settings-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 4px 8px 10px;
    background: inherit;
}

#settingsModal .settings-search-control {
    position: relative;
    display: flex;
    align-items: center;
}

#settingsModal .settings-search-control > .fa-search {
    position: absolute;
    left: 12px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
    pointer-events: none;
    z-index: 1;
}

#settingsModal #settingsSearchInput {
    min-height: 38px;
    padding-left: 34px;
    padding-right: 34px;
    border-radius: 999px;
}

#settingsModal .settings-search-clear {
    position: absolute;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    background: transparent;
}

#settingsModal .settings-search-clear:hover,
#settingsModal .settings-search-clear:focus-visible {
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.12);
}

#settingsModal .settings-search-status {
    min-height: 18px;
    padding: 4px 8px 0;
    font-size: 0.72rem;
    color: var(--text-secondary, rgba(255, 255, 255, 0.65));
}

#settingsModal .settings-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 2px;
}

#settingsModal .settings-search-result {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--text-primary, #fff);
    background: transparent;
    text-align: left;
}

#settingsModal .settings-search-result:hover,
#settingsModal .settings-search-result:focus-visible {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    outline: none;
}

#settingsModal .settings-search-result-label {
    overflow: hidden;
    font-size: 0.82rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#settingsModal .settings-search-result-location {
    overflow: hidden;
    color: var(--text-secondary, rgba(255, 255, 255, 0.58));
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#settingsModal .performance-settings-section {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#settingsModal .performance-settings-section-title {
    margin-bottom: 14px;
    color: var(--text-primary, #fff);
    font-size: 0.95rem;
    font-weight: 700;
}

/* The global .nav-link rule is sized for the compact board switcher. Settings
   navigation must use the full sidebar width so labels (especially Features &
   Extensions) remain readable and the active state fills the row. */
#settingsModal .settings-sidebar .nav-link {
    width: calc(100% - 16px) !important;
    min-width: 0;
    box-sizing: border-box;
}

#settingsModal .settings-sidebar .nav-link i {
    flex: 0 0 24px;
    text-align: center;
}

#settingsModal .settings-content {
    flex: 1 1 auto !important;
    min-height: 0;
    max-height: 100%;
    min-width: 0;
    width: calc(100% - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 32px !important;
    scrollbar-gutter: stable;
}

#settingsModal .settings-content > .tab-content,
#settingsModal .settings-content .tab-pane {
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

#settingsModal .settings-content .setting-group {
    margin-bottom: 20px;
}

.header-layout-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 420px);
}

.header-layout-control .btn {
    border-radius: 0;
    white-space: nowrap;
}

.header-layout-control .btn:first-of-type {
    border-radius: 6px 0 0 6px;
}

.header-layout-control .btn:last-of-type {
    border-radius: 0 6px 6px 0;
}

.smart-board-fields {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
}

.smart-board-rules {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.smart-board-rule {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(130px, 0.8fr) minmax(120px, 0.7fr) minmax(150px, 1.5fr) 36px;
}

.smart-board-rule .btn {
    height: 38px;
    width: 36px;
}

.smart-board-source {
    align-items: center;
    color: var(--text-secondary);
    display: flex;
    font-size: 0.72rem;
    gap: 6px;
    margin-top: 7px;
}

.smart-board-source button {
    color: inherit;
    margin-left: auto;
}

.board-tab.smart-board-tab::after {
    color: var(--accent-color);
    content: '\f0d0';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 7 Free';
    font-size: 0.72rem;
    font-weight: 900;
}

@media (max-width: 760px) {
    .settings-dialog {
        width: calc(100vw - 16px);
        margin: 8px auto;
    }

    #settingsModal .modal-content {
        height: calc(100vh - 16px);
    }

    #settingsModal .modal-body > .d-flex {
        flex-direction: column;
        min-height: 0;
    }

    #settingsModal .settings-sidebar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 0 !important;
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 0;
    }

    #settingsModal .settings-sidebar .nav {
        flex-direction: row !important;
        flex-wrap: nowrap;
        min-width: max-content;
        padding: 6px;
    }

    #settingsModal .settings-sidebar .nav-link {
        margin: 2px;
        width: auto !important;
    }

    #settingsModal .settings-content {
        width: 100%;
        min-height: 0;
        max-height: 100%;
        padding: 20px !important;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .smart-board-rule {
        grid-template-columns: 1fr 1fr 36px;
    }

    .smart-board-rule-value {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .smart-board-rule .btn {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}
/* Compact toolbar control normalization */
.header-actions {
    --header-control-height: 36px;
}

.header-actions > * {
    flex: 0 0 auto;
}

.header-actions .ms-2,
.header-actions .me-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header-actions .user-menu-btn,
.header-actions .header-icon-btn,
.header-actions .board-switcher-btn,
.header-actions .space-dropdown-toggle,
.header-actions .plan-badge-btn,
.header-actions .prism-sync-widget,
.header-actions .sync-widget {
    box-sizing: border-box;
    height: var(--header-control-height) !important;
    min-height: var(--header-control-height);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.header-actions .user-menu-btn,
.header-actions .header-icon-btn {
    width: var(--header-control-height);
    min-width: var(--header-control-height);
    border-radius: 50%;
    font-size: 16px;
}

.header-actions .plan-badge-btn,
.header-actions .prism-sync-widget,
.header-actions .sync-widget {
    border-radius: 18px;
}

.header-actions .prism-sync-widget,
.header-actions .sync-widget {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: var(--header-control-height);
    padding: 0 10px;
}

.header-actions i {
    line-height: 1;
}

.app-header.split-header .header-actions {
    overflow: visible;
    scrollbar-width: none;
}

.app-header.split-header .header-actions::-webkit-scrollbar {
    display: none;
}

.app-header.split-header .board-switcher-btn {
    min-width: var(--header-control-height) !important;
    padding: 0 10px !important;
    margin-right: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

@media (max-width: 768px) {
    .header-actions .space-initial {
        display: none;
    }

    .header-actions .space-dropdown-toggle {
        width: var(--header-control-height);
        min-width: var(--header-control-height);
        padding: 0 !important;
        border-radius: 50%;
    }
}

@media (max-width: 768px) {
    .header-actions .board-switcher-btn i,
    .header-actions .space-dropdown-toggle i {
        margin: 0 !important;
    }
}
/* Mobile filter dropdown viewport fix */
.filter-dropdown-menu.show {
    z-index: 2200;
}

@media (max-width: 520px) {
    .app-header.split-header .header-actions {
        gap: 6px;
        overflow: visible;
        padding-left: 8px;
        padding-right: 8px;
    }

    .filter-dropdown-menu {
        position: fixed !important;
        inset: var(--filter-mobile-top-offset, 112px) auto auto 0 !important;
        left: 0 !important;
        right: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100dvh - var(--filter-mobile-top-offset, 112px));
        margin: 0 !important;
        transform: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 0 12px 12px !important;
        overflow: hidden;
    }

    .filter-dropdown-menu .filter-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filter-dropdown-menu .filter-tab {
        min-width: 0;
        padding: 8px 4px;
        font-size: 12px;
        white-space: nowrap;
    }

    .filter-dropdown-menu .filter-tabs-icons-only .filter-tab { padding: 9px 4px; }

    .filter-dropdown-menu .filter-content {
        max-height: min(54vh, 360px);
        overflow-y: auto;
    }
}

/* Final header/card polish: keep split rows evenly inset on every side. */
.app-header.split-header {
    padding: 12px;
    gap: 10px;
    box-sizing: border-box;
}

.app-header.split-header .header-actions,
.app-header.split-header .board-tabs {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

.app-header.split-header .header-actions {
    min-height: 42px;
    height: auto;
    padding: 0 12px;
}

.app-header.split-header .board-tabs {
    min-height: 42px;
    padding: 0 12px;
}

.header-actions .workspace-board-picker-btn {
    gap: 9px;
    min-width: 132px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.card-timer {
    margin-left: auto !important;
}

.subitem.completed .subitem-text,
.subitem.completed .subitem-icon {
    color: var(--text-secondary) !important;
}

.card .subitem-icon:not(.icon-custom-color),
.card .subitem-icon:not(.icon-custom-color) i {
    color: #fff !important;
}

.card .subitem.completed .subitem-icon:not(.icon-custom-color),
.card .subitem.completed .subitem-icon:not(.icon-custom-color) i {
    color: var(--text-secondary) !important;
}

.subitem.completed-strikethrough .subitem-text {
    text-decoration: line-through;
}

.subitems-show-all {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.subitems-show-all:hover,
.subitems-show-all:focus-visible {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Sync uses motion and the icon to communicate activity; no slot/progress bar. */
.header-actions .prism-sync-widget[data-sync-status="syncing"],
.header-actions .sync-widget[data-sync-status="syncing"] {
    animation: boardeva-sync-pulse 1.5s ease-in-out infinite !important;
}

.header-actions .prism-sync-widget[data-sync-status="syncing"] .sync-header-icon,
.header-actions .sync-widget[data-sync-status="syncing"] .sync-header-icon {
    animation: boardeva-sync-spin 1.1s linear infinite !important;
}

@keyframes boardeva-sync-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.05); opacity: 0.86; }
    50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18); opacity: 1; }
}

@keyframes boardeva-sync-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .app-header.split-header {
        padding: 8px;
        gap: 8px;
    }

    .app-header.split-header .header-actions,
    .app-header.split-header .board-tabs {
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-actions .workspace-board-picker-btn {
        min-width: var(--header-control-height);
        padding-left: 0;
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-actions .prism-sync-widget[data-sync-status="syncing"],
    .header-actions .sync-widget[data-sync-status="syncing"],
    .header-actions .prism-sync-widget[data-sync-status="syncing"] .sync-header-icon,
    .header-actions .sync-widget[data-sync-status="syncing"] .sync-header-icon {
        animation: none !important;
    }
}

/* Header workspace/board picker and compact assistant action */
.header-actions .workspace-board-picker-btn,
.header-actions .eva-header-button {
    box-sizing: border-box;
    height: var(--header-control-height);
    min-height: var(--header-control-height);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.header-actions .workspace-board-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: var(--header-control-height);
    padding: 0 11px;
    border-radius: 18px;
    font-weight: 700;
}

.header-actions .workspace-board-picker-btn-icon-only,
.header-actions .eva-header-button {
    width: var(--header-control-height);
    min-width: var(--header-control-height);
    padding: 0;
    border-radius: 50%;
}

.header-actions .eva-header-button .eva-header-icon {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

.header-actions .eva-header-button .eva-header-icon i {
    color: inherit;
}

.workspace-board-picker-menu {
    min-width: 260px;
    max-width: min(360px, calc(100vw - 16px));
    padding: 6px;
}

.workspace-board-picker-heading,
.workspace-board-picker-empty {
    display: block;
    padding: 7px 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.62);
}

.workspace-board-picker-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.workspace-board-picker-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    border-radius: 5px;
}

.workspace-board-picker-menu .dropdown-item > span:not(.workspace-board-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-board-picker-space > i {
    width: 16px;
    text-align: center;
}

.workspace-board-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 14px;
}

/* The board picker keeps All boards nested so the current space stays easy to scan. */
.workspace-board-picker-menu .dropdown-submenu {
    position: relative;
}

.workspace-board-picker-menu .dropdown-submenu > .dropdown-menu {
    top: auto;
    left: 100%;
    bottom: 0;
    display: none;
    min-width: 240px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    margin-left: 4px;
}

.workspace-board-picker-menu .dropdown-submenu.show > .dropdown-menu {
    display: block;
}

@media (max-width: 520px) {
    .workspace-board-picker-menu .dropdown-submenu > .dropdown-menu {
        top: auto;
        right: 0;
        bottom: 100%;
        left: auto;
        max-width: calc(100vw - 32px);
        margin: 0 0 4px;
    }
}

.header-actions .eva-header-button:hover,
.header-actions .workspace-board-picker-btn:hover,
.header-actions .eva-header-button:focus,
.header-actions .workspace-board-picker-btn:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
    box-shadow: none;
}

@media (max-width: 520px) {
    .workspace-board-picker-menu {
        width: min(320px, calc(100vw - 16px));
    }
}

/* Manual Inbox review queue */
.inbox-modal-dialog { width: min(1240px, calc(100vw - 32px)); max-width: none; }
.inbox-modal-content {
    --inbox-surface-bg: rgba(255, 255, 255, .06);
    --inbox-raised-bg: rgba(255, 255, 255, .1);
    --inbox-surface-border: rgba(255, 255, 255, .18);
    --inbox-muted: rgba(255, 255, 255, .68);
    min-height: min(720px, calc(100vh - 64px));
    border: 1px solid var(--inbox-surface-border);
    border-radius: 16px;
    background: rgba(17, 19, 21, .96) !important;
    color: var(--text-primary);
    box-shadow: none;
    overflow: hidden;
}
[data-theme="light"] .inbox-modal-content {
    --inbox-surface-bg: rgba(255, 255, 255, .72);
    --inbox-raised-bg: rgba(255, 255, 255, .9);
    --inbox-surface-border: rgba(23, 43, 77, .16);
    --inbox-muted: var(--text-secondary);
}
#automationInboxModal .modal-header {
    position: relative;
    z-index: 5;
    min-height: 72px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--inbox-surface-border);
    background: rgba(17, 19, 21, .9);
    backdrop-filter: none;
}
.inbox-modal-body { display: grid; grid-template-columns: minmax(220px, 0.7fr) minmax(360px, 1.35fr) minmax(230px, 0.65fr); gap: 0; min-height: 590px; padding: 0; overflow: hidden; }
.inbox-queue-panel, .inbox-preview-panel, .inbox-destination-panel { min-width: 0; padding: 16px; overflow: auto; }
.inbox-queue-panel { border-right: 1px solid var(--inbox-surface-border); background: var(--inbox-surface-bg); }
.inbox-preview-panel { border-right: 1px solid var(--inbox-surface-border); }
.inbox-destination-panel { background: var(--inbox-surface-bg); }
.inbox-queue-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.inbox-queue-list { display:grid; gap:6px; }
.inbox-queue-item { width:100%; display:flex; align-items:flex-start; gap:9px; text-align:left; color:inherit; background:transparent; border:1px solid transparent; border-radius:6px; padding:9px; }
.inbox-queue-item:hover, .inbox-queue-item.active { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.1); }
.inbox-queue-item input { margin-top: 3px; flex: 0 0 auto; }
.inbox-queue-open { min-width:0; flex:1; display:block; text-align:left; color:inherit; background:transparent; border:0; padding:0; }
.inbox-queue-item-copy { min-width:0; display:grid; gap:3px; }
.inbox-queue-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.inbox-queue-meta { display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.65); }
.inbox-queue-date { font-size:10px; color:rgba(255,255,255,.48); }
.inbox-status { text-transform:capitalize; padding:1px 5px; border-radius:4px; background:rgba(77,171,247,.16); color:#9bd3ff; }
.inbox-status-failed { background:rgba(255,193,7,.15); color:#ffd96b; }
.inbox-status-claimed { background:rgba(255,255,255,.1); color:#d3d8df; }
.inbox-preview-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:14px; }
.inbox-source-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(77,171,247,.32); color:#b9ddff; background:rgba(77,171,247,.1); border-radius:5px; padding:4px 7px; font-size:12px; }
.inbox-card-description { min-height:270px; resize:vertical; }
.inbox-card-surface { min-height:330px; border:1px solid var(--inbox-surface-border); border-radius:14px; padding:18px; background:var(--inbox-raised-bg); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.inbox-card-surface-icon { font-size:2.4rem; line-height:1; margin:22px 0 14px; }
.inbox-card-surface-title { font-size:1.45rem; line-height:1.18; margin:0 0 12px; color:var(--text-primary); overflow-wrap:anywhere; }
.inbox-card-surface-description { color:var(--inbox-muted); white-space:pre-wrap; overflow-wrap:anywhere; min-height:64px; margin-bottom:14px; }
.inbox-card-surface-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.inbox-card-surface-tags span { border-radius:999px; padding:3px 8px; background:rgba(77,171,247,.15); color:#b9ddff; font-size:11px; }
.inbox-card-surface-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px; }
.inbox-eva-action-prompt { flex:1 0 100%; color:var(--inbox-muted); font-size:13px; font-weight:600; }
.inbox-eva-action-note { flex:1 0 100%; color:var(--inbox-muted); font-size:12px; }
.inbox-virtual-column { display:grid; gap:12px; min-width:0; }
.inbox-virtual-card-host { min-width:0; }
.inbox-virtual-card-host > .card { width:100%; min-height:0; margin:0; }
.inbox-virtual-card-host > .card .card-content { max-height:500px; }
.inbox-virtual-card-host > .card .card-description { max-height:none; }
.inbox-virtual-card-host > .card .card-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.inbox-virtual-card-host > .card .card-actions-header { margin-left:auto; }
.inbox-origin-link { display:block; margin-top:16px; color:#8ecbff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-destination-heading { display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:18px; }
.inbox-suggestion-note { margin-top:12px; font-size:12px; line-height:1.45; color:var(--inbox-muted); }
.inbox-suggestion-note i { margin-right:6px; color:#f7d774; }
.inbox-empty-state, .inbox-batch-preview { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; color:var(--inbox-muted); }
.inbox-empty-state i, .inbox-batch-preview i { font-size:25px; color:var(--inbox-muted); }
.inbox-batch-preview p { max-width:300px; margin:0; font-size:13px; }
.inbox-modal-footer { border-top:1px solid var(--inbox-surface-border); background: transparent; }
@media (max-width: 900px) {
  .inbox-modal-dialog { width: min(760px, calc(100vw - 16px)); margin: 8px auto; }
  .inbox-modal-content { min-height: calc(100vh - 16px); }
  .inbox-modal-body { grid-template-columns: minmax(190px,.7fr) minmax(0,1.3fr); min-height:0; }
  .inbox-destination-panel { grid-column:1 / -1; border-top:1px solid rgba(255,255,255,.1); border-right:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
  .inbox-destination-heading, .inbox-suggestion-note { grid-column:1 / -1; margin:0; }
  .inbox-destination-panel .mt-3 { margin-top:0 !important; }
}
@media (max-width: 620px) {
  .inbox-modal-body { display:flex; flex-direction:column; overflow:auto; }
  .inbox-queue-panel { max-height:230px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .inbox-preview-panel { border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
  .inbox-destination-panel { display:grid; grid-template-columns:1fr 1fr; }
  .inbox-modal-footer { flex-wrap:wrap; }
  .inbox-modal-footer .ms-auto { width:100%; margin-left:0 !important; }
  .inbox-modal-footer .ms-auto button { flex:1; }
  .inbox-card-surface-actions > button { flex:1 1 100%; }
}

/* Optional text labels for the primary header actions. */
.header-actions .header-icon-btn.header-action-with-text,
.header-actions .workspace-board-picker-btn.header-action-with-text,
.header-actions .space-dropdown-toggle.header-action-with-text,
.header-actions .plan-badge-btn.header-action-with-text,
.header-actions .prism-sync-widget.header-action-with-text {
    width: auto !important;
    min-width: var(--header-control-height) !important;
    border-radius: 18px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px !important;
    white-space: nowrap;
}

.header-action-text {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1;
    text-transform: uppercase;
}
/* Pending Inbox count sits outside the button so the pill never clips against
   the button's rounded edge or header overflow. */
.inbox-header-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    padding-right: 8px;
}
.extensions-btn,
.inbox-header-btn { position: relative; overflow: visible !important; }
.inbox-count-badge {
    position: absolute;
    top: -6px;
    right: -1px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    border: 2px solid rgba(15, 23, 42, .9);
    color: #fff;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    pointer-events: none;
}
.feature-manager-root {
    display: grid;
    gap: 18px;
}

.feature-manager-section {
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 14px;
    background: rgba(15, 23, 42, .18);
    padding: 14px;
}

.feature-manager-section > h6 {
    margin: 0 0 10px;
    color: var(--text-primary, #f8fafc);
    font-weight: 750;
}

.feature-manager-list {
    display: grid;
    gap: 8px;
}

.feature-manager-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px;
    border-radius: 11px;
    background: rgba(148, 163, 184, .08);
}

.feature-manager-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #93c5fd;
    background: rgba(59, 130, 246, .14);
}

.feature-manager-title { font-weight: 700; }
.feature-manager-description { color: var(--text-secondary, #94a3b8); font-size: .82rem; line-height: 1.45; }
.feature-preserved-count { color: #fbbf24; font-size: .74rem; font-weight: 700; margin-top: 3px; }
.feature-manager-unavailable { color: #94a3b8; font-size: .74rem; margin-top: 3px; }
.feature-toggle { margin: 0; padding-left: 2.7rem; }

@media (max-width: 760px) {
    .feature-manager-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        padding: 9px;
    }
}
.inbox-sources-panel {
    width: 100%;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, .2);
}

.inbox-sources-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.inbox-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 12px;
}

.inbox-source-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    background: rgba(15, 23, 42, .22);
}

.inbox-source-card.is-unavailable {
    opacity: .62;
    filter: saturate(.7);
}

@media (max-width: 900px) {
    .inbox-source-grid { grid-template-columns: 1fr; }
}

/* Board notifications use the lower-right corner so they stay clear of the
   header controls. EnhancedBox ships top-right/bottom-center defaults, while
   this app-specific position keeps the notification wrapper predictable. */
.message-box.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: translateY(50px);
}
.message-box:not(.light-mode),
.message-box:not(.light-mode) .message-title,
.message-box:not(.light-mode) .message-text,
.message-box:not(.light-mode) .message-close {
    color: #fff !important;
}
.message-box.bottom-right.show {
    transform: translateY(0);
}
.message-box.bottom-right.hide {
    transform: translateY(50px);
}
.workspace-board-picker-initial {
    text-transform: uppercase;
    letter-spacing: .045em;
}

/* Keep board action outlines as quiet as the compact buttons on each card. */
#columnsContainer > .column button,
#columnsContainer > .column .btn {
    border-color: rgba(226, 232, 240, .38) !important;
}
#columnsContainer > .column button:hover,
#columnsContainer > .column .btn:hover {
    border-color: rgba(241, 245, 249, .72) !important;
}

/* Keep feature settings anchored to the top even when the surrounding modal
   has more vertical room than its current tab needs. */
.feature-manager-root {
    align-content: start;
}

#keyboardShortcutsModal .modal-dialog {
    max-width: 620px;
}

#keyboardShortcutsModal .keyboard-shortcuts-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    border-bottom-color: rgba(148, 163, 184, .2);
}

#keyboardShortcutsModal .keyboard-shortcuts-tabs .nav-link {
    width: auto !important;
    min-width: max-content;
    padding: 9px 13px;
    border-radius: 8px 8px 0 0;
    color: var(--text-secondary, #94a3b8);
}

#keyboardShortcutsModal .keyboard-shortcuts-tabs .nav-link.active {
    color: #fff;
    background: rgba(59, 130, 246, .18);
    border-color: rgba(96, 165, 250, .35);
}

#keyboardShortcutsModal .keyboard-shortcuts-tab-content {
    min-height: 310px;
    max-height: min(52vh, 430px);
    overflow-y: auto;
    padding: 16px 4px 8px;
}

#keyboardShortcutsModal .shortcut-item {
    gap: 24px;
    min-height: 46px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

#keyboardShortcutsModal .shortcut-item:last-child {
    border-bottom: 0;
}

#keyboardShortcutsModal .shortcut-group-note {
    margin-top: 14px;
    color: var(--text-secondary, #94a3b8);
    font-size: .8rem;
}

@media (max-width: 520px) {
    #keyboardShortcutsModal .keyboard-shortcuts-body {
        padding-inline: 12px;
    }

    #keyboardShortcutsModal .keyboard-shortcuts-tab-content {
        min-height: 280px;
    }
}
/* Shared translucent surfaces for top-bar popovers and Eva. */
.header-actions .filter-dropdown-menu,
#syncDevicePopover.sync-device-popover {
    background: rgba(32, 32, 32, .4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
                0 8px 32px rgba(0, 0, 0, .28),
                0 2px 8px rgba(0, 0, 0, .18);
    color: #fff;
}

#syncDevicePopover.sync-device-popover {
    isolation: isolate;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
                0 16px 42px rgba(0, 0, 0, .34),
                0 3px 10px rgba(0, 0, 0, .22);
}

.header-actions #filterDropdown,
.header-actions #filterDropdown:hover,
.header-actions #filterDropdown:focus,
.header-actions #filterDropdown:focus-visible,
.header-actions #filterDropdown:active,
.header-actions #filterDropdown.show,
.header-actions #filterDropdown[aria-expanded="true"] {
    color: #fff !important;
}

.header-actions #filterDropdown:hover,
.header-actions #filterDropdown:focus-visible,
.header-actions #filterDropdown:active,
.header-actions #filterDropdown.show,
.header-actions #filterDropdown[aria-expanded="true"] {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .34) !important;
}

.header-actions #filterDropdown .header-action-text {
    color: inherit !important;
}

#askEvaModal .eva-modal-content {
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(24, 24, 24, .96) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0 !important;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset,
                0 18px 55px rgba(0, 0, 0, .3);
    color: #fff;
}

#askEvaModal .eva-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#askEvaModal .eva-modal-close:hover,
#askEvaModal .eva-modal-close:focus-visible {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
    outline: none;
}

#askEvaModal .eva-modal-close:active {
    transform: scale(.96);
}
/* Inbox history and explicit close controls */
.interface-close-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.interface-close-button:hover,
.interface-close-button:focus-visible {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
    outline: 2px solid rgba(255, 255, 255, .28);
    outline-offset: 2px;
}
.interface-close-button:active { transform: scale(.96); }

.inbox-view-tabs {
    display: flex;
    gap: 4px;
    grid-column: 1 / -1;
    padding: 0 16px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.inbox-view-tab {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 14px;
    background: transparent;
    color: rgba(255, 255, 255, .68);
    font-size: .82rem;
    font-weight: 700;
}
.inbox-view-tab:hover,
.inbox-view-tab:focus-visible,
.inbox-view-tab.is-active {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    outline: none;
}
.inbox-history-panel {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 16px;
}
.inbox-history-header,
.inbox-history-toolbar,
.inbox-history-layout { display: flex; gap: 12px; }
.inbox-history-header { align-items: flex-start; justify-content: space-between; }
.inbox-history-summary { color: rgba(255, 255, 255, .58); font-size: .78rem; white-space: nowrap; }
.inbox-history-toolbar { margin: 14px 0; }
.inbox-history-toolbar input { flex: 1 1 auto; min-width: 0; }
.inbox-history-toolbar select { flex: 0 0 130px; }
.inbox-history-layout { min-height: 360px; }
.inbox-history-list { display: grid; align-content: start; gap: 6px; flex: 0 0 min(42%, 390px); max-height: 430px; overflow: auto; }
.inbox-history-item { display: grid; gap: 3px; width: 100%; padding: 10px; text-align: left; border: 1px solid transparent; border-radius: 9px; background: rgba(255, 255, 255, .04); color: inherit; }
.inbox-history-item:hover,
.inbox-history-item:focus-visible,
.inbox-history-item.active { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); outline: none; }
.inbox-history-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.inbox-history-item-meta,
.inbox-history-item time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .58); font-size: .72rem; }
.inbox-history-detail { flex: 1 1 auto; min-width: 0; padding: 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .035); }
.inbox-history-detail-status { display: inline-flex; padding: 3px 8px; margin-bottom: 10px; border-radius: 999px; background: rgba(34, 197, 94, .16); color: #bbf7d0; font-size: .72rem; text-transform: capitalize; }
.inbox-history-detail-status.status-failed { background: rgba(245, 158, 11, .16); color: #fde68a; }
.inbox-history-detail-status.status-discarded { background: rgba(239, 68, 68, .16); color: #fecaca; }
.inbox-history-facts { display: grid; gap: 8px; margin: 16px 0; }
.inbox-history-facts div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); padding-bottom: 6px; }
.inbox-history-facts dt { color: rgba(255, 255, 255, .55); font-size: .76rem; }
.inbox-history-facts dd { margin: 0; text-align: right; font-size: .78rem; }
.inbox-modal-body.is-history { display: grid; grid-template-columns: 1fr; }
.inbox-modal-body.is-history .inbox-view-tabs { grid-column: 1; }
@media (max-width: 680px) {
    .inbox-history-layout { display: grid; }
    .inbox-history-list { max-height: 230px; flex-basis: auto; }
    .inbox-history-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 120px; }
}

.inbox-onboarding {
    margin: 0 16px 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
}
.inbox-onboarding > summary {
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    list-style-position: inside;
}
.inbox-onboarding-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.inbox-onboarding-step {
    display: flex;
    gap: 8px;
    min-width: 0;
    padding: 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .16);
}
.inbox-onboarding-step > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    background: rgba(13, 110, 253, .75);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.inbox-onboarding-step strong { display: block; font-size: .78rem; }
.inbox-onboarding-step p { margin: 3px 0 0; color: rgba(255, 255, 255, .62); font-size: .72rem; line-height: 1.35; }
.inbox-onboarding-code { margin-top: 10px; }
.inbox-onboarding-code pre { margin: 0; padding: 8px 10px; overflow: auto; border-radius: 7px; background: rgba(0, 0, 0, .28); color: rgba(255, 255, 255, .78); font-size: .7rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
#askEvaModal .eva-onboarding { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: rgba(255, 255, 255, .045); }
#askEvaModal .eva-onboarding > summary { cursor: pointer; color: #fff; font-weight: 700; }
#askEvaModal .eva-onboarding-list { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; color: rgba(255, 255, 255, .72); font-size: .8rem; }
#askEvaModal .eva-onboarding-note { margin: 8px 0 0; color: rgba(255, 255, 255, .55); font-size: .75rem; }
@media (max-width: 780px) {
    .inbox-onboarding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .inbox-onboarding-grid { grid-template-columns: 1fr; }
}
/* Focused review hierarchy for the Inbox and compact Eva workspace. */
.inbox-modal-body {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 590px;
}
.inbox-queue-panel {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.inbox-preview-panel {
    grid-column: 2;
    grid-row: 1;
    border-right: 0;
}
.inbox-destination-panel {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 11px 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    border-right: 0;
    background: rgba(255,255,255,.035);
    overflow: visible;
}
.inbox-destination-heading {
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    font-size: .82rem;
}
.inbox-destination-panel .form-label {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: .7rem;
}
.inbox-destination-panel .form-select {
    flex: 1 1 180px;
    min-width: 130px;
    width: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}
.inbox-destination-panel .mt-3 {
    margin-top: 0 !important;
}
.inbox-suggestion-note {
    flex: 1 0 100%;
    margin: 0;
    font-size: .72rem;
}
.inbox-welcome-state {
    min-height: 330px;
    max-width: 430px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
}
.inbox-welcome-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(13,110,253,.16);
    color: #9bc8ff;
    font-size: 22px;
}
.inbox-welcome-state h5 {
    margin: 2px 0 0;
}
.inbox-welcome-state p {
    max-width: 360px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .84rem;
    line-height: 1.5;
}
.inbox-welcome-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.inbox-modal-body.is-history {
    display: block;
    min-height: 590px;
    overflow: auto;
}
.inbox-modal-body.is-history .inbox-history-panel {
    min-height: 100%;
    padding: 20px;
}
@media (max-width: 900px) {
    .inbox-modal-body {
        grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr);
    }
}
@media (max-width: 620px) {
    .inbox-modal-body {
        display: flex;
        flex-direction: column;
        overflow: auto;
    }
    .inbox-queue-panel,
    .inbox-preview-panel,
    .inbox-destination-panel {
        grid-column: auto;
        grid-row: auto;
    }
    .inbox-destination-panel {
        display: flex;
        align-items: center;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .inbox-destination-panel .form-select {
        flex-basis: 150px;
    }
    .inbox-welcome-state {
        min-height: 250px;
    }
}

/* Eva keeps history behind a single corner control instead of a competing tab. */
#askEvaModal .modal-dialog {
    max-width: min(1080px, calc(100vw - 28px));
}
#askEvaModal .eva-modal-content {
    position: relative;
    overflow: hidden;
}
#askEvaModal .eva-history-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    margin-right: 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
}
#askEvaModal .eva-history-toggle:hover,
#askEvaModal .eva-history-toggle:focus-visible,
#askEvaModal.eva-history-open .eva-history-toggle {
    background: rgba(13,110,253,.24);
    border-color: rgba(142,203,255,.58);
    color: #fff;
    outline: none;
}
#askEvaModal .eva-history-panel {
    position: absolute;
    top: 62px;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: min(330px, 86vw);
    padding: 16px;
    overflow: auto;
    border-left: 1px solid rgba(255,255,255,.14);
    background: rgba(18,20,22,.97);
    box-shadow: -14px 0 32px rgba(0,0,0,.28);
}
#askEvaModal .eva-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
#askEvaModal .eva-history-heading strong,
#askEvaModal .eva-history-heading span {
    display: block;
}
#askEvaModal .eva-history-heading span {
    margin-top: 3px;
    color: rgba(255,255,255,.52);
    font-size: .72rem;
}
#askEvaModal .eva-history-list {
    display: grid;
    gap: 7px;
}
#askEvaModal .eva-history-item {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 9px;
    background: rgba(255,255,255,.045);
    color: #fff;
}
#askEvaModal .eva-history-item:hover,
#askEvaModal .eva-history-item:focus-visible,
#askEvaModal .eva-history-item.active {
    border-color: rgba(142,203,255,.55);
    background: rgba(13,110,253,.18);
    outline: none;
}
#askEvaModal .eva-history-item span {
    color: rgba(255,255,255,.5);
    font-size: .7rem;
}
#askEvaModal .eva-history-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 30px 12px;
    text-align: center;
    color: rgba(255,255,255,.56);
}
#askEvaModal .eva-history-empty i {
    color: rgba(142,203,255,.76);
    font-size: 22px;
}
#askEvaModal .eva-history-empty p {
    margin: 0;
    color: #fff;
    font-weight: 700;
}
#askEvaModal .eva-history-empty span {
    font-size: .74rem;
    line-height: 1.45;
}
#askEvaModal .eva-starter-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
#askEvaModal .eva-starter-prompts .btn {
    border-radius: 999px;
}
@media (max-width: 620px) {
    #askEvaModal .modal-dialog {
        max-width: calc(100vw - 12px);
        margin: 6px auto;
    }
    #askEvaModal .eva-history-panel {
        top: 56px;
        width: min(320px, 92vw);
    }
}
/* Eva welcome workspace: first-use guidance, contextual starters, and anchored composer. */
#askEvaModal .eva-workspace-dialog {
    width: min(1120px, calc(100vw - 24px));
    max-width: none;
    height: min(780px, calc(100vh - 24px));
    margin: 12px auto;
}
#askEvaModal .eva-workspace {
    position: relative;
    height: 100%;
    min-height: 560px;
    overflow: hidden;
    border: 0 !important;
    border-radius: 16px;
    background: rgba(18, 20, 21, .96) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
#askEvaModal .eva-workspace::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .42;
    background:
        linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.025) 40% 41%, transparent 41%),
        radial-gradient(circle at center, rgba(255,255,255,.045), transparent 58%);
}
#askEvaModal .eva-workspace-header {
    position: relative;
    z-index: 5;
    min-height: 72px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(13,15,16,.9);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#askEvaModal .eva-brand,
#askEvaModal .eva-header-actions {
    display: flex;
    align-items: center;
}
#askEvaModal .eva-brand {
    gap: 12px;
    min-width: 0;
}
#askEvaModal .eva-brand-mark-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}
#askEvaModal .eva-brand-mark-wrap > .eva-presence-light {
    position: static;
    width: 32px;
    height: 32px;
}
#askEvaModal .eva-brand .modal-title {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 760;
}
#askEvaModal .eva-context-label {
    margin-top: 2px;
    color: rgba(255,255,255,.58);
    font-size: .76rem;
}
#askEvaModal .eva-header-actions {
    gap: 8px;
    margin-left: auto;
}
#askEvaModal .eva-provider-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px;
    background: rgba(0,0,0,.18);
    color: rgba(255,255,255,.82);
    font-size: .76rem;
    font-weight: 700;
}
#askEvaModal .eva-provider-status:hover,
#askEvaModal .eva-provider-status:focus-visible,
#askEvaModal .eva-provider-status.needs-attention {
    border-color: rgba(255,177,69,.58);
    background: rgba(255,153,20,.1);
    color: #fff;
    outline: none;
}
#askEvaModal .eva-provider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    box-shadow: 0 0 0 4px rgba(156,163,175,.1);
}
#askEvaModal .eva-provider-status.is-connected .eva-provider-dot {
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74,222,128,.12);
}
#askEvaModal .eva-workspace-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
#askEvaModal .eva-main {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    padding: 24px 34px 18px;
}
#askEvaModal .eva-welcome {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 860px;
    width: 100%;
    margin: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
#askEvaModal .eva-welcome-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
}
#askEvaModal .eva-welcome-orb > .eva-presence-light {
    width: 56px;
    height: 56px;
}
#askEvaModal .eva-welcome-kicker {
    color: #ffb145;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
#askEvaModal .eva-welcome h2 {
    max-width: 760px;
    margin: 9px 0 8px;
    color: #fff;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
    font-weight: 780;
    line-height: 1.12;
}
#askEvaModal .eva-welcome > p {
    max-width: 670px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .86rem;
    line-height: 1.5;
}
#askEvaModal .eva-starter-prompts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
    margin-top: 22px;
}
#askEvaModal .eva-starter-card {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 64px;
    padding: 11px 13px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(20,23,27,.62);
    color: #fff;
    backdrop-filter: blur(12px);
}
#askEvaModal .eva-starter-card > i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 9px;
    background: rgba(255,153,20,.11);
    color: #ffae3d;
}
#askEvaModal .eva-starter-card span,
#askEvaModal .eva-starter-card strong,
#askEvaModal .eva-starter-card small {
    display: block;
    min-width: 0;
}
#askEvaModal .eva-starter-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .79rem;
}
#askEvaModal .eva-starter-card small {
    margin-top: 3px;
    color: rgba(255,255,255,.48);
    font-size: .66rem;
    line-height: 1.25;
}
#askEvaModal .eva-starter-card:hover,
#askEvaModal .eva-starter-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255,174,61,.46);
    background: rgba(255,153,20,.09);
    outline: none;
}
#askEvaModal .eva-provider-onboarding {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    text-align: left;
    border: 1px solid rgba(255,174,61,.25);
    border-radius: 11px;
    background: rgba(255,153,20,.055);
}
#askEvaModal .eva-provider-onboarding > i {
    color: #ffb145;
    font-size: 17px;
}
#askEvaModal .eva-provider-onboarding strong,
#askEvaModal .eva-provider-onboarding span {
    display: block;
}
#askEvaModal .eva-provider-onboarding strong {
    font-size: .78rem;
}
#askEvaModal .eva-provider-onboarding span {
    margin-top: 2px;
    color: rgba(255,255,255,.52);
    font-size: .68rem;
    line-height: 1.35;
}
#askEvaModal .eva-conversation {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 4px 18px;
    overflow: auto;
}
#askEvaModal .eva-message-error {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid rgba(248, 113, 113, .38);
    border-left-width: 3px;
    border-radius: 9px;
    background: rgba(127, 29, 29, .2);
}
#askEvaModal .eva-message-error .eva-message-content {
    color: #fecaca;
    line-height: 1.45;
}
#askEvaModal .eva-status {
    min-height: 18px;
    padding: 0 4px 7px;
    color: rgba(255,255,255,.74);
    font-size: .74rem;
}
#askEvaModal .eva-status:empty {
    min-height: 0;
    padding: 0;
}
#askEvaModal .eva-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    padding: 9px 9px 9px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 13px;
    background: rgba(14,17,20,.8);
    box-shadow: 0 14px 38px rgba(0,0,0,.22);
}
#askEvaModal .eva-composer:focus-within {
    border-color: rgba(255,174,61,.54);
    box-shadow: 0 0 0 3px rgba(255,153,20,.08), 0 14px 38px rgba(0,0,0,.22);
}
#askEvaModal .eva-composer textarea {
    min-height: 38px;
    max-height: 140px;
    padding: 8px 0;
    resize: none;
    border: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
}
#askEvaModal .eva-composer textarea:focus {
    background: transparent;
    box-shadow: none;
}
#askEvaModal .eva-send-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 10px;
    background: #f59e0b;
    color: #111;
}
#askEvaModal .eva-send-button:hover,
#askEvaModal .eva-send-button:focus-visible {
    background: #ffb32b;
    transform: translateY(-1px);
    outline: none;
}
#askEvaModal .eva-send-button:disabled {
    opacity: .48;
    transform: none;
}
#askEvaModal .eva-cancel-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    cursor: pointer;
}
#askEvaModal .eva-cancel-button:hover,
#askEvaModal .eva-cancel-button:focus-visible {
    background: #ef4444;
    transform: translateY(-1px);
    outline: none;
}
#askEvaModal .eva-cancel-button:disabled {
    opacity: .48;
    transform: none;
}
#askEvaModal .eva-composer-meta {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 30px;
    padding: 7px 3px 0;
    color: rgba(255,255,255,.5);
    font-size: .67rem;
}
#askEvaModal .eva-save-control {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: rgba(255,255,255,.68);
    cursor: pointer;
}
#askEvaModal .eva-privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#askEvaModal .eva-clear-button {
    margin-left: auto;
    padding: 4px 7px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.58);
    font-size: .68rem;
}
#askEvaModal .eva-clear-button:hover,
#askEvaModal .eva-clear-button:focus-visible {
    color: #fff;
    outline: none;
}
#askEvaModal .eva-history-panel {
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,17,19,.98);
}
@media (max-width: 820px) {
    #askEvaModal .eva-workspace-dialog {
        width: calc(100vw - 12px);
        height: calc(100vh - 12px);
        margin: 6px auto;
    }
    #askEvaModal .eva-main {
        padding: 18px 18px 14px;
    }
    #askEvaModal .eva-starter-prompts {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    #askEvaModal .eva-provider-onboarding {
        grid-template-columns: auto minmax(0,1fr);
    }
    #askEvaModal .eva-provider-onboarding .btn {
        grid-column: 1 / -1;
        width: 100%;
    }
}
@media (max-width: 560px) {
    #askEvaModal .eva-provider-status span:not(.eva-provider-dot) {
        display: none;
    }
    #askEvaModal .eva-provider-status {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
    #askEvaModal .eva-starter-prompts {
        grid-template-columns: 1fr;
        max-height: 230px;
        overflow: auto;
    }
    #askEvaModal .eva-welcome {
        justify-content: flex-start;
        overflow: auto;
    }
    #askEvaModal .eva-welcome-orb {
        width: 48px;
        height: 48px;
        margin-top: 6px;
    }
    #askEvaModal .eva-welcome-orb > .eva-presence-light {
        width: 42px;
        height: 42px;
    }
    #askEvaModal .eva-welcome h2 {
        font-size: 1.45rem;
    }
    #askEvaModal .eva-composer-meta {
        flex-wrap: wrap;
    }
    #askEvaModal .eva-privacy-note {
        display: none;
    }
}

/* Keep the semantic Presence Light in the orb's corner so it does not compete
 * with the decorative mark, and make keyboard focus legible across Eva's
 * dark glass surface. */
#askEvaModal .eva-workspace button:focus-visible,
#askEvaModal .eva-workspace input:focus-visible,
#askEvaModal .eva-workspace textarea:focus-visible,
#askEvaModal .eva-workspace select:focus-visible {
    outline: 2px solid #ffd38a !important;
    outline-offset: 2px;
}

@media (max-width: 720px) {
    #askEvaModal .eva-main {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    #askEvaModal .eva-composer {
        align-items: stretch;
    }
    #askEvaModal .eva-composer textarea {
        min-width: 0;
    }
}
/* Inbox first-use walkthrough and focused Sources overlay. */
.inbox-modal-content {
    position: relative;
    overflow: hidden;
}
.inbox-onboarding-welcome {
    width: 100%;
    max-width: 780px;
    min-height: 430px;
    padding: 34px 24px;
}
.inbox-welcome-kicker {
    color: #8ecbff;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.inbox-onboarding-welcome h3 {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 760;
}
.inbox-onboarding-welcome > p {
    max-width: 650px;
    font-size: .83rem;
}
.inbox-source-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    width: 100%;
    margin: 14px 0 4px;
}
.inbox-source-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 72px;
    padding: 11px 12px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    background: rgba(255,255,255,.045);
    color: #fff;
}
.inbox-source-choice > i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(77,171,247,.13);
    color: #8ecbff;
}
.inbox-source-choice span,
.inbox-source-choice strong,
.inbox-source-choice small {
    display: block;
    min-width: 0;
}
.inbox-source-choice strong {
    font-size: .78rem;
}
.inbox-source-choice small {
    margin-top: 3px;
    color: rgba(255,255,255,.5);
    font-size: .66rem;
    line-height: 1.3;
}
.inbox-source-choice:hover,
.inbox-source-choice:focus-visible {
    border-color: rgba(142,203,255,.5);
    background: rgba(77,171,247,.1);
    transform: translateY(-1px);
    outline: none;
}
.inbox-welcome-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 8px 0 10px;
}
.inbox-welcome-flow > span {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 7px;
    align-items: center;
    text-align: left;
}
.inbox-welcome-flow b {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(13,110,253,.72);
    color: #fff;
    font-size: .69rem;
}
.inbox-welcome-flow strong {
    font-size: .74rem;
}
.inbox-welcome-flow small {
    color: rgba(255,255,255,.46);
    font-size: .63rem;
}
.inbox-welcome-flow > i {
    color: rgba(255,255,255,.25);
    font-size: .7rem;
}
.inbox-sources-panel {
    position: absolute;
    inset: 72px 0 66px;
    z-index: 8;
    width: auto;
    margin: 0;
    padding: 18px;
    overflow: auto;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(17,19,21,.985);
    backdrop-filter: blur(20px);
}
.inbox-sources-panel .inbox-sources-heading {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -18px -18px 14px;
    padding: 14px 18px;
    background: rgba(17,19,21,.96);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.inbox-sources-panel .inbox-onboarding {
    margin: 0 0 14px;
}
@media (max-width: 760px) {
    .inbox-source-choice-grid {
        grid-template-columns: 1fr;
    }
    .inbox-welcome-flow {
        gap: 7px;
    }
    .inbox-welcome-flow > i {
        display: none;
    }
    .inbox-onboarding-welcome {
        min-height: 360px;
        padding: 22px 14px;
    }
}
@media (max-width: 520px) {
    .inbox-welcome-flow {
        align-items: stretch;
        flex-direction: column;
    }
    .inbox-sources-panel {
        inset: 64px 0 72px;
        padding: 14px;
    }
}
/* AwesomePicker 3.2: keep every subtask row on one line. */
.subitem-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 38px; align-items: center; gap: 6px; width: 100%; min-width: 0; margin-bottom: .5rem; }
.subitem-row .subitem-check { display: flex; align-items: center; justify-content: center; min-width: 0; }
.subitem-row .aip3-binding { min-width: 0; width: 100%; grid-column: 2; }
.subitem-row .subitem-remove { grid-column: 3; width: 38px; min-width: 38px; padding-inline: 0; }
.subitem-row .subitem-input { min-width: 0; }
@media (max-width: 575.98px) { .subitem-row { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 4px; } .subitem-row .subitem-remove { width: 34px; min-width: 34px; } }

/* Guided feature onboarding */
.boardeva-feature-onboarding {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    /* The tour is the only visible surface while it is open. Do not add a
       second dimming/blur layer over the feature modal beneath it. */
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.boardeva-feature-onboarding.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.boardeva-feature-onboarding-host--active {
    background: transparent !important;
}
#askEvaModal .eva-workspace.boardeva-feature-onboarding-host--active,
#automationInboxModal .inbox-modal-content.boardeva-feature-onboarding-host--active {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
#askEvaModal .eva-workspace.boardeva-feature-onboarding-host--active::before {
    display: none;
}
.boardeva-feature-onboarding-host--active > :not(.boardeva-feature-onboarding) {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* Bootstrap's modal backdrop belongs to the parent feature modal. During a
   guided start it would become a second dimming layer behind the tour, so
   suppress only that temporary backdrop and restore it when the tour closes. */
body.boardeva-feature-onboarding-backdrop-hidden .modal-backdrop {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.boardeva-tour-dialog {
    width: min(650px, 100%);
    max-height: min(700px, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 18px;
    background: rgba(20, 23, 27, .97);
    box-shadow: 0 28px 90px rgba(0,0,0,.52);
    color: #fff;
}
.boardeva-tour-header { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.boardeva-tour-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.boardeva-tour-brand > div { display:grid; gap:2px; min-width:0; }
.boardeva-tour-brand strong { font-size:.92rem; }
.boardeva-tour-brand span:not(.boardeva-tour-mark) { color:rgba(255,255,255,.55); font-size:.7rem; }
.boardeva-tour-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:rgba(255,166,56,.14); color:#ffb347; }
.boardeva-tour-close { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(255,255,255,.06); color:#fff; }
.boardeva-tour-close:hover,.boardeva-tour-close:focus-visible { background:rgba(255,255,255,.16); outline:none; }
.boardeva-tour-progress { display:flex; gap:5px; padding:12px 20px 0; }
.boardeva-tour-progress span { height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.14); }
.boardeva-tour-progress span.is-active,.boardeva-tour-progress span.is-done { background:#f59e0b; }
.boardeva-tour-content { min-height:330px; padding:28px 32px 20px; overflow:auto; }
.boardeva-tour-eyebrow { color:#ffb347; font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.boardeva-tour-content h2 { margin:9px 0 8px; font-size:clamp(1.45rem,3vw,2.1rem); line-height:1.12; }
.boardeva-tour-content > p { max-width:560px; margin:0; color:rgba(255,255,255,.63); line-height:1.5; }
.boardeva-tour-step-body { margin-top:22px; }
.boardeva-tour-footer { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid rgba(255,255,255,.1); }
.boardeva-tour-footer .boardeva-tour-skip { margin-left:auto; border:0; background:transparent; color:rgba(255,255,255,.56); font-size:.75rem; }
.boardeva-tour-footer .boardeva-tour-skip:hover,.boardeva-tour-footer .boardeva-tour-skip:focus-visible { color:#fff; outline:none; }
.boardeva-tour-option-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.boardeva-tour-option { display:flex; flex-direction:column; gap:7px; min-height:112px; padding:13px; text-align:left; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(255,255,255,.045); color:#fff; }
.boardeva-tour-option:hover,.boardeva-tour-option:focus-visible,.boardeva-tour-option.is-selected { border-color:rgba(255,179,71,.62); background:rgba(255,159,38,.1); outline:none; }
.boardeva-tour-option i { color:#ffb347; font-size:1rem; }
.boardeva-tour-option strong { font-size:.78rem; }
.boardeva-tour-option small { color:rgba(255,255,255,.54); line-height:1.35; }
.boardeva-tour-benefits { display:grid; gap:8px; }
.boardeva-tour-benefit { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.045); }
.boardeva-tour-benefit i { margin-top:2px; color:#8ecbff; }
.boardeva-tour-benefit strong,.boardeva-tour-benefit span { display:block; }
.boardeva-tour-benefit strong { font-size:.78rem; }
.boardeva-tour-benefit span { margin-top:2px; color:rgba(255,255,255,.56); font-size:.7rem; line-height:1.35; }
.boardeva-tour-provider-list { display:grid; gap:7px; }
.boardeva-tour-provider { overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.04); }
.boardeva-tour-provider > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; cursor:pointer; list-style:none; font-size:.78rem; font-weight:700; }
.boardeva-tour-provider > summary::-webkit-details-marker { display:none; }
.boardeva-tour-provider > summary i { color:#ffb347; }
.boardeva-tour-provider[open] > summary { border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,159,38,.08); }
.boardeva-tour-provider-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px 12px 12px; }
.boardeva-tour-provider-fields .full { grid-column:1/-1; }
.boardeva-tour-provider-fields label { color:rgba(255,255,255,.6); font-size:.68rem; }
.boardeva-tour-provider-fields input { width:100%; margin-top:4px; padding:7px 9px; border:1px solid rgba(255,255,255,.15); border-radius:7px; background:rgba(0,0,0,.18); color:#fff; }
.boardeva-tour-provider-fields input:focus { border-color:#ffb347; outline:2px solid rgba(255,179,71,.14); }
.boardeva-tour-summary { display:grid; gap:8px; padding:13px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:rgba(255,255,255,.045); }
.boardeva-tour-summary-row { display:flex; justify-content:space-between; gap:12px; font-size:.76rem; }
.boardeva-tour-summary-row span { color:rgba(255,255,255,.55); }
.boardeva-tour-status { min-height:18px; margin-top:8px; color:#8ecbff; font-size:.7rem; }

/* Eva conversation sidebar */
#askEvaModal .eva-history-sidebar { flex:0 0 286px; min-width:0; display:flex; flex-direction:column; border-right:0 !important; background:rgba(9,11,13,.92); -webkit-backdrop-filter:blur(24px) brightness(.35) saturate(.65); backdrop-filter:blur(24px) brightness(.35) saturate(.65); transition:flex-basis .18s ease; }
#askEvaModal .eva-history-sidebar.is-collapsed { flex-basis:54px; }
#askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-copy,
#askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-list,
#askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-new span { display:none; }
#askEvaModal .eva-history-sidebar-header { display:flex; align-items:center; gap:8px; padding:15px 13px 10px; }
#askEvaModal .eva-history-sidebar-header strong { font-size:.78rem; }
#askEvaModal .eva-history-sidebar-copy { margin:0 13px 12px; color:rgba(255,255,255,.48); font-size:.68rem; line-height:1.35; }
#askEvaModal .eva-history-sidebar-new { display:flex; align-items:center; justify-content:center; gap:6px; margin:0 12px 12px; padding:8px 9px; border:1px solid rgba(255,255,255,.13); border-radius:8px; background:rgba(255,255,255,.05); color:#fff; font-size:.72rem; }
#askEvaModal .eva-history-sidebar-new:hover,#askEvaModal .eva-history-sidebar-new:focus-visible { border-color:rgba(255,174,61,.5); outline:none; }
#askEvaModal .eva-history-sidebar-list { display:grid; gap:5px; padding:0 10px 14px; overflow:auto; }
#askEvaModal .eva-history-sidebar-item { display:grid; gap:3px; width:100%; padding:9px 10px; text-align:left; border:1px solid transparent; border-radius:8px; background:transparent; color:#fff; }
#askEvaModal .eva-history-sidebar-item:hover,#askEvaModal .eva-history-sidebar-item:focus-visible,#askEvaModal .eva-history-sidebar-item.active { border-color:rgba(142,203,255,.38); background:rgba(13,110,253,.13); outline:none; }
#askEvaModal .eva-history-sidebar-item strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; }
#askEvaModal .eva-history-sidebar-item span { color:rgba(255,255,255,.48); font-size:.65rem; }
#askEvaModal .eva-history-sidebar-empty { margin:0 13px; color:rgba(255,255,255,.5); font-size:.7rem; line-height:1.45; }
#askEvaModal .eva-history-sidebar-collapse { margin-left:auto; display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:7px; background:transparent; color:rgba(255,255,255,.6); }
#askEvaModal .eva-history-sidebar-collapse:hover,#askEvaModal .eva-history-sidebar-collapse:focus-visible { background:rgba(255,255,255,.1); color:#fff; outline:none; }
@media (max-width:820px) {
    #askEvaModal .eva-history-sidebar { position:absolute; inset:0 auto 0 0; z-index:12; width:min(286px,86vw); transform:translateX(-102%); box-shadow:16px 0 40px rgba(0,0,0,.32); }
    #askEvaModal .eva-history-sidebar.is-mobile-open { transform:translateX(0); }
    #askEvaModal .eva-history-sidebar.is-collapsed { flex-basis:auto; width:min(286px,86vw); }
    #askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-copy,
    #askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-list,
    #askEvaModal .eva-history-sidebar.is-collapsed .eva-history-sidebar-new span { display:block; }
    #askEvaModal .eva-history-sidebar-toggle { display:inline-flex !important; }
}
#askEvaModal .eva-history-sidebar-toggle { display:none; }

/* Minimal Inbox idle state */
.inbox-minimal-empty { display:grid; justify-items:center; gap:9px; min-height:250px; padding:50px 20px; text-align:center; }
.inbox-minimal-empty i { color:rgba(142,203,255,.68); font-size:2rem; }
.inbox-minimal-empty h3 { margin:0; font-size:1.05rem; }
.inbox-minimal-empty p { max-width:360px; margin:0; color:rgba(255,255,255,.52); font-size:.76rem; }
.inbox-source-status-row { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.inbox-source-status { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; color:rgba(255,255,255,.6); font-size:.65rem; }
.inbox-source-status.is-ready { border-color:rgba(74,222,128,.28); color:#bbf7d0; }
.inbox-source-status.is-unavailable { color:rgba(255,255,255,.36); }.boardeva-tour-callout,.boardeva-tour-setup { display:flex; align-items:flex-start; gap:10px; padding:13px; border:1px solid rgba(255,179,71,.26); border-radius:11px; background:rgba(255,159,38,.08); color:rgba(255,255,255,.8); font-size:.76rem; line-height:1.45; }
.boardeva-tour-callout i,.boardeva-tour-setup>i { color:#ffb347; margin-top:2px; }
.boardeva-tour-setup { display:grid; grid-template-columns:24px minmax(0,1fr); }
.boardeva-tour-setup h4,.boardeva-tour-setup p { grid-column:2; margin:0; }
.boardeva-tour-setup p { color:rgba(255,255,255,.58); }
.boardeva-tour-setup button,.boardeva-tour-setup .boardeva-tour-actions { grid-column:2; }
.boardeva-tour-setup.is-unavailable { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); }
.boardeva-tour-form { display:grid; gap:9px; padding:11px 13px 13px; }
.boardeva-tour-form label { display:grid; gap:4px; color:rgba(255,255,255,.62); font-size:.68rem; }
.boardeva-tour-form input { min-width:0; padding:7px 9px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(0,0,0,.22); color:#fff; }
.boardeva-tour-actions { display:flex; flex-wrap:wrap; gap:7px; }
.boardeva-tour-summary>div { display:flex; align-items:center; gap:8px; }
.boardeva-tour-summary>div i { width:20px; color:#ffb347; }
.boardeva-tour-summary>div span { color:rgba(255,255,255,.55); min-width:55px; }
.boardeva-tour-summary>div strong { margin-left:auto; }
.boardeva-tour-checkbox { display:flex; align-items:flex-start; gap:8px; margin-top:12px; color:rgba(255,255,255,.8); font-size:.72rem; }
.boardeva-tour-checkbox input { margin-top:2px; accent-color:#f59e0b; }
.boardeva-tour-checkbox span { display:grid; gap:3px; }
.boardeva-tour-checkbox small { color:rgba(255,255,255,.5); line-height:1.35; }
.boardeva-tour-global-status:empty { display:none; }
.boardeva-tour-global-status { margin:0 32px 8px; color:#8ecbff; font-size:.7rem; }
.boardeva-tour-global-status[data-tone="error"] { color:#fca5a5; }
.inbox-source-status-list { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; width:min(100%,640px); }
.inbox-source-status { display:grid; grid-template-columns:auto minmax(0,auto); column-gap:6px; align-items:center; padding:7px 10px; border:1px solid rgba(255,255,255,.13); border-radius:9px; background:rgba(255,255,255,.035); text-align:left; }
.inbox-source-status i { grid-row:span 2; color:rgba(255,255,255,.38); }
.inbox-source-status.is-connected { border-color:rgba(74,222,128,.38); }
.inbox-source-status.is-connected i { color:#86efac; }
.inbox-source-status strong { font-size:.7rem; }
.inbox-source-status small { color:rgba(255,255,255,.5); font-size:.62rem; }
.inbox-minimal-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:5px; }
@media (max-width:767px) { .boardeva-tour-option-grid { grid-template-columns:1fr; } .boardeva-tour-content { min-height:0; padding:22px 18px 16px; } .boardeva-tour-global-status { margin-left:18px; margin-right:18px; } }

/* Card editor controls stay legible and long descriptions remain contained. */
#cardModal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .86;
}

#cardModal input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .9;
}

#cardModal #openAdvancedMarkdownEditorBtn,
#cardModal #expandCardDescriptionBtn {
    color: #f4f4f5;
    border-color: #71717a;
}

#cardModal #openAdvancedMarkdownEditorBtn:hover,
#cardModal #expandCardDescriptionBtn:hover,
#cardModal #expandCardDescriptionBtn[aria-pressed="true"] {
    color: #18181b;
    background: #f4f4f5;
    border-color: #f4f4f5;
}

#cardDescription {
    min-height: 150px;
    max-height: min(42vh, 520px);
    overflow-y: auto;
}

#cardModal.description-expanded .modal-dialog {
    width: calc(100vw - 16px);
    max-width: none;
    height: calc(100vh - 16px);
    margin: 8px auto;
}

#cardModal.description-expanded .modal-content {
    height: 100%;
    overflow: hidden;
}

#cardModal.description-expanded .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#cardModal.description-expanded .modal-body > :not(#cardEditorPanels) {
    display: none !important;
}

#cardModal.description-expanded #cardEditorPanels {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
}

#cardModal.description-expanded #cardEditorPrimary > :not(#sectionDescription),
#cardModal.description-expanded #cardEditorSecondary {
    display: none !important;
}

#cardModal.description-expanded #cardEditorPrimary {
    display: flex !important;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#cardModal.description-expanded #sectionDescription {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0 !important;
}

#cardModal.description-expanded #cardDescription {
    flex: 1 1 auto;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    max-height: none;
    resize: none;
}

/* mdReader is a flush embedded surface; shared modal chrome must not frame it. */
#mdReaderModal .modal-dialog {
    margin: 12px auto !important;
    height: calc(100vh - 24px) !important;
}

#mdReaderModal .modal-content {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background: #181818 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#mdReaderModal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    position: relative;
    z-index: 1;
}

/* Reader actions use the same compact icon-button rhythm as mdReader's
   sidebar tabs. When that sidebar is open on a narrow screen, keep the edit
   and close controls behind it so the sidebar remains the active surface. */
#mdReaderModal .mdreader-overlay-actions,
#mdReaderModal .mdreader-overlay-secondary-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

#mdReaderModal .mdreader-overlay-actions {
    right: 96px;
}

#mdReaderModal .mdreader-overlay-secondary-actions {
    right: 12px;
}

#mdReaderModal .mdreader-overlay-actions .btn,
#mdReaderModal .mdreader-overlay-secondary-actions .btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 6px !important;
    background-color: rgba(255, 255, 255, .035) !important;
    box-shadow: none !important;
}

#mdReaderModal .mdreader-overlay-actions .btn:hover,
#mdReaderModal .mdreader-overlay-actions .btn:focus-visible,
#mdReaderModal .mdreader-overlay-secondary-actions .btn:hover,
#mdReaderModal .mdreader-overlay-secondary-actions .btn:focus-visible {
    border-color: rgba(255, 255, 255, .3) !important;
    background-color: rgba(255, 255, 255, .09) !important;
}

#mdReaderModal .mdreader-overlay-actions .btn:focus-visible,
#mdReaderModal .mdreader-overlay-secondary-actions .btn:focus-visible {
    outline: 2px solid rgba(134, 183, 254, .92) !important;
    outline-offset: 2px;
}

/* Desktop keeps edit/close above the Reader at all times. On mobile only,
   yield those controls while the left sidebar occupies the viewport. */
@media (max-width: 768px) {
    #mdReaderModal.mdreader-sidebar-open .mdreader-overlay-secondary-actions {
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
    }
}

/* Match the mdReader sidebar's consistent square icon cells in Boardeva's
   settings navigation. */
#settingsModal .settings-sidebar .nav-link {
    min-height: 42px;
    padding: 8px 12px;
    gap: 8px;
}

#settingsModal .settings-sidebar .nav-link i {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0 !important;
}

/* Keep the embedded mdEditor aligned with Boardeva's rounded modal surfaces. */
#mdEditorModal .modal-dialog {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    height: calc(100vh - 24px) !important;
    margin: 12px auto !important;
}

#mdEditorModal .modal-content {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

#mdEditorModal .modal-body,
#mdEditorFrame {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
}

/* Boardeva split workspace and docked Eva surface. */
.boardeva-workspace-layout {
    display: flex;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.boardeva-main-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.boardeva-main-pane > .kanban-container {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.eva-dock-pane {
    position: relative;
    z-index: 1040;
    flex: 0 0 clamp(360px, 34vw, 520px);
    width: clamp(360px, 34vw, 520px);
    min-width: 360px;
    max-width: calc(100% - 360px);
    height: 100%;
    overflow: hidden;
    border-left: 0;
    background: rgba(12,14,16,.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

#evaDockPane #askEvaModal {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    display: block !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: transparent !important;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#evaDockPane #askEvaModal .modal-dialog,
#evaDockPane #askEvaModal .eva-workspace-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    transform: none !important;
}

#evaDockPane #askEvaModal .modal-content,
#evaDockPane #askEvaModal .eva-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
}

#evaDockPane #askEvaModal .eva-workspace-header {
    min-height: 62px;
    padding: 11px 13px;
}

#evaDockPane #askEvaModal .eva-brand {
    gap: 9px;
}

#evaDockPane #askEvaModal .eva-brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

#evaDockPane #askEvaModal .eva-brand .modal-title {
    font-size: 1rem;
}

#evaDockPane #askEvaModal .eva-context-label {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#evaDockPane #askEvaModal .eva-getting-started,
#evaDockPane #askEvaModal .eva-provider-status {
    width: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
}

#evaDockPane #askEvaModal .eva-getting-started span,
#evaDockPane #askEvaModal .eva-provider-status span:not(.eva-provider-dot) {
    display: none;
}

#evaDockPane #askEvaModal .eva-history-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 12;
    width: min(286px, 86vw);
    transform: translateX(-102%);
    box-shadow: 16px 0 40px rgba(0,0,0,.32);
    transition: transform .18s ease;
}

#evaDockPane #askEvaModal .eva-history-sidebar.is-mobile-open {
    transform: translateX(0);
}

#evaDockPane #askEvaModal .eva-history-sidebar-toggle {
    display: inline-flex !important;
}

#evaDockPane #askEvaModal .eva-main {
    padding: 18px 16px 14px;
}

#evaDockPane #askEvaModal .eva-starter-prompts {
    grid-template-columns: 1fr;
}

#evaDockPane #askEvaModal .eva-composer-meta {
    flex-wrap: wrap;
    gap: 8px;
}

#evaDockPane #askEvaModal .eva-privacy-note {
    display: none;
}

#askEvaModal .eva-dock-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#askEvaModal .eva-dock-toggle:hover,
#askEvaModal .eva-dock-toggle:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
    outline: none;
}

#askEvaModal .eva-dock-toggle:active {
    transform: scale(.96);
}

#automationInboxModal .inbox-dock-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

#automationInboxModal .inbox-dock-toggle:hover,
#automationInboxModal .inbox-dock-toggle:focus-visible {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.3);
    outline: none;
}

#automationInboxModal .inbox-dock-toggle:active {
    transform: scale(.96);
}

@media (max-width: 979px) {
    .eva-dock-pane {
        display: none !important;
    }

    #askEvaModal .eva-dock-toggle {
        display: none;
    }

    #automationInboxModal .inbox-dock-toggle {
        display: none;
    }
}
/* EVA dock resize and cross-pane menu layering. */
.boardeva-main-pane {
    position: relative;
    z-index: 1050;
}

.boardeva-main-pane .slideshow-container {
    pointer-events: none;
}

.eva-dock-pane {
    --eva-dock-width: clamp(360px, 34vw, 520px);
    flex-basis: var(--eva-dock-width);
    width: var(--eva-dock-width);
    min-width: 320px;
    max-width: min(50vw, calc(100% - 360px));
    background: rgba(12, 14, 16, .9);
}

#evaDockPane #askEvaModal .eva-workspace {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Inbox uses the same single right-side host as Eva. The host keeps Eva's
   existing background; Inbox remains transparent so it does not add a second
   opaque dark block over that surface. */
#evaDockPane #automationInboxModal {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    height: 100%;
    padding: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

#evaDockPane #automationInboxModal .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    transform: none !important;
}

#evaDockPane #automationInboxModal .inbox-modal-content {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#evaDockPane #automationInboxModal .modal-header {
    min-height: 62px;
    padding: 11px 13px;
}

#evaDockPane #automationInboxModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
}

#evaDockPane #automationInboxModal .inbox-modal-footer {
    flex: 0 0 auto;
}

#evaDockPane #automationInboxModal .inbox-dock-toggle {
    display: inline-flex;
}

@media (max-width: 979px) {
    #automationInboxModal .inbox-dock-toggle {
        display: none !important;
    }
}

.eva-dock-resize-handle {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 20;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    background: transparent;
}

.eva-dock-resize-handle::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 4px;
    width: 2px;
    background: rgba(255, 255, 255, .2);
    opacity: .35;
    transition: width .14s ease, opacity .14s ease, background .14s ease;
}

.eva-dock-resize-handle:hover::before,
.eva-dock-resize-handle:focus-visible::before,
body.eva-dock-resizing .eva-dock-resize-handle::before {
    width: 4px;
    background: rgba(255, 177, 69, .86);
    opacity: 1;
}

.eva-dock-resize-handle:focus-visible {
    outline: 2px solid rgba(255, 177, 69, .8);
    outline-offset: -2px;
}

body.eva-dock-resizing,
body.eva-dock-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Header actions live in the left pane, so their menus can escape over Eva. */
.boardeva-main-pane .app-header,
.boardeva-main-pane .header-actions {
    position: relative;
    z-index: 2100;
}

.boardeva-main-pane .header-actions .dropdown-menu,
.boardeva-main-pane .header-actions .dropdown-menu.show,
.boardeva-main-pane .header-actions .filter-dropdown-menu,
.boardeva-main-pane .workspace-board-picker-menu {
    z-index: 3000 !important;
}

.glass-morph-context-menu,
.glass-morph-submenu,
.dropdown-menu.show {
    z-index: 4000 !important;
}

@media (max-width: 979px) {
    .eva-dock-resize-handle {
        display: none;
    }
}

/* Mobile columns use deliberate one-step paging instead of a free horizontal track. */
.mobile-column-pager {
    display: none;
}

@media (max-width: 768px) {
    .kanban-board {
        padding-inline: 0;
        overflow-x: hidden;
    }

    .mobile-column-pager {
        position: sticky;
        top: 0;
        z-index: 30;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
        align-items: center;
        gap: 10px;
        margin: 0 20px 12px;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 12px;
        background: rgba(105, 111, 134, .38);
        background: color-mix(in srgb, var(--accent-color) 28%, transparent);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition: background .2s ease, box-shadow .2s ease;
    }

    .mobile-column-pager.is-scrolled {
        background: rgba(12, 14, 18, .88);
        background: color-mix(in srgb, var(--accent-color) 12%, rgba(12, 14, 18, .9));
        box-shadow: 0 12px 28px rgba(0, 0, 0, .32);
    }

    .mobile-column-pager[hidden] {
        display: none;
    }

    .mobile-column-pager-button {
        width: 42px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 9px;
        background: rgba(255, 255, 255, .09);
        color: #fff;
    }

    .mobile-column-pager-button:focus-visible {
        outline: 2px solid rgba(255, 177, 69, .9);
        outline-offset: 2px;
    }

    .mobile-column-pager-button:disabled {
        opacity: .32;
    }

    .mobile-column-pager-menu {
        min-width: min(280px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: min(62vh, 520px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .mobile-column-pager-menu .glass-morph-context-menu-item {
        min-height: 42px;
    }

    .mobile-column-pager-menu .mobile-column-menu-item-current {
        background: color-mix(in srgb, var(--accent-color) 36%, rgba(255, 255, 255, .06));
    }

    .mobile-column-pager-status {
        min-width: 0;
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        color: #fff;
    }

    .mobile-column-pager-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .mobile-column-pager-position {
        flex: 0 0 auto;
        color: rgba(255, 255, 255, .62);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }

    .columns-container.mobile-column-pager-enabled {
        box-sizing: border-box;
        width: 100%;
        min-height: calc(100vh - 170px);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        padding: 0 20px 18px;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        touch-action: pan-y;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .columns-container.mobile-column-pager-enabled::-webkit-scrollbar {
        display: none;
    }

    .columns-container.mobile-column-pager-enabled > .column {
        box-sizing: border-box;
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-right: 0;
        align-self: flex-start;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .columns-container.mobile-column-pager-enabled > .column-buttons {
        display: none;
    }

    /* The header's flex gap is the single source of spacing on mobile. Do not
       add a second margin before Filter after the workspace picker. */
    .header-actions .filter-header-action {
        margin-left: 0 !important;
    }

    /* Give touch controls a little more room without changing desktop density. */
    .columns-container.mobile-column-pager-enabled .column-header .btn,
    .columns-container.mobile-column-pager-enabled .column-icon,
    .columns-container.mobile-column-pager-enabled .card-actions > .btn,
    .columns-container.mobile-column-pager-enabled .card-actions-header .btn,
    .columns-container.mobile-column-pager-enabled .card-timer > button {
        min-width: 38px;
        min-height: 38px;
        padding: 8px 10px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .columns-container.mobile-column-pager-enabled .column-icon {
        border-radius: 8px;
        cursor: pointer;
    }

    .columns-container.mobile-column-pager-enabled .card-actions,
    .columns-container.mobile-column-pager-enabled .column-actions {
        gap: 7px;
    }

    .columns-container.mobile-column-pager-enabled .card-timer > button {
        height: 30px !important;
        min-height: 30px;
        line-height: 1;
    }
}

/* Final cascade overrides for the split header, timer, and sync feedback. */
.app-header.split-header {
    padding: 12px;
    gap: 10px;
    box-sizing: border-box;
}

.app-header.split-header .header-actions,
.app-header.split-header .board-tabs {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
}

.app-header.split-header .header-actions {
    min-height: 42px;
    height: auto;
    padding: 0 12px;
}

.app-header.split-header .board-tabs {
    min-height: 42px;
    padding: 0 12px;
}

.header-actions .workspace-board-picker-btn {
    gap: 9px;
    min-width: 132px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.card-timer {
    margin-left: auto !important;
}

.subitem.completed .subitem-text,
.subitem.completed .subitem-icon {
    color: var(--text-secondary) !important;
}

.subitem.completed-strikethrough .subitem-text {
    text-decoration: line-through;
}

.subitems-show-all {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 3px 9px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.subitems-show-all:hover,
.subitems-show-all:focus-visible {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.header-actions .prism-sync-widget[data-sync-status="syncing"],
.header-actions .sync-widget[data-sync-status="syncing"] {
    animation: boardeva-sync-pulse 1.5s ease-in-out infinite !important;
}

.header-actions .prism-sync-widget[data-sync-status="syncing"] .sync-header-icon,
.header-actions .sync-widget[data-sync-status="syncing"] .sync-header-icon {
    animation: boardeva-sync-spin 1.1s linear infinite !important;
}

@keyframes boardeva-sync-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.05); opacity: 0.86; }
    50% { box-shadow: 0 0 0 4px rgba(255, 193, 7, 0.18); opacity: 1; }
}

@keyframes boardeva-sync-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 520px) {
    .app-header.split-header {
        padding: 8px;
        gap: 8px;
    }

    .app-header.split-header .header-actions,
    .app-header.split-header .board-tabs {
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-actions .workspace-board-picker-btn {
        min-width: var(--header-control-height);
        padding-left: 0;
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-actions .prism-sync-widget[data-sync-status="syncing"],
    .header-actions .sync-widget[data-sync-status="syncing"],
    .header-actions .prism-sync-widget[data-sync-status="syncing"] .sync-header-icon,
    .header-actions .sync-widget[data-sync-status="syncing"] .sync-header-icon {
        animation: none !important;
    }
}

/* Keep desktop columns readable instead of stretching one column across the
   entire board. The setting controls the maximum width of each expanded
   column; additional columns remain available through horizontal scrolling. */
@media (min-width: 769px) {
    #columnsContainer {
        overflow-x: auto;
        overflow-y: hidden;
        box-sizing: border-box;
        padding: 8px 8px 12px 4px;
    }

    #columnsContainer > .column:not(.collapsed) {
        box-sizing: border-box;
        flex: 0 0 var(--column-resize-width, min(var(--column-max-width, 33%), 100%));
        width: var(--column-resize-width, min(var(--column-max-width, 33%), 100%));
        max-width: var(--column-resize-width, min(var(--column-max-width, 33%), 100%));
        min-width: 0;
    }

    #columnsContainer > .column.expanded > .column-resize-handle {
        display: block;
        position: absolute;
        z-index: 20;
        top: 8px;
        right: 0;
        width: 18px;
        height: calc(100% - 16px);
        border: 0;
        border-radius: 8px;
        background: transparent;
        cursor: ew-resize;
        touch-action: none;
    }

    #columnsContainer > .column.expanded > .column-resize-handle::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 1px;
        width: 2px;
        border-radius: 2px;
        background: rgba(148, 163, 184, .28);
        opacity: 0;
        transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
    }

    #columnsContainer > .column.expanded > .column-resize-handle:hover::after,
    #columnsContainer > .column.expanded > .column-resize-handle:focus-visible::after,
    #columnsContainer > .column.expanded > .column-resize-handle-active::after {
        opacity: 1;
        background: var(--accent-color, #4dabf7);
        box-shadow: 0 0 10px rgba(77, 171, 247, .75);
    }

    body.boardeva-column-resizing,
    body.boardeva-column-resizing * {
        cursor: ew-resize !important;
        user-select: none !important;
    }

    #columnsContainer > .column.column-resizing {
        transition: none;
    }

    #columnsContainer > .column.collapsed {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        max-width: 40px;
    }
}

@media (max-width: 768px) {
    #columnsContainer > .column {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    #columnsContainer > .column > .column-resize-handle {
        display: none !important;
    }
}

/* A user may prefer one row, but content that does not fit must split. Keep
   the first-paint layout tied to the same effective class as the JS check. */
@media (max-width: 959px) {
    .app-header.split-header {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 8px;
    }

    .app-header.split-header .header-actions,
    .app-header.split-header .board-tabs {
        width: 100%;
        box-sizing: border-box;
    }

    .app-header.split-header .header-actions {
        order: 1;
        min-height: 42px;
        height: auto;
        padding: 0 8px;
        gap: 8px;
    }

    .app-header.split-header .board-tabs {
        order: 2;
        margin-right: 0;
        padding: 0 8px;
    }

    .app-header.split-header .header-actions-right-start {
        margin-left: auto !important;
    }
}

/* A hidden-label picker is a compact icon button, not a label-sized oval. The
   active board/workspace icon supplies the identity that text used to provide. */
.header-actions .workspace-board-picker-btn-icon-only {
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
}

.workspace-board-picker-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1rem;
}

.workspace-board-picker-icon i {
    margin: 0 !important;
    line-height: 1;
}

/* Selection feedback is an overlay so it can fade in without changing a card
   or column's dimensions when its selected state changes. */
.column::after,
.card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 2px solid var(--accent-color, #4dabf7);
    border-radius: inherit;
    box-shadow: 0 0 15px rgba(77, 171, 247, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: none;
    z-index: 5;
}

.column.column-selected::after,
.card.card-selected::after {
    inset: -4px;
    opacity: 1;
    background: rgba(77, 171, 247, 0.12);
    border-color: rgba(123, 190, 255, 0.95);
}

/* This class is added only to the element selected by the user. The selected
   state itself stays static, so restoring a saved selection never animates and
   removing/replacing a selection cannot produce a fade-out. */
.column.selection-fade-in::after,
.card.selection-fade-in::after {
    animation: boardeva-selection-fade-in 220ms ease-out both;
}

@keyframes boardeva-selection-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.card-animations-disabled .card.selection-fade-in::after {
    animation: none;
}

/* Fine-pointer desktop cards keep their quiet chrome until the card is in
   use. Opacity preserves the layout, and focus remains available to keyboard
   users even while the controls are visually hidden. */
@media (hover: hover) and (pointer: fine) {
    .card-favorite-toggle,
    .card-timer > button {
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms ease;
    }

    .card:hover .card-favorite-toggle,
    .card:focus-within .card-favorite-toggle,
    .card:hover .card-timer > button,
    .card:focus-within .card-timer > button {
        opacity: 1;
        pointer-events: auto;
    }
}

/* The controls already define the tab separation; keep the header itself
   borderless in both the one-row and split layouts. */
.app-header,
.app-header.split-header {
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.app-header .board-tabs {
    border-bottom: 0 !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .column::after,
    .card::after {
        transition: none;
    }

    .column.selection-fade-in::after,
    .card.selection-fade-in::after {
        animation: none;
    }
}


/* ==========================================================================
   Task 11: Premium Eva Workspace, Context Chips, Instruction Cards, Modal Geometry
   ========================================================================== */

#askEvaModal .eva-workspace-dialog {
    max-width: min(1180px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: 16px auto;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease;
}

#askEvaModal .eva-modal-content,
#askEvaModal .eva-workspace {
    border-radius: 28px !important;
    overflow: hidden;
}

#askEvaModal .eva-history-sidebar,
#askEvaModal .eva-main,
#askEvaModal .eva-welcome,
#askEvaModal .eva-instruction-card {
    border-radius: 20px;
}

/* Context chips and retrieval scope */
.eva-context-chips-container {
    padding: 6px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.eva-context-chips-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.eva-scope-select {
    width: auto !important;
    min-width: 140px;
    background-color: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .18) !important;
    border-radius: 8px;
    font-size: .82rem;
}

.eva-chips-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.eva-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .78rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
}

.eva-context-chip-selected {
    background: rgba(59, 130, 246, .2);
    border-color: rgba(59, 130, 246, .4);
    color: #93c5fd;
}

.eva-context-chip-current {
    background: rgba(16, 185, 129, .2);
    border-color: rgba(16, 185, 129, .4);
    color: #a7f3d0;
}

.eva-context-chip-discovered {
    background: rgba(245, 158, 11, .2);
    border-color: rgba(245, 158, 11, .4);
    color: #fde68a;
}

.eva-chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin-left: 3px;
    color: inherit;
    font-size: .7rem;
    cursor: pointer;
    opacity: .7;
}

.eva-chip-remove:hover {
    opacity: 1;
}

/* Instruction card */
.eva-instruction-card {
    margin: 10px 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
}

.eva-instruction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.eva-instruction-intent-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(99, 102, 241, .25);
    border: 1px solid rgba(99, 102, 241, .4);
    color: #c7d2fe;
    font-size: .82rem;
    font-weight: 600;
}

.eva-instruction-sources-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.eva-instruction-source-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    font-size: .75rem;
    color: rgba(255, 255, 255, .8);
}

.eva-source-remove-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: .68rem;
    cursor: pointer;
}

.eva-instruction-input {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* Considered sources disclosure */
.eva-considered-disclosure {
    margin: 8px 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    font-size: .8rem;
}

.eva-considered-summary {
    cursor: pointer;
    font-weight: 600;
    color: rgba(255, 255, 255, .8);
}

.eva-considered-body {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eva-considered-group-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 3px;
}

.eva-considered-group-items {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.eva-considered-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .06);
    font-size: .75rem;
}

/* Responsive viewports */
@media (max-width: 720px) {
    #askEvaModal .eva-workspace-dialog {
        max-width: 100vw;
        max-height: 100dvh;
        height: 100dvh;
        margin: 0;
    }

    #askEvaModal .eva-modal-content,
    #askEvaModal .eva-workspace {
        border-radius: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

@media (max-width: 390px) {
    #askEvaModal .eva-workspace-header {
        padding: 8px 10px;
    }
    #askEvaModal .eva-main {
        padding: 10px 8px;
    }
    .eva-scope-select {
        min-width: 100%;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #askEvaModal .eva-workspace-dialog {
        transition: opacity 120ms ease !important;
        transform: none !important;
    }
    .eva-presence-light {
        animation: none !important;
    }
}


/* Task 12: Conversational Onboarding and Personality Selection */
.boardeva-tour-personality-section {
    margin: 12px 0;
}

.boardeva-tour-personality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.boardeva-tour-personality-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: all .16s ease;
}

.boardeva-tour-personality-btn:hover,
.boardeva-tour-personality-btn:focus-visible {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .1);
    outline: none;
}

.boardeva-tour-personality-btn.is-selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, .2);
    box-shadow: 0 0 12px rgba(99, 102, 241, .3);
}

.boardeva-tour-personality-btn strong {
    font-size: .84rem;
}

.boardeva-tour-personality-btn small {
    font-size: .72rem;
    color: rgba(255, 255, 255, .6);
    margin-top: 2px;
}

@media (max-width: 580px) {
    .boardeva-tour-personality-grid {
        grid-template-columns: 1fr;
    }
}


/* Task 13: Inbox Companion Redesign and Presence Light */
.inbox-presence-light {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background: rgba(255, 255, 255, .25);
    border: 1px solid rgba(255, 255, 255, .4);
    box-shadow: 0 0 6px rgba(255, 255, 255, .2);
    transition: all .24s ease;
}

.inbox-presence-light[data-eva-presence-state="connecting"] {
    background: #60a5fa;
    border-color: #93c5fd;
    box-shadow: 0 0 10px rgba(96, 165, 250, .6);
}

.inbox-presence-light[data-eva-presence-state="ready"] {
    background: #34d399;
    border-color: #6ee7b7;
    box-shadow: 0 0 10px rgba(52, 211, 153, .6);
}

.inbox-presence-light[data-eva-presence-state="attention"] {
    background: #f87171;
    border-color: #fca5a5;
    box-shadow: 0 0 10px rgba(248, 113, 113, .6);
}


/* Task 14: Opt-in Proactive Suggestions Toast */
/* Card Trash Panel & Multi-Card Selection Bar */
.trash-cards-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 480px;
  overflow-y: auto;
}

.trash-card-item {
  background: var(--bs-card-bg, rgba(255, 255, 255, 0.04));
  border-color: var(--bs-border-color, rgba(255, 255, 255, 0.1)) !important;
  transition: background-color 0.15s ease;
}

.trash-card-item:hover {
  background: rgba(255, 255, 255, 0.07);
}

.trash-card-info {
  min-width: 0;
}

@media (max-width: 575.98px) {
  .trash-card-item {
    align-items: stretch !important;
    flex-direction: column;
    gap: 12px;
  }

  .trash-card-item > .d-flex {
    justify-content: flex-end;
  }
}

.multi-card-selection-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 24, 33, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1050;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
  isolation: isolate;
}

.multi-card-selection-bar.boardeva-selection-bar-enter {
  animation: boardeva-selection-bar-rise 240ms cubic-bezier(.22, 1, .36, 1) both;
}

.multi-card-selection-bar.boardeva-selection-bar-exit {
  animation: boardeva-selection-bar-drop 220ms cubic-bezier(.55, 0, .78, .22) both;
  pointer-events: none;
}

@keyframes boardeva-selection-bar-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 24px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes boardeva-selection-bar-drop {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .multi-card-selection-bar.boardeva-selection-bar-enter {
    animation: none;
  }
  .multi-card-selection-bar.boardeva-selection-bar-exit {
    animation: none;
  }
}

.boardeva-lasso-rect {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  border: 1px solid rgba(123, 190, 255, 0.95);
  border-radius: 6px;
  background: rgba(77, 171, 247, 0.16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.card.lasso-preview {
  outline: 2px solid rgba(123, 190, 255, .98) !important;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(77, 171, 247, .32) !important;
}

body.boardeva-lassoing,
body.boardeva-lassoing * {
  cursor: crosshair !important;
  user-select: none !important;
}

/* Eva proactive suggestion toast cue */
.eva-suggestion-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1060;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(22, 26, 31, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.eva-suggestion-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.eva-suggestion-toast .eva-suggestion-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.eva-suggestion-toast .eva-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 575.98px) {
  .eva-suggestion-toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eva-suggestion-toast {
    transition: opacity 120ms ease !important;
    transform: none !important;
  }
}

/* Eva Conversational Initial Onboarding */
.boardeva-eva-onboarding-host {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10000;
}

.boardeva-eva-onboarding-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(580px, calc(100vw - 32px));
  padding: 32px;
  background: rgba(18, 18, 28, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 40px rgba(139, 92, 246, 0.15);
  color: #f1f5f9;
  z-index: 10001;
  pointer-events: auto;
  animation: eva-onboarding-pop 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.boardeva-eva-onboarding-card .eva-presence-slot {
  position: absolute;
  top: 24px;
  right: 24px;
}

.boardeva-eva-onboarding-kicker {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 12px;
}

.boardeva-eva-onboarding-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 14px;
  padding-right: 48px;
}

.boardeva-eva-onboarding-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
}

.boardeva-eva-onboarding-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.boardeva-eva-provider-card {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
}

.boardeva-eva-provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.boardeva-eva-provider-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 76px;
  padding: 13px 14px;
  text-align: left;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.boardeva-eva-provider-option:hover,
.boardeva-eva-provider-option.is-selected {
  border-color: rgba(245, 158, 11, 0.85);
  background: rgba(245, 158, 11, 0.12);
}

.boardeva-eva-provider-option:hover { transform: translateY(-1px); }
.boardeva-eva-provider-option > i { color: #fbbf24; margin-top: 3px; }
.boardeva-eva-provider-option span { display: grid; gap: 4px; min-width: 0; }
.boardeva-eva-provider-option strong { font-size: 0.9rem; }
.boardeva-eva-provider-option small { color: rgba(255, 255, 255, 0.64); line-height: 1.35; }

.boardeva-eva-usage-card,
.boardeva-eva-provider-help,
.boardeva-eva-provider-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.boardeva-eva-usage-card { display: grid; gap: 4px; margin-bottom: 14px; }
.boardeva-eva-usage-card div { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.boardeva-eva-usage-card strong { color: #fff; }
.boardeva-eva-usage-card small { color: rgba(255, 255, 255, 0.55); }
.boardeva-eva-provider-help { margin-top: 12px; }
.boardeva-eva-provider-help > i { color: #fbbf24; margin-top: 2px; }
.boardeva-eva-provider-form { display: grid; gap: 12px; }
.boardeva-eva-provider-form label { display: grid; gap: 6px; color: rgba(255, 255, 255, 0.72); font-size: 0.78rem; }
.boardeva-eva-provider-form input { width: 100%; padding: 9px 11px; color: #f8fafc; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 8px; }
.boardeva-eva-provider-form input:focus { outline: 2px solid rgba(245, 158, 11, 0.75); outline-offset: 1px; }
.boardeva-eva-provider-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.boardeva-eva-provider-actions { display: flex; justify-content: flex-start; }
.boardeva-eva-provider-message { margin-top: 12px; }
.boardeva-eva-provider-message.is-error { border-color: rgba(248, 113, 113, 0.55); color: #fecaca; }

@media (max-width: 639px) {
  .boardeva-eva-provider-card { padding: 22px; }
  .boardeva-eva-provider-grid,
  .boardeva-eva-provider-form-row { grid-template-columns: 1fr; }
  .boardeva-eva-usage-card div { display: grid; }
}

/* Floating Companion Guide Dock */
.boardeva-eva-guide-dock {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: min(440px, calc(100vw - 32px));
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(18, 18, 28, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 30px rgba(139, 92, 246, 0.12);
  color: #f1f5f9;
  z-index: 1040;
  pointer-events: auto;
  animation: eva-guide-slide-in 260ms ease-out;
}

body.modal-open .boardeva-eva-onboarding-host,
body.modal-open .boardeva-eva-onboarding-card,
body.modal-open .boardeva-eva-guide-dock {
  z-index: 1040 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.boardeva-eva-guide-dock .eva-presence-slot {
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
}

.boardeva-eva-guide-body {
  flex: 1;
  min-width: 0;
}

.boardeva-eva-guide-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd;
  margin-bottom: 6px;
}

.boardeva-eva-guide-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #f8fafc;
  margin-bottom: 4px;
}

.boardeva-eva-guide-body small {
  display: block;
  font-size: 0.76rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
}

.boardeva-eva-guide-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

@keyframes eva-onboarding-pop {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes eva-guide-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .boardeva-eva-guide-dock {
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: calc(100vw - 24px);
  }
}

/* ==========================================================================
   Visual Leitner Box Spaced Repetition & Study Runner
   ========================================================================== */

.card-mastery-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  cursor: pointer;
  vertical-align: middle;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-mastery-badge:hover {
  transform: scale(1.05);
}

.card-mastery-badge.box-1 { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.card-mastery-badge.box-2 { background: linear-gradient(135deg, #4f46e5, #6366f1); }
.card-mastery-badge.box-3 { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
.card-mastery-badge.box-4 { background: linear-gradient(135deg, #d97706, #f59e0b); }
.card-mastery-badge.box-5 { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }

.card-mastery-badge.mastery-due {
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6);
  animation: mastery-pulse 2s infinite;
}

@keyframes mastery-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
}

.study-header-btn {
  background: rgba(124, 58, 237, 0.18) !important;
  border: 1px solid rgba(139, 92, 246, 0.38) !important;
  color: #c4b5fd !important;
}

.study-header-btn:hover {
  background: rgba(124, 58, 237, 0.35) !important;
  color: #ffffff !important;
  border-color: rgba(167, 139, 250, 0.6) !important;
}

/* Fullscreen Study Overlay */
.boardeva-study-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  background: rgba(10, 15, 29, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: study-fade-in 0.25s ease-out;
}

.boardeva-study-overlay.hidden {
  display: none !important;
}

@keyframes study-fade-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

.study-container {
  width: 92vw;
  max-width: 860px;
  min-height: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: #131b31;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.study-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #18223d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
}

.study-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.study-badge {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.study-target-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.study-header-center {
  flex: 1;
  max-width: 240px;
}

.study-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
}

.study-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.study-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #38bdf8);
  transition: width 0.3s ease;
}

.study-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.study-stat-pill {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.study-close-btn {
  border-radius: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}

.study-main {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.boardeva-study-overlay.is-planning .study-header-center,
.boardeva-study-overlay.is-planning .study-stat-pill {
  display: none;
}

.study-plan-card {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 28px;
  color: #e2e8f0;
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.18), transparent 42%),
    #0f1628;
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  animation: card-face-reveal 0.2s ease-out;
}

.study-plan-eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: #a78bfa;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.study-plan-card h2 {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: 1.55rem;
}

.study-plan-intro {
  max-width: 620px;
  margin: 0 0 18px;
  color: #94a3b8;
  line-height: 1.55;
}

.study-plan-sentence {
  margin-bottom: 20px;
  padding: 13px 15px;
  color: #ddd6fe;
  background: rgba(124, 58, 237, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.22);
  border-radius: 9px;
  font-weight: 600;
  line-height: 1.45;
}

.study-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.study-plan-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #cbd5e1;
  font-size: 0.78rem;
  font-weight: 600;
}

.study-plan-field .form-control,
.study-plan-field .form-select {
  color: #f8fafc;
  background-color: #18223d;
  border-color: rgba(255, 255, 255, 0.12);
}

.study-plan-field .form-control:focus,
.study-plan-field .form-select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.16);
}

.study-plan-field .form-select option {
  color: #f8fafc;
  background: #18223d;
}

.study-plan-pomodoro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 17px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 9px;
  cursor: pointer;
}

.study-plan-pomodoro span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #e2e8f0;
  font-size: 0.82rem;
}

.study-plan-pomodoro small,
.study-plan-availability {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 400;
}

.study-plan-availability {
  margin: 10px 0 0;
}

.study-plan-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.study-card-box {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.study-card-face {
  flex: 1;
  display: flex;
  flex-direction: column;
  animation: card-face-reveal 0.2s ease-out;
}

@keyframes card-face-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.study-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.study-box-indicator {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  color: #fff;
}

.study-box-indicator.box-1 { background: #2563eb; }
.study-box-indicator.box-2 { background: #4f46e5; }
.study-box-indicator.box-3 { background: #7c3aed; }
.study-box-indicator.box-4 { background: #d97706; }
.study-box-indicator.box-5 { background: #059669; }

.study-subject-pill {
  font-size: 11px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
}

.study-back-badge {
  font-size: 11px;
  font-weight: 600;
  color: #86efac;
  background: rgba(22, 101, 52, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
}

.study-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 16px;
  line-height: 1.35;
}

.study-card-summary {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #94a3b8;
  margin-bottom: 28px;
  flex: 1;
}

.study-pomodoro-pill {
  cursor: pointer;
  font: inherit;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.study-pomodoro-pill:hover,
.study-pomodoro-pill.is-paused {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(167, 139, 250, 0.45);
  color: #ddd6fe;
}

.study-pomodoro-pill:disabled {
  cursor: default;
  opacity: 0.8;
}

.study-flip-prompt {
  text-align: center;
  padding: 16px 0;
}

.study-quiz-panel {
  text-align: center;
  padding: 14px 0;
}

.study-quiz-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 700px;
  margin: 0 auto 12px;
}

.study-quiz-choice {
  min-height: 48px;
  text-align: left;
  border-radius: 10px;
  white-space: normal;
}

.study-quiz-generate {
  border-radius: 999px;
}

.study-quiz-status {
  min-height: 18px;
  margin-top: 8px;
  color: #94a3b8;
  font-size: 0.72rem;
}

.study-recall-question {
  margin-bottom: 12px;
  color: #e2e8f0;
  font-size: 0.9rem;
  font-weight: 700;
}

.study-recall-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 620px;
  margin: 0 auto;
}

.study-recall-btn {
  min-height: 48px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 650;
}

.study-flip-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4);
}

.study-back-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 14px;
}

.study-back-content {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #e2e8f0;
  background: #0f1628;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 20px;
  max-height: 280px;
  overflow-y: auto;
}

.study-answer-block,
.study-explanation-block,
.study-notes-block {
  margin-bottom: 14px;
}

.study-answer-label {
  margin-bottom: 6px;
  color: #a78bfa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.study-explanation-block,
.study-notes-block {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}

.study-supporting-cards {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -7px 0 16px;
  color: #94a3b8;
  font-size: 0.75rem;
}

.study-supporting-cards > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.study-supporting-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  color: #c4b5fd;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 99px;
}

.study-subitems-wrap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.study-subitems-wrap h6 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 8px;
}

.study-subitems-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.study-subitems-list li {
  font-size: 12px;
  padding: 3px 0;
  color: #cbd5e1;
}

.study-evaluation-bar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.study-evaluation-bar .eval-btn {
  flex: 1;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.study-evaluation-bar kbd, .study-flip-btn kbd {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  font-family: inherit;
  margin-left: 6px;
}

/* Session Summary */
.study-summary-card {
  text-align: center;
  padding: 24px;
  animation: study-fade-in 0.3s ease-out;
}

.study-summary-icon {
  font-size: 52px;
  margin-bottom: 12px;
}

.study-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0;
}

.summary-metric {
  background: #18223d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 16px 12px;
}

.metric-val {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.metric-lbl {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .study-container {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    min-height: 0;
  }

  .study-header {
    padding: 12px;
  }

  .study-header-right .study-stat-pill:not(.study-pomodoro-pill),
  .study-badge {
    display: none;
  }

  .study-main,
  .study-plan-card {
    padding: 18px;
  }

  .study-plan-grid,
  .study-recall-actions,
  .study-summary-grid {
    grid-template-columns: 1fr;
  }

  .study-evaluation-bar {
    flex-direction: column;
  }

  .study-evaluation-bar .eval-btn {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .study-container {
    width: 96vw;
    max-height: 94vh;
  }

  .study-header {
    align-items: flex-start;
  }

  .study-header-center,
  .study-header-right .study-stat-pill:not(.study-pomodoro-pill) {
    display: none;
  }

  .study-main {
    padding: 16px;
  }

  .study-plan-card {
    padding: 20px;
  }

  .study-plan-grid,
  .study-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .study-evaluation-bar {
    flex-direction: column;
  }

  .study-evaluation-bar .eval-btn {
    width: 100%;
  }
}
.card-image-frame{align-items:center;justify-content:center}.card-image-fallback{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;border:1px dashed rgba(148,163,184,.65);border-radius:4px;color:rgba(226,232,240,.85);background:rgba(15,23,42,.45);text-decoration:none;font-size:15px}.card-image-fallback:hover,.card-image-fallback:focus{color:#fff;border-color:#a78bfa;background:rgba(124,58,237,.35);text-decoration:none}

/* Electron frameless window chrome. The framed desktop and hosted app keep the
   existing flex order; the desktop-only state promotes the title-bar row to a
   two-row header without placing a drag region over any interactive element. */
.desktop-header-row {
    display: contents;
}

.app-header .board-tabs {
    order: 1;
}

.app-header .header-actions {
    order: 2;
}

.window-drag-region {
    display: block;
    flex: 1 1 64px;
    min-width: 64px;
    min-height: 36px;
    cursor: default;
    -webkit-app-region: drag;
}

.window-controls,
.window-controls button,
.app-header .board-tab,
.app-header .add-board-btn,
.app-header .prism-sync-widget,
.app-header .sync-widget,
.app-header .inbox-header-action,
.app-header .user-menu-btn,
.app-header .header-icon-btn,
.app-header [role="button"],
.app-header button,
.app-header input,
.app-header select,
.app-header textarea {
    -webkit-app-region: no-drag;
}

.window-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    min-height: 36px;
}

.window-control {
    width: 40px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    padding: 0;
    color: var(--text-primary, #fff);
    background: transparent;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.window-control:hover,
.window-control:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

.window-control-close:hover,
.window-control-close:focus-visible {
    color: #fff;
    background: #c42b4d;
}

html:not(.desktop-frameless) .window-drag-region,
html:not(.desktop-frameless) .window-controls {
    display: none;
}

html.desktop-frameless .app-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-width: 0;
    padding: 8px 4px 10px;
    gap: 8px;
    -webkit-app-region: drag;
}

/* In frameless mode every non-interactive header surface is a drag target.
   Buttons and tabs below carve out no-drag islands so their click/drag
   behavior remains available to the renderer. */
html.desktop-frameless .desktop-header-row,
html.desktop-frameless .app-header .header-actions,
html.desktop-frameless .app-header .header-actions-left,
html.desktop-frameless .app-header .header-actions-right,
html.desktop-frameless .app-header .board-tabs {
    -webkit-app-region: drag;
}

html.desktop-frameless .desktop-header-row {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(24px, 1fr) minmax(0, auto) auto;
    order: 1;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    gap: 8px;
}

html.desktop-frameless .app-header .header-actions {
    display: contents;
}

html.desktop-frameless .header-actions-left {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: min(42vw, 640px);
    overflow-x: auto;
    overflow-y: hidden;
}

html.desktop-frameless .header-actions-right {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    max-width: min(42vw, 640px);
    margin-left: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Header action groups must not clip menus that intentionally open below the
   title bar.  The responsive layout already chooses a split row when the
   controls need more room, so keeping these surfaces visible preserves the
   browser dropdown behavior in the frameless Electron window. */
html.desktop-frameless .header-actions-left,
html.desktop-frameless .header-actions-right {
    overflow: visible;
}

html.desktop-frameless .window-drag-region {
    grid-column: 2;
    order: 2;
    width: 100%;
}

html.desktop-frameless .window-controls {
    grid-column: 4;
    order: 3;
    justify-self: end;
}

/* Keep native window actions above the broad drag surface. Chromium treats
   no-drag descendants as clickable, but the explicit hit-test layer also
   protects these controls while the adaptive header is changing rows. */
html.desktop-frameless .window-controls {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}

html.desktop-frameless .window-control {
    position: relative;
    z-index: 21;
    pointer-events: auto;
    cursor: pointer;
}

html.desktop-frameless .app-header .board-tabs {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    overflow-x: auto;
}

html.desktop-frameless .app-header.split-header {
    padding: 8px 4px 10px;
    gap: 8px;
}

html.desktop-frameless .app-header.split-header .header-actions,
html.desktop-frameless .app-header.split-header .board-tabs {
    width: auto;
}

html.desktop-frameless .app-header.split-header .board-tabs {
    width: 100%;
}

/* Wide frameless windows follow the browser's single-row composition:
   tabs stay on the left, the toolbar groups sit on the right, and the
   empty spacer remains draggable between them. */
html.desktop-frameless .app-header:not(.split-header) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(24px, auto) minmax(0, auto) minmax(0, auto) auto;
    grid-template-rows: minmax(42px, auto);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 8px 4px 10px;
}

/* The single-row header owns the full grid. Promote its wrapper so the tabs,
   drag surface, action groups, and window controls occupy the parent's five
   tracks instead of leaving an unused track to the right. */
html.desktop-frameless .app-header:not(.split-header) .desktop-header-row {
    display: contents;
}

html.desktop-frameless .app-header:not(.split-header) .board-tabs {
    grid-column: 1;
    grid-row: 1;
    order: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
}

html.desktop-frameless .app-header:not(.split-header) .window-drag-region {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    width: 100%;
    min-width: 24px;
}

html.desktop-frameless .app-header:not(.split-header) .header-actions-left {
    grid-column: 3;
    grid-row: 1;
    order: 0;
    max-width: min(24vw, 360px);
}

html.desktop-frameless .app-header:not(.split-header) .header-actions-right {
    grid-column: 4;
    grid-row: 1;
    order: 0;
    max-width: min(34vw, 520px);
}

html.desktop-frameless .app-header:not(.split-header) .window-controls {
    grid-column: 5;
    grid-row: 1;
    order: 0;
    justify-self: end;
}

@media (max-width: 959px) {
    html.desktop-frameless .desktop-header-row {
        grid-template-columns: minmax(0, auto) minmax(16px, 1fr) minmax(0, auto) auto;
    }

    html.desktop-frameless .header-actions-left,
    html.desktop-frameless .header-actions-right {
        max-width: none;
    }

    html.desktop-frameless .window-drag-region {
        min-width: 32px;
    }

    html.desktop-frameless .window-control {
        width: 34px;
    }
}

/* Eva and Inbox must not tint, blur, or shade the board behind their modal.
   Each modal keeps its own local surface; only the outer viewport is
   transparent so these features never create a screen-wide scrim. */
#askEvaModal,
#automationInboxModal {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* The shared dock is a real layout column, so its background is local to
   that column and never acts as a page-wide overlay. */
.eva-dock-pane {
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

#askEvaModal .eva-modal-content,
#askEvaModal .eva-workspace,
#automationInboxModal .inbox-modal-content {
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Dock mode uses the shared pane's local surface and must not add another
   opaque layer inside it. */
#evaDockPane #askEvaModal .eva-modal-content,
#evaDockPane #askEvaModal .eva-workspace,
#evaDockPane #automationInboxModal .inbox-modal-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* These surfaces never use Bootstrap's full-screen scrim. The rule also
   clears a stale backdrop left by an older cached runtime or a surface
   switch while the modal is being moved between body and the dock. */
body:has(#askEvaModal.show) .modal-backdrop,
body:has(#automationInboxModal.show) .modal-backdrop {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#askEvaModal .eva-workspace::before {
    display: none;
}

#askEvaModal .eva-workspace-header,
#automationInboxModal .modal-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* A modal owns the whole visible surface while it is open. It must never
   inherit the frameless window's drag hit-testing from the board header behind
   it, including transparent header space around its actions. */
html.desktop-frameless #askEvaModal,
html.desktop-frameless #automationInboxModal,
html.desktop-frameless #askEvaModal .modal-dialog,
html.desktop-frameless #automationInboxModal .modal-dialog,
html.desktop-frameless #askEvaModal .eva-modal-content,
html.desktop-frameless #automationInboxModal .inbox-modal-content,
html.desktop-frameless #askEvaModal .eva-workspace,
html.desktop-frameless #automationInboxModal .modal-body,
html.desktop-frameless #automationInboxModal .modal-footer {
    -webkit-app-region: no-drag;
}

html.desktop-frameless #askEvaModal .eva-workspace-header,
html.desktop-frameless #automationInboxModal .modal-header {
    position: relative;
    z-index: 25;
    -webkit-app-region: no-drag;
}

html.desktop-frameless #askEvaModal .eva-header-actions,
html.desktop-frameless #automationInboxModal .modal-header > div:last-child {
    position: relative;
    z-index: 30;
    pointer-events: auto;
    -webkit-app-region: no-drag;
}

html.desktop-frameless #askEvaModal .eva-header-actions > button,
html.desktop-frameless #automationInboxModal .modal-header button {
    position: relative;
    z-index: 31;
    pointer-events: auto;
    -webkit-app-region: no-drag;
}

/* Inbox and Eva use the same transparent surface as the rest of the
   interface. Keep contrast on their controls and cards, but let the active
   board background remain visible through the feature shells. */
#automationInboxModal .inbox-modal-content,
#automationInboxModal .inbox-modal-body,
#automationInboxModal .inbox-queue-panel,
#automationInboxModal .inbox-preview-panel,
#automationInboxModal .inbox-destination-panel,
#automationInboxModal .inbox-history-panel,
#automationInboxModal .inbox-sources-panel {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(128, 190, 232, .22) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#automationInboxModal .inbox-modal-footer {
    border-top: 0 !important;
    background: transparent !important;
}
#askEvaModal .eva-modal-content,
#askEvaModal .eva-workspace,
#askEvaModal .eva-workspace-header,
#askEvaModal .eva-workspace-body,
#askEvaModal .eva-main {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
#automationInboxModal .interface-close-button,
#keyboardShortcutsModal .btn-close,
#askEvaModal .eva-modal-close {
    filter: invert(1) brightness(1.35) !important;
    opacity: 1 !important;
}
#automationInboxModal .interface-close-button i,
#askEvaModal .eva-modal-close i,
#keyboardShortcutsModal .btn-close::before,
#keyboardShortcutsModal .btn-close::after {
    color: #fff !important;
}
#keyboardShortcutsModal .modal-footer {
    display: none !important;
    border-top: 0 !important;
}

/* Removing a modal surface must not flatten its controls. Keep contrast and
   depth on the actual buttons, while the modal roots remain scrim-free. */
.header-actions .header-action-with-text,
.header-actions .header-icon-btn,
.header-actions .prism-sync-widget,
.header-actions .sync-widget,
#askEvaModal .eva-header-actions > button,
#askEvaModal .eva-history-sidebar-new,
#askEvaModal .eva-starter-card,
#askEvaModal .eva-send-button,
#askEvaModal .eva-cancel-button,
#automationInboxModal .modal-header button,
#automationInboxModal .inbox-minimal-actions button,
#automationInboxModal .inbox-view-tab {
    box-shadow: 0 2px 10px rgba(0,0,0,.28);
}

/* UI controls are actions, not selectable document copy. Keep this scoped to
   controls so card titles and descriptions remain selectable when desired. */
button,
.btn,
[role="button"] {
    -webkit-user-select: none;
    user-select: none;
}

/* Avatars, provider/model chrome, and panel framing are interactive UI, not
   copyable content. Keep editable fields inside those surfaces selectable. */
.user-menu-btn,
.user-menu-btn *,
.header-actions,
.header-actions *,
.eva-dock-pane,
.eva-dock-pane *,
.inbox-queue-panel,
.inbox-queue-panel *,
.inbox-preview-panel,
.inbox-preview-panel *,
.inbox-destination-panel,
.inbox-destination-panel *,
.glass-morph-context-menu,
.glass-morph-context-menu *,
.glass-morph-submenu,
.glass-morph-submenu *,
.dropdown-menu,
.dropdown-menu *,
.modal-header,
.modal-header *,
.boardeva-tour-provider-list,
.boardeva-tour-provider-list * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

.user-menu-btn img,
.user-menu-btn svg,
.user-menu-btn span,
.eva-dock-pane input,
.eva-dock-pane textarea,
.eva-dock-pane select,
.eva-dock-pane [contenteditable="true"],
.inbox-queue-panel input,
.inbox-queue-panel textarea,
.inbox-queue-panel select,
.inbox-queue-panel [contenteditable="true"],
.inbox-preview-panel input,
.inbox-preview-panel textarea,
.inbox-preview-panel select,
.inbox-preview-panel [contenteditable="true"],
.inbox-destination-panel input,
.inbox-destination-panel textarea,
.inbox-destination-panel select,
.inbox-destination-panel [contenteditable="true"],
.boardeva-tour-provider-list input,
.boardeva-tour-provider-list textarea,
.boardeva-tour-provider-list select,
.boardeva-tour-provider-list [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* Tabs use the same restrained depth as the top toolbar actions. */
.board-tab {
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.board-tab:hover,
.board-tab:focus-visible {
    border-color: rgba(255, 255, 255, .34);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
}

html.desktop-frameless .app-header.split-header .board-tabs {
    -webkit-app-region: no-drag;
}

/* Search is a lightweight surface. Its controls keep their own contrast,
   while the modal root and Bootstrap backdrop stay transparent. */
#searchModal {
    background: transparent !important;
}

#searchModal .modal-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#searchModal .modal-body {
    background: transparent !important;
}

#searchModal .search-modal-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 1;
}

/* The board pane can become mobile-width while the Electron window itself is
   wide because Eva or Inbox occupies the other pane. */
.boardeva-main-pane {
    container-type: inline-size;
    container-name: boardeva-main-pane;
}

/* The header can be one or two rows at any window width. Let the board consume
   the remaining pane height, then let the columns scroller consume the
   remaining board height. A fixed 100% columns height places its horizontal
   rail below the viewport whenever a split header is active. */
.boardeva-main-pane .kanban-board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.boardeva-main-pane #columnsContainer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
}

.boardeva-main-pane.boardeva-compact-board .kanban-board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-inline: 0;
    overflow: hidden;
}

.boardeva-main-pane.boardeva-compact-board #columnsContainer {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    gap: 20px;
    padding: 0 20px 18px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}

.boardeva-main-pane.boardeva-compact-board #columnsContainer > .column {
    box-sizing: border-box;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    margin-right: 0;
    scroll-snap-align: center;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
    align-items: center;
    gap: 10px;
    margin: 0 20px 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-color) 28%, transparent);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager[hidden] {
    display: none;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager-button {
    width: 42px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    color: #fff;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager-status {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: #fff;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager-position {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.boardeva-main-pane.boardeva-compact-board .mobile-column-pager-button:focus-visible {
    outline: 2px solid rgba(255, 177, 69, .9);
    outline-offset: 2px;
}

/* Chromium gives the standards-based scrollbar properties precedence over
   the WebKit pseudo-elements. On Windows that selects the native themed rail
   and its arrow buttons. Keep those properties on auto in WebKit engines so
   the button-free skin below owns the rendering; Firefox receives the same
   color and thin sizing through its standards-based fallback. */
@supports selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }

    #columnsContainer {
        scrollbar-width: auto !important;
        scrollbar-color: auto !important;
    }
}

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, .55) transparent;
    }
}

*::-webkit-scrollbar {
    width: 3px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-button,
*::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical,
*::-webkit-scrollbar-button:horizontal,
*::-webkit-scrollbar-corner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

*::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .55);
    border-radius: 25px;
}

/* Keep the board scrollbar discoverable without leaving a permanent visual
   rail. Keyboard focus is included for accessibility. */
#columnsContainer {
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

#columnsContainer:hover,
#columnsContainer:focus-within {
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

.boardeva-main-pane:hover #columnsContainer,
.boardeva-main-pane:focus-within #columnsContainer {
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

#columnsContainer::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 10px;
}

#columnsContainer::-webkit-scrollbar-track {
    background: transparent;
}

#columnsContainer::-webkit-scrollbar-button,
#columnsContainer::-webkit-scrollbar-corner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

#columnsContainer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .55);
    border-radius: 999px;
}
#columnsContainer:hover::-webkit-scrollbar-thumb,
#columnsContainer:focus-within::-webkit-scrollbar-thumb,
.boardeva-main-pane:hover #columnsContainer::-webkit-scrollbar-thumb,
.boardeva-main-pane:focus-within #columnsContainer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .55);
}

/* The compact pager uses its own touch affordance instead of a native rail. */
@media (max-width: 768px) {
    #columnsContainer.mobile-column-pager-enabled {
        overflow-x: auto !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
        scrollbar-gutter: stable both-edges !important;
        scrollbar-color: rgba(255, 255, 255, .55) transparent !important;
    }

    #columnsContainer.mobile-column-pager-enabled::-webkit-scrollbar {
        display: block !important;
        width: 6px !important;
        height: 10px !important;
    }
}

/* Docked surfaces size themselves from the pane they actually occupy. The
   viewport can still be wide while the pane is narrowed, so viewport media
   queries alone leave Inbox and Eva with desktop controls squeezed into a
   small column. */
.eva-dock-pane {
    container-type: inline-size;
    container-name: boardeva-dock;
}

@container boardeva-dock (max-width: 760px) {
    #evaDockPane #automationInboxModal .modal-header {
        min-height: 58px;
        padding: 9px 10px;
        gap: 7px;
    }

    #evaDockPane #automationInboxModal .modal-header > div:first-child {
        min-width: 0;
        overflow: hidden;
    }

    #evaDockPane #automationInboxModal .modal-header > div:first-child h5,
    #evaDockPane #automationInboxModal .modal-header > div:first-child small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #evaDockPane #automationInboxModal .modal-header > div:last-child {
        flex: 0 0 auto;
        gap: 5px !important;
        min-width: 0;
    }

    #evaDockPane #automationInboxModal .modal-header > div:last-child > .btn,
    #evaDockPane #automationInboxModal .modal-header > div:last-child > button {
        box-sizing: border-box;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
    }

    #evaDockPane #automationInboxModal #inboxSourcesBtn,
    #evaDockPane #automationInboxModal #inboxCreateBtn {
        width: 32px;
        min-width: 32px;
        padding-inline: 0;
    }

    #evaDockPane #automationInboxModal #inboxSourcesBtn span,
    #evaDockPane #automationInboxModal #inboxCreateBtn span {
        display: none !important;
    }

    #evaDockPane #automationInboxModal .inbox-modal-body {
        display: grid;
        grid-template-columns: minmax(168px, .74fr) minmax(0, 1.26fr);
        grid-template-rows: minmax(0, 1fr) auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #evaDockPane #automationInboxModal .inbox-modal-body.is-history {
        display: block;
        overflow: auto;
    }

    #evaDockPane #automationInboxModal .inbox-history-panel:not([hidden]) {
        display: block;
        min-width: 0;
        min-height: 0;
    }

    #evaDockPane #automationInboxModal .inbox-queue-panel,
    #evaDockPane #automationInboxModal .inbox-preview-panel,
    #evaDockPane #automationInboxModal .inbox-destination-panel {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #evaDockPane #automationInboxModal .inbox-destination-panel {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-content: start;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-right: 0;
    }

    #evaDockPane #automationInboxModal .inbox-card-surface,
    #evaDockPane #automationInboxModal .inbox-virtual-column,
    #evaDockPane #automationInboxModal .inbox-preview-panel * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    #evaDockPane #automationInboxModal .inbox-modal-footer {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        padding: 8px 10px;
    }

    #evaDockPane #automationInboxModal .inbox-modal-footer > .ms-auto {
        width: auto;
        margin-left: auto !important;
    }

    #evaDockPane #automationInboxModal .inbox-modal-footer .btn {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
    }

    #evaDockPane #askEvaModal .eva-workspace-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        min-height: 58px;
        padding: 9px 10px;
    }

    #evaDockPane #askEvaModal .eva-brand,
    #evaDockPane #askEvaModal .eva-brand > div {
        min-width: 0;
    }

    #evaDockPane #askEvaModal .eva-brand {
        gap: 8px;
    }

    #evaDockPane #askEvaModal .eva-context-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #evaDockPane #askEvaModal .eva-header-actions {
        min-width: 0;
        gap: 5px;
    }

    #evaDockPane #askEvaModal .eva-provider-status {
        box-sizing: border-box;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0 !important;
        justify-content: center;
    }

    #evaDockPane #askEvaModal .eva-provider-status span:not(.eva-provider-dot),
    #evaDockPane #askEvaModal .eva-getting-started span {
        display: none !important;
    }

    #evaDockPane #askEvaModal .eva-getting-started,
    #evaDockPane #askEvaModal .eva-history-sidebar-toggle,
    #evaDockPane #askEvaModal .eva-dock-toggle,
    #evaDockPane #askEvaModal .eva-modal-close {
        box-sizing: border-box;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        flex-basis: 32px;
        padding: 0;
    }

    #evaDockPane #askEvaModal .eva-main {
        padding: 14px 12px 10px;
    }

    #evaDockPane #askEvaModal .eva-starter-prompts {
        grid-template-columns: 1fr;
        gap: 7px;
        margin-top: 14px;
    }

    #evaDockPane #askEvaModal .eva-starter-card {
        min-height: 56px;
        padding: 9px 10px;
    }
}

@container boardeva-dock (max-width: 560px) {
    #evaDockPane #automationInboxModal .inbox-modal-body {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #evaDockPane #automationInboxModal .inbox-queue-panel {
        flex: 0 0 auto;
        max-height: 220px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    #evaDockPane #automationInboxModal .inbox-preview-panel {
        flex: 1 1 auto;
        min-height: 250px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    #evaDockPane #automationInboxModal .inbox-destination-panel {
        flex: 0 0 auto;
        grid-column: auto;
    }
}

@container boardeva-dock (max-width: 400px) {
    #evaDockPane #askEvaModal .eva-workspace-header {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 7px;
    }

    #evaDockPane #askEvaModal .eva-header-actions {
        width: 100%;
        justify-content: flex-end;
    }

    #evaDockPane #askEvaModal .eva-brand-mark-wrap {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    #evaDockPane #askEvaModal .eva-brand-mark-wrap > .eva-presence-light {
        width: 28px;
        height: 28px;
    }
}

/* EnhancedBox-backed application dialogs */
.boardeva-dialog-box { max-width: min(92vw, 520px); min-width: min(320px, 92vw); }
.boardeva-dialog-box .boardeva-dialog-copy { line-height: 1.55; white-space: normal; }
.boardeva-dialog-box .message-input { min-width: 0; width: 100%; }
.boardeva-dialog-fallback-backdrop { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(4, 7, 12, .62); backdrop-filter: blur(8px); }
.boardeva-dialog-fallback { width: min(520px, 92vw); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 22px; color: #f8fafc; background: rgba(26, 29, 36, .96); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.boardeva-dialog-fallback-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.boardeva-dialog-fallback-message { line-height: 1.55; }
.boardeva-dialog-fallback-input { display: block; width: 100%; box-sizing: border-box; margin-top: 16px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.08); }
.boardeva-dialog-fallback-close { float: right; border: 0; background: transparent; color: rgba(255,255,255,.7); font-size: 1.5rem; cursor: pointer; }

/* Chromium exposes each native increment/decrement button as a directional
   pseudo-element. Hide every variant explicitly; the generic rule alone does
   not suppress the Windows-themed triangles in smaller/overlay scrollbars. */
*::-webkit-scrollbar-button:horizontal:decrement,
*::-webkit-scrollbar-button:horizontal:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:start:decrement,
*::-webkit-scrollbar-button:end:increment,
*::-webkit-scrollbar-button:single-button:horizontal:decrement,
*::-webkit-scrollbar-button:single-button:horizontal:increment,
*::-webkit-scrollbar-button:single-button:vertical:decrement,
*::-webkit-scrollbar-button:single-button:vertical:increment {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

#columnsContainer::-webkit-scrollbar-button:horizontal:decrement,
#columnsContainer::-webkit-scrollbar-button:horizontal:increment,
#columnsContainer::-webkit-scrollbar-button:vertical:decrement,
#columnsContainer::-webkit-scrollbar-button:vertical:increment,
.app-header .board-tabs::-webkit-scrollbar-button:horizontal:decrement,
.app-header .board-tabs::-webkit-scrollbar-button:horizontal:increment,
.app-header .board-tabs::-webkit-scrollbar-button:vertical:decrement,
.app-header .board-tabs::-webkit-scrollbar-button:vertical:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Board tabs can overflow in narrow/split headers too. Keep their scrollbar
   hidden until the pointer or keyboard focus is inside the header. */
.app-header .board-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

.app-header .board-tabs:hover,
.app-header .board-tabs:focus-within {
    scrollbar-color: rgba(255, 255, 255, .55) transparent;
}

.app-header .board-tabs::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 6px;
}

.app-header .board-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.app-header .board-tabs::-webkit-scrollbar-button,
.app-header .board-tabs::-webkit-scrollbar-corner {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.app-header .board-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .55);
    border-radius: 999px;
}

.app-header .board-tabs:hover::-webkit-scrollbar-thumb,
.app-header .board-tabs:focus-within::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .55);
}

/* Board and card surfaces are content panes, not links. Keep the native arrow
   cursor over their empty/content areas while retaining explicit affordances
   for drag handles and controls. */
#columnsContainer > .column,
#columnsContainer .card {
    cursor: default;
}

/* Board surfaces are work areas, not elevated cards. Keep the blue selection
   overlay as the only emphasis instead of stacking a dark drop shadow. */
#columnsContainer > .column,
#columnsContainer > .column:hover,
#columnsContainer .card,
#columnsContainer .card:hover,
#columnsContainer .card.active-card {
    box-shadow: none !important;
}

/* Selection uses the same quiet white keyline everywhere. The previous blue
   overlay made selected cards and provider choices look focused rather than
   selected, especially on the dark glass surfaces. */
.column.column-selected::after,
.card.card-selected::after {
    opacity: 0 !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.card.card-selected,
.card.active-card {
    border-color: rgba(255, 255, 255, .9) !important;
    outline: none !important;
    outline-offset: 0 !important;
}

.boardeva-eva-provider-option.is-selected,
.boardeva-tour-option.is-selected,
.boardeva-tour-personality-btn.is-selected {
    border-color: rgba(255, 255, 255, .9) !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, .045) !important;
}

/* Mobile keeps the same overflow behavior without exposing scrollbar rails.
   Tabs use installMobileBoardTabsScroller() for direct pointer/touch dragging,
   while columns and feature panes remain natively scrollable. */
@media (max-width: 768px) {
    .app-header .board-tabs,
    #columnsContainer,
    #columnsContainer.mobile-column-pager-enabled,
    .inbox-modal-body,
    .eva-workspace-body,
    .eva-conversation,
    .eva-dock-pane {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .app-header .board-tabs {
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .app-header .board-tabs::-webkit-scrollbar,
    #columnsContainer::-webkit-scrollbar,
    #columnsContainer.mobile-column-pager-enabled::-webkit-scrollbar,
    .inbox-modal-body::-webkit-scrollbar,
    .eva-workspace-body::-webkit-scrollbar,
    .eva-conversation::-webkit-scrollbar,
    .eva-dock-pane::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
}

/* Search uses the edit-modal surface directly. */
#searchModal .modal-content {
    background: rgba(20, 20, 20, 0.6) !important;
    background-color: rgba(20, 20, 20, 0.6) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Edit dialogs also sit over Bootstrap's half-black page backdrop. Inbox and
   Eva intentionally remain non-blocking, so this local 80% layer reproduces
   the same final darkness without adding a screen-wide backdrop. Nested
   panels stay clear so the alpha is applied only once. */
#automationInboxModal .inbox-modal-content,
.eva-dock-pane,
#askEvaModal .eva-modal-content,
#askEvaModal .eva-workspace {
    background: rgba(15, 15, 15, 0.8) !important;
    background-color: rgba(15, 15, 15, 0.8) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* The shared dock owns the edit-modal layer in dock mode. */
#evaDockPane #askEvaModal .eva-modal-content,
#evaDockPane #askEvaModal .eva-workspace,
#evaDockPane #automationInboxModal .inbox-modal-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

#automationInboxModal .modal-header,
#automationInboxModal .inbox-modal-body,
#automationInboxModal .inbox-queue-panel,
#automationInboxModal .inbox-preview-panel,
#automationInboxModal .inbox-destination-panel,
#automationInboxModal .inbox-history-panel,
#automationInboxModal .inbox-sources-panel,
#automationInboxModal .inbox-modal-footer,
#askEvaModal .eva-workspace-header,
#askEvaModal .eva-workspace-body,
#askEvaModal .eva-main {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Icon-only actions should read as glyphs, not nested dark buttons. */
#automationInboxModal .interface-close-button,
#askEvaModal .eva-modal-close,
#automationInboxModal #inboxHistoryBtn,
#automationInboxModal #inboxGettingStartedBtn,
#askEvaModal .eva-history-toggle,
#askEvaModal .eva-dock-toggle {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    filter: none !important;
}

#automationInboxModal .interface-close-button i,
#askEvaModal .eva-modal-close i,
#automationInboxModal #inboxHistoryBtn i,
#automationInboxModal #inboxGettingStartedBtn i,
#askEvaModal .eva-history-toggle i,
#askEvaModal .eva-dock-toggle i {
    color: #fff !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Give a dragged mobile tab strip immediate visual feedback without changing
   its scroll position or the tab hit targets. */
.app-header .board-tabs.board-tabs-pointer-dragging {
    cursor: grabbing !important;
    animation: boardeva-tabs-drag-pulse 220ms ease-out both;
}

.app-header .board-tabs.board-tabs-pointer-dragging .board-tab {
    transform: translateY(-1px) scale(.99);
    transition: transform 140ms ease-out;
}

@keyframes boardeva-tabs-drag-pulse {
    0% { transform: translateY(0); box-shadow: 0 0 0 rgba(99, 179, 237, 0); }
    100% { transform: translateY(-1px); box-shadow: 0 3px 16px rgba(99, 179, 237, .24); }
}

@media (prefers-reduced-motion: reduce) {
    .app-header .board-tabs.board-tabs-pointer-dragging {
        animation: none !important;
    }

    .app-header .board-tabs.board-tabs-pointer-dragging .board-tab {
        transition: none !important;
    }
}

/* Titles and grouping labels should never enter text-selection mode during a
   click-drag gesture. */
#columnsContainer .column-header,
#columnsContainer .column-header *,
#columnsContainer .card-title,
#columnsContainer .card-title *,
#columnsContainer .card-group-header,
#columnsContainer .card-group-header *,
#columnsContainer .card-header,
#columnsContainer .card-header * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Settings is a control panel; only its form fields remain text-selectable. */
#settingsModal,
#settingsModal .modal-content,
#settingsModal .modal-body,
#settingsModal .settings-sidebar,
#settingsModal .settings-sidebar *,
#settingsModal .settings-content,
#settingsModal .settings-content * {
    -webkit-user-select: none !important;
    user-select: none !important;
}

#settingsModal input,
#settingsModal textarea,
#settingsModal [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
}

#settingsModal select {
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Keep workspace, filter, sync, Inbox, and Eva controls on one consistent
   rhythm, with the workspace picker aligned to the tab strip inset. */
.header-actions,
.header-actions-left,
.header-actions-right {
    gap: 12px;
}

.header-actions > *,
.header-actions-left > *,
.header-actions-right > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header-actions .workspace-board-picker-btn {
    margin-left: 4px !important;
}

.header-actions .workspace-board-picker {
    overflow: hidden !important;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn { margin-left: 0 !important; }
.header-actions .workspace-board-picker > .workspace-board-picker-btn:hover,
.header-actions .workspace-board-picker > .workspace-board-picker-btn:focus-visible,
.header-actions .workspace-board-picker-menu-toggle:hover,
.header-actions .workspace-board-picker-menu-toggle:focus-visible {
    background: rgba(255,255,255,.12) !important;
}

#columnsContainer > .column .column-header {
    cursor: move;
}

#columnsContainer > .column button,
#columnsContainer > .column a,
#columnsContainer > .column input,
#columnsContainer > .column textarea,
#columnsContainer > .column select,
#columnsContainer > .column .card-image-frame,
#columnsContainer > .column .card-mastery-badge {
    cursor: pointer;
}

/* Compact frameless desktop action packing. Real phones do not receive the
   desktop-frameless class, so their existing two-part mobile header remains. */
@media (max-width: 768px) {
    html.desktop-frameless .app-header .inbox-header-action {
        padding-right: 0;
    }

    html.desktop-frameless .app-header.split-header .desktop-header-row {
        display: flex;
        align-items: center;
        gap: 0;
    }

    html.desktop-frameless .app-header.split-header .header-actions {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
        justify-content: flex-start;
    }

    html.desktop-frameless .app-header.split-header .header-actions-left,
    html.desktop-frameless .app-header.split-header .header-actions-right {
        display: flex;
        flex: 0 0 auto;
        min-width: 0;
        max-width: none;
        gap: 10px;
        overflow: visible;
    }

    html.desktop-frameless .app-header.split-header .header-actions-left {
        margin-left: 0 !important;
    }

    html.desktop-frameless .app-header.split-header .header-actions-right {
        margin-left: auto !important;
    }

    html.desktop-frameless .app-header.split-header .header-actions .space-dropdown-toggle,
    html.desktop-frameless .app-header.split-header .header-actions .prism-sync-widget,
    html.desktop-frameless .app-header.split-header .header-actions .inbox-header-btn,
    html.desktop-frameless .app-header.split-header .header-actions .eva-header-button,
    html.desktop-frameless .app-header.split-header .header-actions .user-menu-btn,
    html.desktop-frameless .app-header.split-header.header-labels-compact .header-actions .space-dropdown-toggle,
    html.desktop-frameless .app-header.split-header.header-labels-compact .header-actions .prism-sync-widget,
    html.desktop-frameless .app-header.split-header.header-labels-compact .header-actions .inbox-header-btn,
    html.desktop-frameless .app-header.split-header.header-labels-compact .header-actions .eva-header-button,
    html.desktop-frameless .app-header.split-header.header-labels-compact .header-actions .user-menu-btn {
        box-sizing: border-box;
        width: var(--header-control-height) !important;
        min-width: var(--header-control-height) !important;
        max-width: var(--header-control-height) !important;
        height: var(--header-control-height) !important;
        min-height: var(--header-control-height) !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    html.desktop-frameless .app-header.split-header .inbox-header-action {
        padding-right: 0;
    }

    html.desktop-frameless .app-header.split-header .window-drag-region {
        display: none;
    }

    html.desktop-frameless .app-header.split-header .window-controls {
        display: flex;
        flex: 0 0 auto;
        gap: 0;
        margin-left: auto;
    }

    html.desktop-frameless .app-header.split-header .header-actions .workspace-board-picker-btn {
        margin-left: 0 !important;
    }
}

/* Frameless desktop toolbars keep the primary actions evenly spaced. The
   Inbox badge wrapper is kept flush so it cannot add a second hidden margin. */
html.desktop-frameless .app-header .header-actions-left,
html.desktop-frameless .app-header .header-actions-right {
    gap: 10px;
}

html.desktop-frameless .app-header .inbox-header-action {
    margin: 0 !important;
    padding-right: 0 !important;
}

/* Bootstrap's ms-2 classes live on the Inbox button itself, while Eva is a
   sibling control. Remove that hidden child margin so the shared header gap
   is the only spacing between the two controls. */
.app-header .header-actions-right .inbox-header-action > .inbox-header-btn,
.app-header .header-actions-right > .eva-header-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.app-header .header-actions-right .inbox-header-action {
    padding-right: 0 !important;
}

/* Keep the compact right controls as one balanced cluster. The profile
   control is the final item, so its outer edge should land on the same header
   inset as the left controls instead of inheriting a hidden Bootstrap margin
   or the Inbox badge wrapper's breathing room. */
@media (max-width: 768px) {
    .app-header.split-header .header-actions {
        padding-right: 0 !important;
    }

    .app-header.split-header .header-actions-right,
    .app-header.split-header .header-actions-right-start {
        align-items: center;
        justify-content: flex-end;
        gap: 10px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    .app-header.split-header .header-actions-right > *,
    .app-header.split-header .header-actions-right .inbox-header-action,
    .app-header.split-header .header-actions-right .user-menu-btn,
    .app-header.split-header .header-actions-right .eva-header-button {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile modal surfaces use the viewport as their frame. Several individual
   modal rules above intentionally size desktop/compact surfaces with small
   gutters; this final mobile contract removes those gutters consistently for
   Settings, Board, Column, Card, Inbox, Eva, and embedded reader/editor views.
   Internal bodies keep their own scrolling and panel borders. */
@media (max-width: 768px) {
    .modal.show {
        padding: 0 !important;
    }

    .modal.show .modal-dialog {
        box-sizing: border-box;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        transform: none !important;
    }

    .modal.show .modal-content {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .modal.show .modal-dialog-scrollable .modal-content {
        max-height: none !important;
    }

    .modal.show .modal-dialog > .modal-content > .modal-body {
        min-height: 0;
        overflow-y: auto;
    }

    /* Preserve the settings split-pane's nested scroller. */
    #settingsModal .settings-dialog,
    #settingsModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    #settingsModal .modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    #settingsModal .modal-body {
        overflow: hidden;
    }

    /* Inbox and Eva have custom scroll regions, but their outer shells are
       still flush with the phone/compact viewport. */
    #automationInboxModal .inbox-modal-dialog,
    #automationInboxModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    #automationInboxModal .inbox-modal-content {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #automationInboxModal .inbox-modal-body {
        min-height: 0;
        overflow-y: auto;
    }

    #askEvaModal .eva-workspace-dialog,
    #askEvaModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    #askEvaModal .eva-workspace,
    #askEvaModal .eva-modal-content {
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #askEvaModal .eva-workspace-body {
        min-height: 0;
    }

    /* These embedded surfaces already own their scrolling and should not
       regain the desktop rounded frame at phone widths. */
    #mdReaderModal .modal-dialog,
    #mdEditorModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
    }

    #mdReaderModal .modal-content,
    #mdEditorModal .modal-content {
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* Search remains borderless on compact screens, but begins below the live
   header/tab rows instead of covering them. The renderer supplies the exact
   offset because the header may use one or two rows. */
@media (max-width: 768px) {
    #searchModal .modal-dialog {
        width: 100vw !important;
        max-width: none !important;
        height: calc(100vh - var(--search-modal-top-offset, 112px)) !important;
        height: calc(100dvh - var(--search-modal-top-offset, 112px)) !important;
        min-height: 0 !important;
        margin: 0 !important;
        margin-top: var(--search-modal-top-offset, 112px) !important;
    }

    #searchModal .modal-content {
        height: 100% !important;
        min-height: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .multi-card-selection-bar {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom));
        width: auto;
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        transform: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px;
        border-radius: 14px;
    }

    .multi-card-selection-bar #multiCardSelectionCount {
        flex: 1 0 100%;
        margin-right: 0 !important;
        text-align: center;
    }

    .multi-card-selection-bar .dropdown,
    .multi-card-selection-bar .btn {
        min-width: 0;
        max-width: 100%;
    }

    .multi-card-selection-bar #clearMultiSelectionBtn {
        margin-left: 0 !important;
    }

    .multi-card-selection-bar.boardeva-selection-bar-enter {
        animation: boardeva-selection-bar-rise-mobile 240ms cubic-bezier(.22, 1, .36, 1) both;
    }

    .multi-card-selection-bar.boardeva-selection-bar-exit {
        animation: boardeva-selection-bar-drop-mobile 220ms cubic-bezier(.55, 0, .78, .22) both;
    }
}

@keyframes boardeva-selection-bar-rise-mobile {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes boardeva-selection-bar-drop-mobile {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(28px); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .multi-card-selection-bar.boardeva-selection-bar-enter,
    .multi-card-selection-bar.boardeva-selection-bar-exit {
        animation: none !important;
    }
}

/* Eva's provider identity stays legible in compact headers; full connection
   details live in a small in-surface popover instead of crowding the toolbar. */
#askEvaModal .eva-provider-control {
    position: relative;
    flex: 0 1 auto;
    min-width: 34px;
}

#askEvaModal .eva-provider-status {
    width: auto;
    min-width: 38px;
    max-width: 148px;
    gap: 6px;
    padding: 0 9px;
    white-space: nowrap;
}

#askEvaModal .eva-provider-icon {
    flex: 0 0 auto;
    font-size: 12px;
}

#askEvaModal .eva-provider-dot {
    flex: 0 0 7px;
}

#askEvaModal .eva-provider-name {
    display: block !important;
    min-width: 0;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#askEvaModal .eva-provider-status .eva-provider-name {
    display: block !important;
}

#askEvaModal .eva-provider-details {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 60;
    display: grid;
    gap: 6px;
    width: min(290px, calc(100vw - 24px));
    padding: 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    background: rgba(21,23,25,.98);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0,0,0,.38);
}

#askEvaModal .eva-provider-details[hidden] {
    display: none !important;
}

#askEvaModal .eva-provider-details-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

#askEvaModal .eva-provider-details-heading strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .84rem;
}

#askEvaModal .eva-provider-details-state {
    flex: 0 0 auto;
    color: #81e6a8;
    font-size: .66rem;
    font-weight: 700;
}

#askEvaModal .eva-provider-details-provider,
#askEvaModal .eva-provider-details-model,
#askEvaModal .eva-provider-details-route {
    color: rgba(255,255,255,.62);
    font-size: .72rem;
    overflow-wrap: anywhere;
}

#askEvaModal .eva-provider-configure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    margin-top: 4px;
    border: 1px solid rgba(255,174,61,.35);
    border-radius: 8px;
    background: rgba(255,153,20,.12);
    color: #ffd38a;
    font-size: .74rem;
    font-weight: 700;
}

#askEvaModal .eva-provider-configure:hover,
#askEvaModal .eva-provider-configure:focus-visible {
    border-color: rgba(255,174,61,.7);
    background: rgba(255,153,20,.2);
    outline: 2px solid rgba(255,211,138,.5);
    outline-offset: 2px;
}

/* Eva's welcome/conversation is the scroll region; the growing composer and
   its privacy controls remain a stable footer in modal and docked modes. */
#askEvaModal .eva-main {
    overflow: hidden;
}

#askEvaModal .eva-welcome {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#askEvaModal .eva-composer-dock {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    width: 100%;
    padding-top: 7px;
    background: linear-gradient(180deg, rgba(18,20,21,0), rgba(18,20,21,.94) 14px);
}

#askEvaModal .eva-composer textarea {
    max-height: min(160px, 24dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (max-width: 560px) {
    #askEvaModal .eva-workspace-header {
        gap: 8px;
        padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right));
    }

    #askEvaModal .eva-header-actions {
        flex: 0 0 auto;
        gap: 5px;
    }

    #askEvaModal .eva-provider-status {
        max-width: 104px;
        min-height: 34px;
        padding-inline: 7px;
    }

    #askEvaModal .eva-provider-name {
        max-width: 58px;
        font-size: .68rem;
    }

    #askEvaModal .eva-getting-started {
        width: 34px;
        min-width: 34px;
        padding: 0;
        justify-content: center;
    }

    #askEvaModal .eva-getting-started span {
        display: none;
    }

    #askEvaModal .eva-main {
        padding: 10px max(12px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
    }

    #askEvaModal .eva-composer-dock {
        padding-top: 5px;
        padding-bottom: max(4px, env(safe-area-inset-bottom));
    }

    #askEvaModal .eva-composer {
        gap: 7px;
        padding: 7px;
        border-radius: 12px;
    }

    #askEvaModal .eva-composer textarea {
        max-height: min(132px, 22dvh);
        padding-block: 7px;
    }

    #askEvaModal .eva-composer-meta {
        min-height: 24px;
        padding-top: 5px;
    }

    #askEvaModal .eva-save-control {
        font-size: .67rem;
    }
}

@media (max-width: 390px) {
    #askEvaModal .eva-brand {
        gap: 6px;
    }

    #askEvaModal .eva-brand-mark-wrap {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    #askEvaModal .eva-brand-mark-wrap > .eva-presence-light {
        width: 30px;
        height: 30px;
    }

    #askEvaModal .eva-context-label {
        max-width: 74px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #askEvaModal .eva-provider-name {
        max-width: 46px;
    }

    #askEvaModal .eva-history-sidebar-toggle,
    #askEvaModal .eva-dock-toggle,
    #askEvaModal .eva-modal-close {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }
}

/* Inbox phone layout is a queue/detail flow with a fixed action rail. */
@media (max-width: 620px) {
    #automationInboxModal .inbox-modal-content {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        min-height: 0 !important;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

    #automationInboxModal .modal-header {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        min-height: 62px;
        padding: 9px 11px;
    }

    #automationInboxModal .modal-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    #automationInboxModal .modal-header > div:last-child {
        display: flex;
        flex: 0 0 auto;
        gap: 4px !important;
        min-width: 0;
    }

    #automationInboxModal .modal-header .btn,
    #automationInboxModal .interface-close-button {
        width: 34px;
        min-width: 34px;
        height: 34px;
        flex: 0 0 34px;
        justify-content: center;
        padding: 0;
    }

    #automationInboxModal #inboxSourcesBtn span,
    #automationInboxModal #inboxCreateBtn span {
        display: none !important;
    }

    #automationInboxModal .modal-header .btn .me-1 {
        margin: 0 !important;
    }

    #automationInboxModal .inbox-modal-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    #automationInboxModal .inbox-queue-panel,
    #automationInboxModal .inbox-preview-panel,
    #automationInboxModal .inbox-destination-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-queue {
        overflow: hidden;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-queue .inbox-queue-panel {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        max-height: none;
        overflow: hidden;
        border: 0;
        padding: 12px;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-queue .inbox-queue-list {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding-bottom: 8px;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-queue .inbox-preview-panel,
    #automationInboxModal .inbox-modal-body.is-mobile-queue .inbox-destination-panel,
    #automationInboxModal .inbox-modal-body.is-mobile-empty .inbox-queue-panel,
    #automationInboxModal .inbox-modal-body.is-mobile-empty .inbox-destination-panel {
        display: none !important;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-empty {
        overflow: auto;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-empty .inbox-preview-panel {
        display: grid;
        flex: 1 1 auto;
        place-items: center;
        padding: 18px 16px;
        border: 0;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-detail {
        overflow-x: hidden;
        overflow-y: auto;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-detail .inbox-queue-panel {
        display: none !important;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-detail .inbox-preview-panel {
        display: block;
        flex: 0 0 auto;
        overflow: visible;
        padding: 12px;
        border: 0;
    }

    #automationInboxModal .inbox-modal-body.is-mobile-detail .inbox-destination-panel {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        overflow: visible;
        padding: 12px;
        border: 0;
        border-top: 1px solid rgba(255,255,255,.14);
    }

    #automationInboxModal .inbox-destination-panel .form-select {
        flex: 1 1 130px;
        min-width: 0;
        max-width: 100%;
    }

    #automationInboxModal .inbox-destination-heading,
    #automationInboxModal .inbox-suggestion-note {
        flex: 1 0 100%;
    }

    #automationInboxModal .inbox-modal-footer {
        display: grid;
        flex: 0 0 auto;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 0;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid rgba(255,255,255,.14);
        background: rgba(18,20,21,.96);
    }

    #automationInboxModal .inbox-modal-footer > .ms-auto {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0 !important;
    }

    #automationInboxModal #inboxAddBtn {
        width: 100%;
        min-height: 42px;
    }

    #automationInboxModal .inbox-modal-body.is-history {
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    #automationInboxModal .inbox-modal-body.is-history .inbox-history-panel {
        display: block;
        min-height: 0;
        padding: 12px;
    }

    #automationInboxModal .inbox-modal-body.is-history ~ .inbox-modal-footer {
        display: none;
    }

    #automationInboxModal .inbox-mobile-back {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 34px;
        margin: 0 0 10px;
        padding: 0 9px;
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 8px;
        background: rgba(255,255,255,.06);
        color: rgba(255,255,255,.86);
        font-size: .76rem;
    }

    #automationInboxModal .inbox-minimal-empty {
        width: 100%;
        min-height: 0;
        padding: 16px 8px;
    }

    #automationInboxModal .inbox-minimal-empty h3 {
        font-size: 1.25rem;
    }

    #automationInboxModal .inbox-minimal-empty .inbox-welcome-copy {
        max-width: 360px;
        margin: 0;
        font-size: .82rem;
        line-height: 1.5;
    }

    #automationInboxModal .inbox-minimal-actions {
        width: 100%;
        max-width: 360px;
    }

    #automationInboxModal .inbox-minimal-actions .btn {
        flex: 1 1 145px;
        min-height: 42px;
    }
}

@media (min-width: 621px) {
    #automationInboxModal .inbox-mobile-back {
        display: none;
    }
}

#evaDockPane #askEvaModal .eva-provider-status {
    width: auto !important;
    min-width: 38px !important;
    max-width: 142px;
    padding-inline: 8px !important;
}

#evaDockPane #askEvaModal .eva-provider-status .eva-provider-name {
    display: block !important;
    max-width: 84px;
}

/* A phone viewport may become shorter while Eva is open (for example when
   the on-screen keyboard appears). Do not let the desktop workspace's
   560px/initial-viewport minimum height push the composer below the screen. */
@media (max-width: 768px) {
    #askEvaModal .eva-workspace-dialog {
        min-height: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    #askEvaModal .eva-workspace,
    #askEvaModal .eva-modal-content {
        min-height: 0 !important;
        max-height: 100% !important;
        height: 100% !important;
    }
}

/* Floating Inbox/Eva surfaces begin after the complete board header (actions
   plus tabs). The header height is measured by kanban.js because the split
   layout and responsive controls can change it at runtime. Docked surfaces
   live inside #evaDockPane and retain that pane's own geometry. */
body > #automationInboxModal.show,
body > #askEvaModal.show {
    top: var(--boardeva-floating-surface-top, 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
}

body > #automationInboxModal.show > .modal-dialog,
body > #askEvaModal.show > .modal-dialog {
    box-sizing: border-box;
    width: min(1240px, calc(100vw - 32px));
    max-width: none;
    height: calc(100% - 16px);
    max-height: none;
    margin: 8px auto !important;
    transform: none !important;
}

body > #automationInboxModal.show > .modal-dialog > .inbox-modal-content,
body > #askEvaModal.show > .modal-dialog > .eva-workspace {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}

body > #askEvaModal.show > .modal-dialog {
    width: min(1120px, calc(100vw - 24px));
}

@media (max-width: 768px) {
    /* Keep the mobile shells full width while reserving the live header rows. */
    body > #automationInboxModal.show,
    body > #askEvaModal.show {
        height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
    }

    body > #automationInboxModal.show > .modal-dialog,
    body > #askEvaModal.show > .modal-dialog {
        width: 100vw !important;
        height: 100% !important;
        margin: 0 !important;
    }

    body > #automationInboxModal.show > .modal-dialog > .inbox-modal-content,
    body > #askEvaModal.show > .modal-dialog > .eva-workspace {
        height: 100% !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }
}

/* Inbox keeps its content scrollable when a short desktop window cannot fit
   the usual minimum-height review grid below the application header. */
@media (min-width: 769px) and (max-height: 680px) {
    body > #automationInboxModal.show > .modal-dialog > .inbox-modal-content {
        display: flex;
        min-height: 0 !important;
        flex-direction: column;
    }

    body > #automationInboxModal.show > .modal-dialog > .inbox-modal-content > .inbox-modal-body {
        flex: 1 1 auto;
        min-height: 0 !important;
        grid-template-rows: minmax(0, 1fr);
        overflow-y: auto !important;
    }
}

/* Final dock-width overrides run after the shared dock provider sizing. */
@container boardeva-dock (min-width: 761px) and (max-width: 900px) {
    #evaDockPane #automationInboxModal .inbox-modal-body {
        display: grid;
        grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
        grid-template-rows: minmax(0, 1fr) auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #evaDockPane #automationInboxModal .inbox-queue-panel,
    #evaDockPane #automationInboxModal .inbox-preview-panel,
    #evaDockPane #automationInboxModal .inbox-destination-panel {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    #evaDockPane #automationInboxModal .inbox-destination-panel {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-content: start;
        border-top: 1px solid rgba(255, 255, 255, .12);
        border-right: 0;
    }
}

@container boardeva-dock (max-width: 760px) {
    #evaDockPane #askEvaModal .eva-provider-status {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding-inline: 0 !important;
    }

    #evaDockPane #askEvaModal .eva-provider-status .eva-provider-name {
        display: none !important;
    }
}

/* Shared header control rhythm: roomier, equal-height actions with matching
   circular icon targets and the same subtle elevation across the toolbar. */
.header-actions {
    --header-control-height: 44px;
    gap: 10px !important;
}

.header-actions-left,
.header-actions-right {
    gap: 10px !important;
}

.app-header .header-actions-left,
.app-header .header-actions-right {
    column-gap: 10px !important;
}

.app-header .header-actions-right .inbox-header-action {
    padding-inline: 0 !important;
}

html.desktop-frameless .desktop-header-row {
    gap: 10px !important;
    column-gap: 10px !important;
}

html.desktop-frameless .desktop-header-row .header-actions-right-start {
    /* Grid placement in frameless mode otherwise leaves only 8px between the
       left and right clusters. Restore the requested 10px visible gutter. */
    margin-left: 2px !important;
}

.header-actions .workspace-board-picker-btn,
.header-actions #filterDropdown,
.header-actions .prism-sync-widget,
.header-actions .sync-widget,
.header-actions .plan-badge-btn,
.header-actions .inbox-header-btn,
.header-actions .eva-header-button,
.header-actions .user-menu-btn,
.header-actions .header-icon-btn {
    box-sizing: border-box;
    height: var(--header-control-height) !important;
    min-height: var(--header-control-height) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22),
                0 1px 0 rgba(255, 255, 255, .12) inset;
}

.header-actions .workspace-board-picker-btn,
.header-actions #filterDropdown,
.header-actions .prism-sync-widget,
.header-actions .sync-widget,
.header-actions .plan-badge-btn,
.header-actions .inbox-header-btn {
    border-radius: 22px !important;
}

.header-actions .workspace-board-picker-btn,
.header-actions #filterDropdown,
.header-actions .prism-sync-widget,
.header-actions .sync-widget,
.header-actions .plan-badge-btn,
.header-actions .inbox-header-btn,
.header-actions .header-action-with-text {
    padding-inline: 14px !important;
}

.header-actions #planBadgeBtn {
    margin: 0 !important;
}

.header-actions #filterDropdown,
.header-actions #planBadgeBtn:not(.header-action-with-text),
.header-actions .user-menu-btn,
.header-actions .header-icon-btn,
.header-actions .eva-header-button,
.header-actions .workspace-board-picker-btn-icon-only {
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Icon-only toolbar actions use one circular hit area, border, and elevation.
   Keep the free-plan Upgrade action in this shared treatment too; without an
   explicit width it rendered as a narrow oval instead of a peer icon button. */
.header-actions .workspace-board-picker-btn-icon-only,
.header-actions #filterDropdown:not(.header-action-with-text),
.header-actions #planBadgeBtn:not(.header-action-with-text) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    height: var(--header-control-height) !important;
    min-height: var(--header-control-height) !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22),
                0 1px 0 rgba(255, 255, 255, .12) inset !important;
}

.header-actions #filterDropdown.header-action-with-text,
.header-actions .workspace-board-picker-btn.header-action-with-text,
.header-actions .inbox-header-btn.header-action-with-text,
.header-actions .eva-header-button.header-action-with-text,
.header-actions .prism-sync-widget.header-action-with-text,
.header-actions .sync-widget.header-action-with-text {
    width: auto !important;
    min-width: var(--header-control-height) !important;
    max-width: none !important;
    padding-inline: 14px !important;
    border-radius: 22px !important;
}

.header-actions .prism-sync-widget,
.header-actions .sync-widget {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header-actions .filter-header-action {
    margin: 0 !important;
}

/* Compact windows use icon-only Workspace and Filter actions while retaining
   their accessible names. This override wins over the text-enabled pill rules
   above without changing the saved desktop preference. */
@media (max-width: 959px) {
    .app-header .header-actions {
        --header-control-height: 36px;
    }
}

/* In two-row mode, board tabs have room to reveal more of each title. Keep
   the label to two lines and reserve space for the icon and close control. */
.app-header.split-header .board-tab {
    min-width: min(var(--tab-min-width, 120px), 42vw);
    max-width: 42vw;
    white-space: normal;
    align-items: center;
}

.app-header.split-header .board-tab .board-icon,
.app-header.split-header .board-tab .delete-board {
    flex: 0 0 auto;
}

.app-header.split-header .board-tab .board-name {
    display: -webkit-box;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

@media (max-width: 768px) {
    .header-actions,
    .header-actions-left,
    .header-actions-right,
    html.desktop-frameless .app-header.split-header .header-actions-left,
    html.desktop-frameless .app-header.split-header .header-actions-right {
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    /* The modal's top edge is below the board header, so 100vh on its dialog
       extends past the viewport and pushes the Inbox action rail off-screen. */
    body > #automationInboxModal.show > .modal-dialog {
        height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
    }

    body > #automationInboxModal.show > .modal-dialog > .inbox-modal-content {
        height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
        max-height: calc(100dvh - var(--boardeva-floating-surface-top, 8px)) !important;
        min-height: 0 !important;
    }

}
body.boardeva-performance-strict *,
body.boardeva-performance-strict *::before,
body.boardeva-performance-strict *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

body.boardeva-performance-strict .background-layer,
body.boardeva-performance-strict #bgOverlay {
    display: none !important;
}

body.boardeva-performance-no-wallpapers .background-layer,
body.boardeva-performance-no-wallpapers #bgOverlay {
    display: none !important;
}

body.boardeva-performance-no-glass *,
body.boardeva-performance-no-glass *::before,
body.boardeva-performance-no-glass *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.boardeva-performance-no-animations *,
body.boardeva-performance-no-animations *::before,
body.boardeva-performance-no-animations *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
}

body.boardeva-performance-no-link-previews .card-live-link-preview,
body.boardeva-performance-no-link-previews [data-card-link-preview-host] {
    display: none !important;
}


/* Visual workspace launcher */
.workspace-launcher-modal .workspace-launcher-dialog {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
    margin: 16px auto;
}

.workspace-launcher-modal .workspace-launcher-surface {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(820px, calc(100dvh - 32px));
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 18px;
    background: rgba(24, 29, 42, .86) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.48);
    color: var(--text-primary);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    backdrop-filter: blur(24px) saturate(1.2);
}

.workspace-launcher-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    padding: 16px 18px;
}

.workspace-launcher-header {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.workspace-launcher-heading,
.workspace-launcher-header-actions {
    display: flex;
    align-items: center;
}

.workspace-launcher-heading { min-width: 0; gap: 12px; }
.workspace-launcher-heading-copy { min-width: 0; }
.workspace-launcher-heading h2 { margin: 0; font-size: 1.08rem; font-weight: 700; }
.workspace-launcher-heading p { margin: 3px 0 0; color: var(--text-secondary); font-size: .82rem; }
.workspace-launcher-mark { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 11px; color: #d8e5ff; background: rgba(99,142,222,.2); }
.workspace-launcher-header-actions { gap: 7px; flex: 0 0 auto; }

.workspace-launcher-icon-button {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.06);
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.workspace-launcher-icon-button > i { display: block; flex: 0 0 auto; line-height: 1; }

.workspace-launcher-icon-button:hover,
.workspace-launcher-icon-button:focus-visible { border-color: rgba(255,255,255,.27); color: white; background: rgba(255,255,255,.13); }
.workspace-launcher-icon-button:active { transform: scale(.96); }
.workspace-launcher-icon-button:focus-visible,
.workspace-launcher-card:focus-within,
.workspace-launcher-add-card:focus-visible { outline: 2px solid #86b7fe; outline-offset: 2px; }

.workspace-launcher-learn-link {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 11px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    background: rgba(255,255,255,.06);
    font-size: .82rem;
    white-space: nowrap;
}

.workspace-launcher-learn-link:hover,
.workspace-launcher-learn-link:focus-visible { border-color: rgba(255,255,255,.27); color: #fff; background: rgba(255,255,255,.13); }
.workspace-launcher-learn-link:focus-visible { outline: 2px solid #86b7fe; outline-offset: 2px; }

.workspace-launcher-search-wrap {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    margin: 14px 18px 2px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    color: rgba(255,255,255,.62);
    background: rgba(0,0,0,.16);
}

.workspace-launcher-search-wrap:focus-within { border-color: rgba(119,166,255,.72); box-shadow: 0 0 0 3px rgba(91,143,245,.14); }
.workspace-launcher-search-wrap > i { flex: 0 0 auto; }
.workspace-launcher-search.form-control { min-width: 0; padding: 10px 0; border: 0; outline: 0; box-shadow: none; color: white; background: transparent; }
.workspace-launcher-search.form-control:focus { border: 0; box-shadow: none; }
.workspace-launcher-search.form-control::-webkit-search-cancel-button { filter: grayscale(1) brightness(2); }
.workspace-launcher-search-wrap kbd { padding: 2px 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.06); font-size: 10px; }

.workspace-launcher-body { min-height: 0; padding: 14px 18px 18px; overflow: auto; overscroll-behavior: contain; }
.workspace-launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.workspace-launcher-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.28 / 1;
    min-height: 245px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: #1d2635;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.workspace-launcher-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3); box-shadow: 0 14px 28px rgba(0,0,0,.28); }
.workspace-launcher-card.is-current { border-color: rgba(132,180,255,.75); box-shadow: 0 0 0 1px rgba(132,180,255,.34), 0 10px 26px rgba(0,0,0,.24); }
.workspace-launcher-card-main { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; flex-direction: column; align-items: stretch; justify-content: space-between; padding: 15px; border: 0; color: #fff; text-align: left; background: radial-gradient(ellipse at 50% 35%, rgba(96,127,174,.44), transparent 60%), linear-gradient(145deg, #2b3e59, #1d2635 78%); }
.workspace-launcher-card-main.has-cover { background-image: linear-gradient(180deg, rgba(13,19,30,.56), rgba(13,19,30,.58) 42%, rgba(13,19,30,.91)), var(--workspace-cover); background-size: cover; background-position: center; }
.workspace-launcher-card-main:hover { color: #fff; }
.workspace-launcher-card-main:focus-visible { z-index: 1; outline: 3px solid #86b7fe; outline-offset: -4px; border-radius: 13px; }
.workspace-launcher-card-topline { display: flex; min-height: 32px; align-items: flex-start; justify-content: space-between; gap: 8px; }
.workspace-launcher-card-space-icon { display: grid; width: 54px; height: 54px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; color: white; background: rgba(5,12,24,.42); box-shadow: 0 6px 18px rgba(0,0,0,.2); font-size: 27px; }
.workspace-launcher-card-space-icon i { font-size: 26px; }
.workspace-launcher-card-space-icon img { width: 30px; height: 30px; object-fit: contain; }
.workspace-launcher-current { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; color: white; background: rgba(8,15,25,.56); font-size: 11px; font-weight: 650; }
.workspace-launcher-card-center { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 7px 34px; text-align: center; }
.workspace-launcher-card-name { display: -webkit-box; max-width: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; color: #fff; font-size: clamp(1.18rem, 2.4vw, 1.6rem); font-weight: 750; line-height: 1.15; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.workspace-launcher-board-count { color: rgba(255,255,255,.86); font-size: .85rem; text-shadow: 0 1px 5px rgba(0,0,0,.65); }
.workspace-launcher-board-previews { display: flex; min-width: 0; align-items: center; gap: 6px; padding-right: 44px; overflow: hidden; }
.workspace-launcher-board-preview { max-width: 31%; overflow: hidden; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; color: rgba(255,255,255,.9); background: rgba(5,10,18,.4); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-board-overflow { flex: 0 0 auto; color: rgba(255,255,255,.78); font-size: 11px; }
.workspace-launcher-no-boards { color: rgba(255,255,255,.7); font-size: 11px; }
.workspace-launcher-card-action { position: absolute; right: 11px; bottom: 11px; z-index: 2; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; color: white; background: rgba(9,15,24,.68); box-shadow: 0 4px 12px rgba(0,0,0,.26); }
.workspace-launcher-card-action:hover,
.workspace-launcher-card-action:focus-visible { border-color: rgba(255,255,255,.55); background: rgba(29,43,62,.95); }
.workspace-launcher-empty { padding: 22px 8px; color: var(--text-secondary); text-align: center; }
.workspace-launcher-add-card { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 10px; border: 1px dashed rgba(255,255,255,.24); border-radius: 14px; color: rgba(255,255,255,.83); background: rgba(255,255,255,.035); font-weight: 650; }
.workspace-launcher-add-card:hover { border-color: rgba(255,255,255,.48); color: #fff; background: rgba(255,255,255,.075); }
.workspace-launcher-add-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.17); border-radius: 10px; }

.workspace-launcher-external { font-size: 10px; opacity: .67; }

@media (min-width: 1120px) {
    .workspace-launcher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .workspace-launcher-modal .workspace-launcher-dialog { width: calc(100vw - 16px); max-width: none; margin: 8px auto; }
    .workspace-launcher-modal .workspace-launcher-surface { max-height: calc(100dvh - 16px); border-radius: 15px; }
    .workspace-launcher-header { padding: 12px; }
    .workspace-launcher-heading { gap: 9px; }
    .workspace-launcher-mark { width: 34px; height: 34px; }
    .workspace-launcher-heading p { display: none; }
    .workspace-launcher-heading h2 { font-size: 1rem; }
    .workspace-launcher-header-actions { gap: 5px; }
    .workspace-launcher-icon-button { width: 40px; height: 40px; }
    .workspace-launcher-search-wrap { margin: 10px 12px 0; }
    .workspace-launcher-body { padding: 12px; }
    .workspace-launcher-grid { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 2px 2px 8px; }
    .workspace-launcher-card { flex: 0 0 min(82vw, 360px); aspect-ratio: 1 / 1; min-height: 250px; scroll-snap-align: start; }
    .workspace-launcher-add-card { flex: 0 0 min(82vw, 360px); min-height: 250px; scroll-snap-align: start; }
    .workspace-launcher-learn-link { width: 40px; height: 40px; padding: 0; }
    .workspace-launcher-learn-label,
    .workspace-launcher-learn-link .workspace-launcher-external { display: none; }
}

@media (max-width: 370px) {
    .workspace-launcher-heading { gap: 6px; }
    .workspace-launcher-mark { width: 30px; height: 30px; }
    .workspace-launcher-icon-button { width: 38px; height: 38px; }
    .workspace-launcher-header-actions { gap: 3px; }
    .workspace-launcher-header { padding-right: 9px; padding-left: 9px; }
    .workspace-launcher-card { flex-basis: calc(100vw - 48px); }
    .workspace-launcher-add-card { flex-basis: calc(100vw - 48px); }
    .workspace-launcher-learn-link { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-launcher-card,
    .workspace-launcher-icon-button { transition: none; }
    .workspace-launcher-grid { scroll-behavior: auto; }
}

body.boardeva-performance-strict .workspace-launcher-surface { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Search, continue, and workspace-management views in the start-menu launcher. */
.workspace-launcher-search-row { display: flex; align-items: center; gap: 10px; padding: 12px 18px 0; }
.workspace-launcher-mode { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.11); border-radius: 11px; background: rgba(8,14,24,.34); }
.workspace-launcher-mode button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; color: rgba(255,255,255,.69); background: transparent; font-size: .8rem; font-weight: 650; }
.workspace-launcher-mode button[aria-selected="true"] { border-color: rgba(139,177,244,.26); color: #f5f8ff; background: rgba(110,151,222,.23); }
.workspace-launcher-search-row .workspace-launcher-search-wrap { flex: 1 1 auto; min-width: 0; margin: 0; }
.workspace-launcher-submit { display: inline-flex; min-height: 38px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgba(139,177,244,.35); border-radius: 9px; color: white; background: rgba(91,137,213,.34); font-size: .8rem; font-weight: 700; }
.workspace-launcher-submit:hover { background: rgba(91,137,213,.5); }
.workspace-launcher-submit[hidden] { display: none; }
.workspace-launcher-card { border-color: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.19); }
.workspace-launcher-card.is-switching { opacity: .7; pointer-events: none; }
.workspace-launcher-card.is-current { border-color: var(--workspace-accent, rgba(132,180,255,.75)); }
.workspace-launcher-card-main { background-image: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--workspace-accent, #638ede) 36%, transparent), transparent 60%), linear-gradient(145deg, #2b3e59, #1d2635 78%); }
.workspace-launcher-card-main.has-cover { background-image: linear-gradient(180deg, rgba(13,19,30,.54), rgba(13,19,30,.64) 42%, rgba(13,19,30,.92)), var(--workspace-cover); }
.workspace-launcher-card-topline { align-items: flex-start; }
.workspace-launcher-card-icon { display: grid; width: 56px; height: 56px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; color: #fff; background: rgba(5,12,24,.43); box-shadow: 0 6px 18px rgba(0,0,0,.24); font-size: 29px; }
.workspace-launcher-card-icon i { font-size: 27px; }
.workspace-launcher-card-icon img { width: 32px; height: 32px; object-fit: contain; }
.workspace-launcher-sync { position: absolute; top: 11px; right: 11px; z-index: 2; display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: rgba(255,255,255,.9); background: rgba(7,13,23,.65); box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.workspace-launcher-sync:hover, .workspace-launcher-sync:focus-visible { border-color: rgba(255,255,255,.48); color: #fff; background: rgba(29,43,62,.94); }
.workspace-launcher-sync.is-success { color: #b6f0cd; }
.workspace-launcher-sync.is-error, .workspace-launcher-sync.is-unsupported { color: #ffd096; }
.workspace-launcher-sync-check { font-size: 10px; }
.workspace-launcher-mobile-navigation { display: none; }
.workspace-launcher-inline-status { min-height: 20px; margin: 5px 0; color: rgba(227,235,248,.72); font-size: .78rem; }
.workspace-launcher-continue, .workspace-launcher-results { margin-top: 18px; }
.workspace-launcher-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.workspace-launcher-section-heading h3 { margin: 0; color: rgba(255,255,255,.94); font-size: .98rem; font-weight: 750; }
.workspace-launcher-section-heading > span { color: rgba(255,255,255,.55); font-size: .75rem; }
.workspace-launcher-continue-group { margin-top: 12px; }
.workspace-launcher-continue-group h4 { margin: 0 0 6px 2px; color: rgba(229,237,249,.63); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.workspace-launcher-continue-list, .workspace-launcher-result-group { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(8,13,22,.25); }
.workspace-launcher-continue-item, .workspace-launcher-result-row { display: flex; width: 100%; min-height: 55px; align-items: center; gap: 11px; padding: 8px 11px; border: 0; border-bottom: 1px solid rgba(255,255,255,.075); color: #f4f7fc; text-align: left; background: transparent; }
.workspace-launcher-continue-item:last-child, .workspace-launcher-result-row:last-child { border-bottom: 0; }
.workspace-launcher-continue-item:hover, .workspace-launcher-result-row:hover { background: rgba(255,255,255,.075); }
.workspace-launcher-continue-toggle { display: block; min-height: 34px; margin: 8px 0 0 auto; padding: 5px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: rgba(235,242,252,.84); background: rgba(255,255,255,.055); font-size: .75rem; font-weight: 650; }
.workspace-launcher-continue-toggle:hover, .workspace-launcher-continue-toggle:focus-visible { border-color: rgba(139,181,249,.5); color: #fff; background: rgba(106,151,221,.16); }
.workspace-launcher-continue-icon, .workspace-launcher-result-board-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; color: #d9e6fc; background: rgba(118,151,205,.15); }
.workspace-launcher-continue-copy, .workspace-launcher-result-row > span { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.workspace-launcher-continue-copy strong, .workspace-launcher-result-row strong { overflow: hidden; font-size: .84rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-continue-copy small, .workspace-launcher-result-row small { overflow: hidden; color: rgba(222,231,245,.56); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-continue-meta { flex: 0 0 auto; color: rgba(222,231,245,.6); font-size: .72rem; }
.workspace-launcher-continue-item > .fa-arrow-up-right-from-square { color: rgba(255,255,255,.38); font-size: .72rem; }
.workspace-launcher-empty-copy { margin: 0; padding: 8px 2px 2px; color: rgba(229,237,249,.57); font-size: .8rem; }
.workspace-launcher-result-group { margin-top: 9px; }
.workspace-launcher-result-heading { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.workspace-launcher-result-heading .workspace-launcher-result-board-icon { width: 27px; height: 27px; }
.workspace-launcher-result-heading strong { color: #eaf1fd; font-size: .82rem; }
.workspace-launcher-result-heading small { margin-left: auto; color: rgba(230,238,250,.5); font-size: .7rem; }
.workspace-launcher-result-row { min-height: 51px; padding-left: 14px; }
.workspace-launcher-result-row > i:first-child { width: 18px; color: rgba(218,231,250,.64); text-align: center; }
.workspace-launcher-result-row > i:last-child { color: rgba(255,255,255,.42); font-size: .74rem; transform: rotate(-45deg); }
.workspace-launcher-search-recovery { margin-top: 10px; color: #ffd59c; font-size: .78rem; }
.workspace-launcher-load-more { display: block; min-height: 42px; margin: 11px auto 0; padding: 7px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; color: #e4edfc; background: rgba(255,255,255,.065); font-size: .8rem; font-weight: 650; }
.workspace-launcher-load-more[hidden] { display: none; }
.workspace-launcher-manage-search-label { display: block; margin: 0 0 5px; color: rgba(229,237,249,.67); font-size: .74rem; font-weight: 650; }
.workspace-launcher-manage-search { min-height: 42px; margin-bottom: 10px; border-color: rgba(255,255,255,.15); color: #fff; background: rgba(8,14,24,.35); }
.workspace-launcher-manage-search:focus { border-color: rgba(119,166,255,.72); color: #fff; background: rgba(8,14,24,.45); box-shadow: 0 0 0 3px rgba(91,143,245,.14); }
.workspace-launcher-manage-search::placeholder { color: rgba(235,240,248,.47); }
.workspace-launcher-manage-list { display: grid; gap: 7px; }
.workspace-launcher-manage-row { display: flex; min-height: 60px; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.035); }
.workspace-launcher-manage-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: rgba(255,255,255,.08); font-size: 20px; }
.workspace-launcher-manage-copy { display: grid; min-width: 0; flex: 1 1 auto; gap: 3px; }
.workspace-launcher-manage-copy strong { overflow: hidden; color: #fff; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-manage-copy small { color: rgba(224,232,245,.55); font-size: .72rem; }
.workspace-launcher-manage-row button { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; color: rgba(239,244,251,.8); background: rgba(255,255,255,.045); }
.workspace-launcher-manage-row button:disabled { opacity: .35; }
.workspace-launcher-subheading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: #f1f5fc; }
.workspace-launcher-subheading strong { font-size: .9rem; }
.workspace-launcher-subheading span { color: rgba(226,235,248,.58); font-size: .75rem; }
.workspace-launcher-membership-list { display: grid; gap: 5px; }
.workspace-launcher-membership-row { display: flex; min-height: 50px; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(255,255,255,.035); cursor: pointer; }
.workspace-launcher-membership-row:has(input:checked) { border-color: rgba(132,180,255,.34); background: rgba(95,139,207,.12); }
.workspace-launcher-membership-row input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: #7fa9ef; }
.workspace-launcher-membership-icon { width: 23px; flex: 0 0 auto; text-align: center; }
.workspace-launcher-membership-name { min-width: 0; flex: 1 1 auto; overflow: hidden; color: #f4f7fc; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-membership-row small { color: rgba(225,233,246,.5); font-size: .69rem; }
.workspace-launcher-appearance-layout { display: grid; grid-template-columns: minmax(230px, .8fr) minmax(300px, 1.2fr); gap: 20px; }
.workspace-launcher-appearance-controls { display: grid; align-content: start; gap: 8px; }
.workspace-launcher-appearance-controls > label { margin-top: 4px; color: rgba(235,241,250,.72); font-size: .76rem; font-weight: 650; }
.workspace-launcher-appearance-controls .form-select { min-height: 40px; border-color: rgba(255,255,255,.13); color: #f4f7fc; background-color: rgba(8,14,24,.48); }
.workspace-launcher-appearance-controls .form-select option { color: #111827; }
.workspace-launcher-appearance-controls input[type="color"] { width: 58px; height: 39px; padding: 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: rgba(8,14,24,.45); }
.workspace-launcher-secondary-button, .workspace-launcher-primary-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 5px; padding: 7px 12px; border-radius: 9px; font-size: .8rem; font-weight: 700; }
.workspace-launcher-secondary-button { border: 1px solid rgba(255,255,255,.15); color: #edf3fc; background: rgba(255,255,255,.055); }
.workspace-launcher-primary-button { border: 1px solid rgba(120,164,237,.46); color: #fff; background: rgba(76,126,203,.42); }
.workspace-launcher-appearance-preview { display: grid; align-content: start; gap: 8px; }
.workspace-launcher-appearance-preview > span { color: rgba(235,241,250,.6); font-size: .75rem; }
.workspace-launcher-appearance-preview .workspace-launcher-card { width: 100%; }
.workspace-launcher-appearance-preview .workspace-launcher-card-action, .workspace-launcher-appearance-preview .workspace-launcher-sync { display: none; }
.workspace-launcher-icon-button:focus-visible, .workspace-launcher-mode button:focus-visible, .workspace-launcher-sync:focus-visible, .workspace-launcher-result-row:focus-visible, .workspace-launcher-continue-item:focus-visible, .workspace-launcher-manage-row button:focus-visible, .workspace-launcher-membership-row:focus-within, .workspace-launcher-load-more:focus-visible { outline: 2px solid #9fc4ff; outline-offset: 2px; }

@media (max-width: 767.98px) {
    .workspace-launcher-search-row { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 12px 0; }
    .workspace-launcher-mode { display: grid; grid-template-columns: 1fr 1fr; }
    .workspace-launcher-mode button { min-height: 42px; }
    .workspace-launcher-search-row .workspace-launcher-search-wrap { width: 100%; }
    .workspace-launcher-mobile-navigation { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 10px; margin: 0 0 7px; }
    .workspace-launcher-mobile-navigation > button { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; color: #f2f6ff; background: rgba(255,255,255,.055); }
    .workspace-launcher-mobile-navigation > span { min-width: 48px; color: rgba(233,240,250,.73); text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums; }
    .workspace-launcher-jump-label { display: flex; align-items: center; gap: 6px; margin-left: auto; color: rgba(226,235,248,.62); font-size: .72rem; }
    .workspace-launcher-jump-label select { max-width: 135px; min-height: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; color: #fff; background: #263347; font-size: .73rem; }
    .workspace-launcher-card-icon { width: 51px; height: 51px; font-size: 26px; }
    .workspace-launcher-continue-meta { display: none; }
    .workspace-launcher-appearance-layout { grid-template-columns: minmax(0, 1fr); }
    .workspace-launcher-appearance-preview .workspace-launcher-card { flex-basis: auto; min-height: 275px; }
}

@media (max-width: 375px) {
    .workspace-launcher-mode button { padding-right: 6px; padding-left: 6px; font-size: .76rem; }
    .workspace-launcher-jump-label { font-size: 0; }
    .workspace-launcher-jump-label select { max-width: 126px; }
    .workspace-launcher-header-actions { gap: 2px; }
    .workspace-launcher-icon-button { width: 38px; height: 38px; }
}

/* Start-menu placement: keep the page visible and anchor the glass panel to its trigger. */
.workspace-launcher-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    pointer-events: none !important;
}

.workspace-launcher-modal .workspace-launcher-dialog {
    position: absolute !important;
    top: var(--workspace-launcher-top, 72px) !important;
    left: var(--workspace-launcher-left, 12px) !important;
    display: block !important;
    width: var(--workspace-launcher-width, min(960px, calc(100vw - 24px))) !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

.workspace-launcher-modal .workspace-launcher-surface {
    width: 100%;
    max-height: min(820px, var(--workspace-launcher-available-height, calc(100dvh - 32px)));
    pointer-events: auto;
}

@media (max-width: 720px) {
    .workspace-launcher-modal .workspace-launcher-dialog {
        left: max(env(safe-area-inset-left), var(--workspace-launcher-left, 8px)) !important;
        width: min(var(--workspace-launcher-width, calc(100vw - 16px)), calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px)) !important;
    }
}

/* Keep the mode choice left, with the Eva action docked inside the field on the right. */
.workspace-launcher-search-row .workspace-launcher-mode { order: 0; }
.workspace-launcher-search-row .workspace-launcher-search-wrap { position: relative; padding-right: 7px; }
.workspace-launcher-search-row .workspace-launcher-search.form-control { flex: 1 1 0; }
.workspace-launcher-search-row .workspace-launcher-submit {
    flex: 0 0 auto;
    align-self: center;
    min-height: 36px;
    margin: 0 0 0 4px;
    white-space: nowrap;
}

.workspace-launcher-eva-hint {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 9px;
    margin: 8px 18px 0;
    padding: 6px 9px;
    border: 1px solid rgba(139,177,244,.17);
    border-radius: 9px;
    color: rgba(235,241,250,.77);
    background: rgba(91,137,213,.09);
    font-size: .75rem;
    line-height: 1.35;
}
.workspace-launcher-eva-hint[hidden] { display: none; }
.workspace-launcher-eva-hint > i { flex: 0 0 auto; color: #a8c6ff; }
.workspace-launcher-eva-hint > span { flex: 1 1 auto; }
.workspace-launcher-eva-hint > button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: 7px; color: rgba(235,241,250,.64); background: transparent; }
.workspace-launcher-eva-hint > button:hover,
.workspace-launcher-eva-hint > button:focus-visible { border-color: rgba(255,255,255,.16); color: #fff; background: rgba(255,255,255,.07); }

@media (max-width: 767.98px) {
    .workspace-launcher-eva-hint { margin: 8px 12px 0; font-size: .72rem; }
}

/* The workspace control has two explicit actions: browse visually, or open
   the familiar compact picker from its own chevron segment. */
.header-actions .workspace-board-picker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    height: var(--header-control-height);
    overflow: visible;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    background: rgba(255,255,255,.1);
    box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.12) inset;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn {
    display: inline-flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 7px;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 20px 0 0 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn.header-action-with-text {
    width: auto !important;
    padding-inline: 14px !important;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn.workspace-board-picker-btn-icon-only {
    flex: 0 0 var(--header-control-height);
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    padding: 0 !important;
    border-radius: 20px 0 0 20px !important;
}
.header-actions .workspace-board-picker-menu-toggle {
    display: inline-grid !important;
    flex: 0 0 30px;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 100% !important;
    min-height: 0 !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 20px 20px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,.84) !important;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn:hover,
.header-actions .workspace-board-picker > .workspace-board-picker-btn:focus-visible,
.header-actions .workspace-board-picker-menu-toggle:hover,
.header-actions .workspace-board-picker-menu-toggle:focus-visible {
    background: rgba(255,255,255,.1) !important;
    color: #fff !important;
}
.header-actions .workspace-board-picker > .workspace-board-picker-btn:focus-visible,
.header-actions .workspace-board-picker-menu-toggle:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #86b7fe;
    outline-offset: -3px;
}
.header-actions .workspace-board-picker-menu-toggle i {
    font-size: .68rem;
    transition: transform .16s ease;
}

/* Hide action labels only when their current header row is short on room.
   The user preference stays intact, so labels return when the window grows. */
.app-header.header-labels-compact .header-actions .header-action-text,
.app-header.header-labels-compact .header-actions .sync-label,
.app-header.header-labels-compact .header-actions .workspace-board-picker-initial {
    display: none !important;
}

.app-header.header-labels-compact .header-actions {
    gap: 6px !important;
}

.app-header.header-labels-compact .header-actions-left,
.app-header.header-labels-compact .header-actions-right {
    gap: 6px !important;
    column-gap: 6px !important;
}

.app-header.header-labels-compact .header-actions .header-action-with-text,
.app-header.header-labels-compact .header-actions .prism-sync-widget.header-action-with-text,
.app-header.header-labels-compact .header-actions .sync-widget.header-action-with-text,
.app-header.header-labels-compact .header-actions .inbox-header-btn.header-action-with-text,
.app-header.header-labels-compact .header-actions .eva-header-button.header-action-with-text,
.app-header.header-labels-compact .header-actions #filterDropdown.header-action-with-text,
.app-header.header-labels-compact .header-actions .plan-badge-btn.header-action-with-text {
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.app-header.header-labels-compact .header-actions .workspace-board-picker {
    height: var(--header-control-height);
}

.app-header.header-labels-compact .header-actions .workspace-board-picker > .workspace-board-picker-btn {
    flex: 0 0 var(--header-control-height) !important;
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: var(--header-control-height) !important;
    padding: 0 !important;
    gap: 0 !important;
}

.app-header.header-labels-compact .header-actions .workspace-board-picker-menu-toggle {
    flex-basis: 24px;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
}

@media (max-width: 959px) {
    .app-header .header-actions .workspace-board-picker-menu-toggle {
        flex-basis: 24px;
        width: 24px !important;
        min-width: 24px !important;
        max-width: 24px !important;
    }
}

@container boardeva-dock (max-width: 560px) {
    #evaDockPane #askEvaModal .eva-context-label {
        display: none !important;
    }

    #evaDockPane #askEvaModal .eva-header-actions {
        flex-wrap: nowrap;
        gap: 4px;
    }

    #evaDockPane #askEvaModal .eva-header-actions > .btn,
    #evaDockPane #askEvaModal .eva-header-actions > button {
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
    }
}

/* Selection previews context without changing the active workspace or board. */
.workspace-launcher-card.is-selected {
    border-color: rgba(122,174,255,.92);
    box-shadow: 0 0 0 2px rgba(91,151,255,.35), 0 12px 28px rgba(0,0,0,.28);
}
.workspace-launcher-card.is-selected .workspace-launcher-card-main::after {
    position: absolute;
    left: 13px;
    bottom: 13px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    color: #fff;
    background: rgba(53,111,205,.88);
    box-shadow: 0 3px 10px rgba(0,0,0,.28);
    content: "✓";
    font-size: 14px;
    font-weight: 800;
}
.workspace-launcher-selection-note {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    margin: 8px 1px 0;
    padding: 7px 10px;
    border: 1px solid rgba(133,176,242,.16);
    border-radius: 9px;
    color: rgba(231,239,251,.69);
    background: rgba(82,125,194,.075);
    font-size: .74rem;
    line-height: 1.35;
}
.workspace-launcher-selection-note:empty { display: none; }
.workspace-launcher-selection-note > i { flex: 0 0 auto; color: #a9c9ff; }
.workspace-launcher-selection-note strong { color: #d8e7ff; font-weight: 700; }

.workspace-launcher-board-shelf { margin-top: 15px; }
.workspace-launcher-board-shelf[hidden] { display: none; }
.workspace-launcher-board-shelf-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.workspace-launcher-board-shelf-header > div { display: flex; min-width: 0; align-items: baseline; gap: 9px; }
.workspace-launcher-board-shelf-header h3 { margin: 0; color: rgba(255,255,255,.92); font-size: .88rem; font-weight: 750; }
.workspace-launcher-board-shelf-header strong { overflow: hidden; color: rgba(225,235,250,.64); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-board-shelf-header span { flex: 0 0 auto; color: rgba(225,235,250,.48); font-size: .7rem; }
.workspace-launcher-board-shelf-header nav { display: inline-flex; flex: 0 0 auto; gap: 5px; }
.workspace-launcher-board-shelf-header nav button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: rgba(241,246,253,.84); background: rgba(255,255,255,.055); }
.workspace-launcher-board-shelf-header nav button:hover:not(:disabled),
.workspace-launcher-board-shelf-header nav button:focus-visible { border-color: rgba(139,181,249,.56); background: rgba(106,151,221,.18); }
.workspace-launcher-board-shelf-header nav button:disabled { opacity: .35; }
.workspace-launcher-board-shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.workspace-launcher-board-choice { display: flex; min-width: 0; min-height: 50px; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.105); border-radius: 10px; color: #f3f6fc; text-align: left; background: rgba(7,13,23,.29); transition: border-color .14s ease, background .14s ease, transform .14s ease; }
.workspace-launcher-board-choice:hover { border-color: rgba(255,255,255,.27); background: rgba(255,255,255,.075); transform: translateY(-1px); }
.workspace-launcher-board-choice.is-selected { border-color: rgba(132,181,255,.75); background: rgba(80,131,213,.2); box-shadow: 0 0 0 1px rgba(100,156,240,.19) inset; }
.workspace-launcher-board-choice-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e7effe; background: rgba(255,255,255,.07); }
.workspace-launcher-board-choice-icon img { max-width: 21px; max-height: 21px; object-fit: contain; }
.workspace-launcher-board-choice-name { min-width: 0; flex: 1 1 auto; overflow: hidden; color: inherit; font-size: .76rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-board-choice-check { flex: 0 0 auto; color: #aed0ff; font-size: .68rem; opacity: 0; }
.workspace-launcher-board-choice.is-selected .workspace-launcher-board-choice-check { opacity: 1; }
.workspace-launcher-board-shelf-empty { margin: 0; padding: 10px 0; color: rgba(225,235,248,.55); font-size: .77rem; }
.workspace-launcher-result-row.is-selected { background: rgba(78,129,210,.21); box-shadow: inset 3px 0 rgba(134,181,255,.85); }
.workspace-launcher-result-row.is-selected > i:last-child { color: #b5d2ff; transform: none; }
.workspace-launcher-result-row:focus-visible,
.workspace-launcher-board-choice:focus-visible,
.workspace-launcher-search-history-item:focus-visible { position: relative; z-index: 1; outline: 2px solid #86b7fe; outline-offset: -2px; }
.workspace-launcher-search-wrap { position: relative; }
.workspace-launcher-search-history { position: absolute; top: calc(100% + 7px); right: 0; left: 0; z-index: 20; max-height: min(270px, 45vh); overflow: auto; border: 1px solid rgba(255,255,255,.17); border-radius: 11px; color: #f2f6fd; background: rgba(31,40,55,.97); box-shadow: 0 14px 36px rgba(0,0,0,.36); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.workspace-launcher-search-history[hidden] { display: none; }
.workspace-launcher-search-history-heading { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,.09); color: rgba(229,238,250,.68); font-size: .71rem; font-weight: 700; }
.workspace-launcher-search-history-heading > span { display: inline-flex; align-items: center; gap: 7px; }
.workspace-launcher-search-history-heading > span i { color: #a9c9ff; }
.workspace-launcher-search-history-heading button { padding: 4px 6px; border: 0; border-radius: 6px; color: rgba(213,226,246,.64); background: transparent; font-size: .68rem; }
.workspace-launcher-search-history-heading button:hover { color: #fff; background: rgba(255,255,255,.08); }
.workspace-launcher-search-history-item { display: flex; width: 100%; min-height: 39px; align-items: center; gap: 9px; padding: 6px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.055); color: rgba(244,247,252,.88); text-align: left; background: transparent; }
.workspace-launcher-search-history-item:last-child { border-bottom: 0; }
.workspace-launcher-search-history-item:hover { background: rgba(255,255,255,.075); }
.workspace-launcher-search-history-item > i:first-child { width: 14px; color: rgba(204,220,245,.48); font-size: .68rem; }
.workspace-launcher-search-history-item > span { min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: .77rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-search-history-item > i:last-child { color: rgba(204,220,245,.43); font-size: .68rem; transform: rotate(-45deg); }
@media (max-width: 767.98px) {
    .workspace-launcher-selection-note { margin-top: 6px; }
    .workspace-launcher-board-shelf { margin-top: 12px; }
    .workspace-launcher-board-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .workspace-launcher-board-choice { min-height: 48px; gap: 7px; padding: 6px 7px; }
    .workspace-launcher-board-choice-icon { width: 27px; height: 27px; }
    .workspace-launcher-board-choice-name { font-size: .72rem; }
    .workspace-launcher-board-shelf-header > div { flex-wrap: wrap; gap: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .workspace-launcher-board-choice { transition: none; }
}

/* Keep workspace cards' right-click actions on the same glass surface as the
   rest of Boardeva's context menus. */
.workspace-launcher-context-menu {
    min-width: 218px;
}

/* Board tabs start at the familiar width, stay equal, and give long names a
   second line before the strip shrinks to its configured minimum and scrolls. */
.app-header .board-tabs > .board-tab {
    box-sizing: border-box;
    flex: 1 1 min(var(--tab-width, 232px), 232px);
    width: auto;
    min-width: var(--tab-min-width, 120px);
    max-width: min(var(--tab-width, 232px), 232px);
    min-height: 62px;
    padding: 8px 12px;
    white-space: normal;
}

/* These controls sit on the app's dark glass surfaces. Keep their text
   readable if a theme-level text token changes independently. */
.app-header .board-tabs > .board-tab,
.app-header .board-tabs > .board-tab .board-name,
.column-title,
.app-header .header-actions .inbox-header-btn,
.app-header .header-actions .inbox-header-btn .header-action-text {
    color: #fff !important;
}

.app-header .board-tabs > .board-tab .board-icon,
.app-header .board-tabs > .board-tab .delete-board,
.app-header .board-tabs > .board-tab > .fa-users {
    flex: 0 0 auto;
}

.app-header .board-tabs > .board-tab .board-name {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Workspace launcher refinement: share Filter's lightweight glass, keep the
   browser bright behind it, and let a dense workspace grid adapt naturally. */
.workspace-launcher-modal .workspace-launcher-surface {
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    color: #fff !important;
    background: rgba(32,32,32,.4) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
}
.workspace-launcher-header { padding: 10px 12px; }
.workspace-launcher-heading h2,
.workspace-launcher-heading p,
.workspace-launcher-header-actions,
.workspace-launcher-body,
.workspace-launcher-section-heading,
.workspace-launcher-section-heading h3,
.workspace-launcher-section-heading span,
.workspace-launcher-subheading,
.workspace-launcher-manage-row,
.workspace-launcher-membership-name,
.workspace-launcher-appearance-controls > label,
.workspace-launcher-appearance-preview > span,
.workspace-launcher-selection-note,
.workspace-launcher-inline-status,
.workspace-launcher-search-recovery { color: rgba(255,255,255,.9) !important; }
.workspace-launcher-heading h2 { color: #fff !important; }
.workspace-launcher-heading p,
.workspace-launcher-subheading span,
.workspace-launcher-board-shelf-header strong,
.workspace-launcher-board-shelf-header span { color: rgba(255,255,255,.68) !important; }
.workspace-launcher-search-row { display: block; padding: 10px 12px 0; }
.workspace-launcher-search-wrap { min-height: 44px; margin: 0; padding: 0 8px 0 11px; gap: 8px; }
.workspace-launcher-search-wrap > i { color: rgba(255,255,255,.74); }
.workspace-launcher-search.form-control { color: #fff !important; }
.workspace-launcher-search.form-control::placeholder { color: rgba(255,255,255,.58); }
.workspace-launcher-eva-toggle,
.workspace-launcher-history-toggle {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255,255,255,.78);
    background: transparent;
}
.workspace-launcher-eva-toggle:hover,
.workspace-launcher-eva-toggle:focus-visible,
.workspace-launcher-eva-toggle.is-active,
.workspace-launcher-history-toggle:hover,
.workspace-launcher-history-toggle:focus-visible,
.workspace-launcher-history-toggle[aria-expanded="true"] {
    border-color: rgba(255,255,255,.16);
    color: #fff;
    background: rgba(255,255,255,.1);
}
.workspace-launcher-eva-toggle.is-active { color: #b9d5ff; }
.workspace-launcher-submit {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(132,180,255,.28);
    border-radius: 8px;
    color: #fff;
    background: rgba(80,126,198,.3);
}
.workspace-launcher-submit:hover,
.workspace-launcher-submit:focus-visible { border-color: rgba(168,200,255,.55); color: #fff; background: rgba(90,143,224,.48); }
.workspace-launcher-submit[hidden] { display: none !important; }
.workspace-launcher-body { padding: 10px 12px 12px; }
.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid { gap: 12px !important; }
.workspace-launcher-inline-status:empty,
.workspace-launcher-search-recovery:empty { display: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.workspace-launcher-selection-note { display: flex; min-height: 30px; margin: 7px 0 0; padding: 5px 8px; align-items: center; gap: 8px; }
.workspace-launcher-selection-note[hidden] { display: none !important; }
.workspace-launcher-selection-note-copy { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; }
.workspace-launcher-selection-note > button { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; color: #fff; background: rgba(255,255,255,.06); }
.workspace-launcher-selection-note > button:hover { background: rgba(255,255,255,.14); }
.workspace-launcher-board-shelf { margin-top: 10px; }
.workspace-launcher-board-shelf-header { margin-bottom: 7px; }
.workspace-launcher-board-shelf-header nav { align-items: center; }
.workspace-launcher-board-shelf-header nav button { display: inline-grid; align-items: center; justify-items: center; line-height: 1; }
.workspace-launcher-mobile-navigation > button { display: grid; align-items: center; justify-items: center; line-height: 1; }
.workspace-launcher-card-action { right: 10px; bottom: 10px; width: 38px; height: 38px; }
.workspace-launcher-sync,
.workspace-launcher-sync i { color: #fff !important; }
.workspace-launcher-sync.is-success,
.workspace-launcher-sync.is-error,
.workspace-launcher-sync.is-unsupported { color: #fff !important; }

@media (min-width: 721px) {
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid {
        padding: 4px !important;
        box-sizing: border-box;
    }
    /* An aspect ratio plus a minimum height can enlarge a grid item beyond
       its track. Own both dimensions so the actual gutters stay visible. */
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-card,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-add-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        height: 220px;
        aspect-ratio: auto;
        box-sizing: border-box;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)) !important;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces > .workspace-launcher-card,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces > .workspace-launcher-add-card {
        height: 170px;
        min-height: 0;
        aspect-ratio: auto;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-main {
        padding: 10px;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 23px;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-icon i {
        font-size: 21px;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-center {
        gap: 5px;
        padding: 5px 30px;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-name {
        font-size: clamp(.9rem, 1.35vw, 1.12rem);
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-card-action,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-sync {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 10px;
    }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces .workspace-launcher-add-card {
        gap: 7px;
        font-size: .88rem;
    }
}

@media (max-width: 767.98px) {
    .workspace-launcher-header { padding: 9px 10px; }
    .workspace-launcher-search-row { padding: 8px 10px 0; }
    .workspace-launcher-body { padding: 9px 10px 10px; }
    .workspace-launcher-board-shelf-header nav button { width: 34px; height: 34px; }
}

/* Board tabs share the row equally, wrap titles to two lines, and keep the
   close affordance in the icon's fixed slot. */
.app-header .board-tabs {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    gap: 8px !important;
    margin-right: 0 !important;
    padding: 4px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
.app-header .board-tabs > .board-tab {
    min-width: var(--tab-min-width, 112px) !important;
    max-width: none !important;
    min-height: 52px !important;
    height: 52px;
    flex: 1 1 0 !important;
    gap: 7px;
    padding: 4px 9px !important;
}
.app-header .board-tabs > .board-tab .board-tab-icon-close {
    position: relative;
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: transparent;
}
.app-header .board-tabs > .board-tab .board-tab-icon-close:hover:not(:disabled),
.app-header .board-tabs > .board-tab .board-tab-icon-close:focus-visible:not(:disabled) { background: rgba(255,255,255,.12); }
.app-header .board-tabs > .board-tab .board-tab-icon-close:focus-visible { outline: 2px solid #86b7fe; outline-offset: -2px; }
.app-header .board-tabs > .board-tab .board-tab-icon-close:disabled { cursor: default; opacity: 1; }
.app-header .board-tabs > .board-tab .board-icon { display: grid; width: 100%; height: 100%; place-items: center; }
.app-header .board-tabs > .board-tab .board-tab-close-icon { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.app-header .board-tabs > .board-tab .board-tab-icon-close:hover:not(:disabled) .board-icon,
.app-header .board-tabs > .board-tab .board-tab-icon-close:focus-visible:not(:disabled) .board-icon { opacity: 0; }
.app-header .board-tabs > .board-tab .board-tab-icon-close:hover:not(:disabled) .board-tab-close-icon,
.app-header .board-tabs > .board-tab .board-tab-icon-close:focus-visible:not(:disabled) .board-tab-close-icon { opacity: 1; }
.app-header .board-tabs > .board-tab .board-name { flex: 1 1 auto; }
.app-header .board-tabs > .add-board-btn { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; }
.app-header .board-tabs > .board-tab .board-icon,
.app-header .board-tabs > .board-tab .board-icon *,
#columnsContainer .column-header .column-icon,
#columnsContainer .column-header .column-icon *,
#columnsContainer .column-header .smart-icon,
#columnsContainer .column-header .smart-icon *,
#columnsContainer .column-header button,
#columnsContainer .column-header button i,
#columnsContainer .column-header button svg { color: #fff !important; }

/* Card interface copy is white on the glass board surfaces, independent of
   the page's theme text token; semantic status colors remain unchanged. */
#columnsContainer .card .card-title,
#columnsContainer .card .card-date,
#columnsContainer .card .card-timer-text,
#columnsContainer .card .subitem-text,
#columnsContainer .card .card-tags .tag,
#columnsContainer .card .card-tags .tag *,
#columnsContainer .card .card-actions button:not(.card-favorite-toggle),
#columnsContainer .card .card-actions button:not(.card-favorite-toggle) i,
#columnsContainer .card .card-expand-toggle,
#columnsContainer .card .card-expand-toggle i,
#columnsContainer .card .subitem-row,
#columnsContainer .card .card-description.markdown-content,
#columnsContainer .card .card-content > p,
#columnsContainer .card .smart-board-source > span,
#columnsContainer .card .card-group-header { color: #fff !important; }
#columnsContainer .card .card-description.markdown-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote),
#columnsContainer .card .subitem-text * { color: inherit; }
#columnsContainer .card.card-selected {
    border-color: rgba(255,255,255,.92) !important;
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.82) !important;
}

/* The edit/create workspace dialogs use the same white-on-glass contrast as
   the launcher instead of inheriting dark form text from the page theme. */
#editSpaceModal .modal-content,
#spaceModal .modal-content {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    background: rgba(32,32,32,.4) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 32px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
}
#editSpaceModal .modal-title,
#editSpaceModal .form-label,
#editSpaceModal .form-check-label,
#editSpaceModal .form-check-label .board-icon,
#editSpaceModal .btn,
#spaceModal .modal-title,
#spaceModal .form-label,
#spaceModal .form-check-label,
#spaceModal .btn { color: #fff !important; }
#editSpaceModal .form-control,
#editSpaceModal .form-select,
#spaceModal .form-control,
#spaceModal .form-select { color: #fff !important; background-color: rgba(10,16,26,.48) !important; }
#editSpaceModal .form-control::placeholder,
#spaceModal .form-control::placeholder { color: rgba(255,255,255,.58) !important; }
#editSpaceModal .form-select option,
#spaceModal .form-select option { color: #1f2937; }

/* Keep the existing toolbar pill as the sole Sync outline and neutralize
   provider-state classes on its icon/label. */
.app-header .prism-sync-widget .sync-status-area {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
}
.app-header .prism-sync-widget .sync-status-area .sync-label,
.app-header .prism-sync-widget .sync-status-area .sync-header-icon,
.app-header .prism-sync-widget .sync-status-area.sync-badge-syncing,
.app-header .prism-sync-widget .sync-status-area.sync-badge-error,
.app-header .prism-sync-widget .sync-status-area.sync-badge-offline,
.app-header .prism-sync-widget .sync-status-area.sync-badge-cooldown,
.app-header .prism-sync-widget .sync-status-area.sync-badge-synced { color: #fff !important; }
.app-header .prism-sync-widget .sync-status-area.sync-badge-syncing { animation: none !important; }
.workspace-launcher-context-menu + .glass-morph-submenu,
.glass-morph-submenu { max-height: min(70vh,560px); overflow-y: auto; overscroll-behavior: contain; }
.header-actions .workspace-board-picker { overflow: hidden !important; }
.header-actions .workspace-board-picker > .workspace-board-picker-btn { margin-left: 0 !important; }
.header-actions .workspace-board-picker > .workspace-board-picker-btn:hover,
.header-actions .workspace-board-picker > .workspace-board-picker-btn:focus-visible,
.header-actions .workspace-board-picker-menu-toggle:hover,
.header-actions .workspace-board-picker-menu-toggle:focus-visible { background: rgba(255,255,255,.12) !important; }
.workspace-launcher-continue { margin-top: 10px; }
.workspace-launcher-results { margin-top: 8px; }

/* Dark glass dialogs own their readable text colors instead of inheriting a
   theme's dark body foreground. Secondary copy stays white at lower contrast. */
.modal.show .modal-content {
    --text-primary: #fff;
    --text-secondary: rgba(255,255,255,.82);
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255,255,255;
    --bs-heading-color: #fff;
    --bs-modal-color: #fff;
    --bs-secondary-color: rgba(255,255,255,.82);
    --bs-secondary-color-rgb: 255,255,255;
    --bs-form-text-color: rgba(255,255,255,.78);
    --bs-nav-link-color: rgba(255,255,255,.88);
    --bs-nav-link-hover-color: #fff;
    --bs-nav-link-active-color: #fff;
    color: #fff !important;
}
.modal.show .modal-content :is(.modal-title, h1, h2, h3, h4, h5, h6, label, legend, summary, p, li, dt, dd, .settings-sidebar .nav-link, .settings-sidebar .nav-link span, .text-dark, .text-body, .text-secondary, .text-body-secondary, .text-muted, .form-text, .form-label, .form-check-label) {
    color: #fff !important;
}
.modal.show .modal-content :is(.btn, button:not(.btn-close)) {
    color: #fff !important;
}
.modal.show .modal-content :is(.form-control, .form-select, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [contenteditable="true"]) {
    color: #fff !important;
}
.modal.show .modal-content :is(.form-control, .form-select, input, textarea)::placeholder {
    color: rgba(255,255,255,.64) !important;
}
.modal.show .modal-content option {
    color: #fff;
    background-color: #202632;
}
.modal.show .modal-content :is(.btn-light, .btn-outline-secondary.active, .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible) {
    color: #fff !important;
    border-color: rgba(255,255,255,.36) !important;
    background-color: rgba(255,255,255,.14) !important;
}

/* Keep tab outlines crisp and rounded, and align titles with their icons. */
.app-header .board-tabs > .board-tab {
    box-sizing: border-box;
    min-height: 46px;
    height: 46px;
    padding: 4px 8px;
    justify-content: flex-start !important;
    gap: 6px;
    overflow: hidden;
    text-align: left;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.app-header .board-tabs > .board-tab:hover,
.app-header .board-tabs > .board-tab:focus-visible {
    border-color: rgba(255,255,255,.48) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.24);
}
.app-header .board-tabs > .board-tab.active {
    border-color: rgba(255,255,255,.48) !important;
    border-radius: 8px !important;
}
.app-header .board-tabs > .board-tab .board-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    line-height: 1.16;
    text-align: left;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
html.board-tabs-fit-available .app-header .board-tabs {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: auto !important;
}
html.board-tabs-fit-available .app-header .board-tabs > .board-tab {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: min(var(--tab-min-width, 120px), 88px) !important;
    max-width: min(var(--tab-width, 232px), 232px) !important;
}
.app-header .board-tabs > .board-tab .board-tab-icon-close {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
}
.app-header .board-tabs > .add-board-btn {
    flex: 0 0 38px;
    width: 38px;
    min-width: 38px;
    height: 38px;
}
.tag-catalog-list {
    display: grid;
    gap: 0.6rem;
}

.tag-catalog-category {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.75rem;
    background: rgba(15, 19, 28, 0.34);
}

.tag-catalog-category-tags {
    display: grid;
    gap: 0.25rem;
}

.tag-catalog-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.1rem;
}

.tag-catalog-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.tag-catalog-row .btn,
#tagCatalogSettings .btn {
    color: #fff;
}

.modal-content {
    --bs-body-color: #fff;
    --bs-secondary-color: rgba(255, 255, 255, 0.72);
    color: #fff !important;
}

.modal-content :is(h1, h2, h3, h4, h5, h6, label, p, li, dt, dd, legend, .form-label, .form-text, .form-check-label, .modal-title) {
    color: #fff !important;
}

.modal-content :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: #fff !important;
}

.modal-content :is(input, textarea)::placeholder {
    color: rgba(255, 255, 255, 0.62) !important;
}

.modal-content option {
    color: #fff;
    background: #171b24;
}

/* Card editor: keep modal actions fixed while the card fields scroll. */
#cardModal {
    --card-editor-control-border: rgba(148, 163, 184, .35);
    --card-editor-active-bg: #363636;
    --card-editor-focus-border: rgba(203, 213, 225, .65);
}

#cardModal .modal-dialog {
    width: calc(100vw - 2rem);
    max-width: min(1200px, calc(100vw - 2rem)) !important;
    max-height: calc(100dvh - 2rem);
}

#cardModal .modal-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100dvh - 2rem);
    position: relative;
    container-type: inline-size;
    container-name: card-editor;
    color: #fff;
    background: rgba(20, 20, 20, .92) !important;
}

#cardModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    flex: 0 0 auto;
    min-width: 0;
    background: transparent;
}

#cardModal .modal-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cardModal .modal-header-actions {
    flex: 0 0 auto;
    gap: 8px;
}

#cardModal .modal-header-actions [hidden] {
    display: none !important;
}

#cardModal [hidden] { display: none !important; }

#cardModal .modal-header-actions .btn-close {
    margin: 0;
}

#cardModal > .modal-dialog > .modal-content > .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

#cardModal.description-expanded > .modal-dialog > .modal-content > .modal-body {
    overflow: hidden;
}

#cardModal .card-template-toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

#cardModal .card-template-toolbar-title {
    color: #fff;
    font-weight: 600;
}

#cardModal .card-template-buttons {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

#cardModal .card-date-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#cardModal .card-date-fields > div,
#cardModal .card-time-fields > div {
    min-width: 0;
}

#cardModal .card-date-fields input {
    width: 100%;
    min-width: 0;
}

#cardModal .card-time-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

#cardModal .card-subitem-add-row {
    display: flex;
    justify-content: flex-end;
    margin-top: .5rem;
}

#cardModal .card-media-gallery {
    align-items: flex-start;
}

#cardModal .card-media-tile {
    position: relative;
    display: flex;
    flex: 0 0 128px;
    width: 128px;
    min-height: 152px;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    border: 1px solid var(--card-editor-control-border);
    border-radius: 8px;
    padding: 6px;
    background: rgba(0, 0, 0, .2);
}

#cardModal .card-media-preview,
#cardModal .card-media-file-icon {
    display: flex;
    width: 100%;
    height: 92px;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    border-radius: 5px;
    background: rgba(0, 0, 0, .25);
    cursor: pointer;
}

#cardModal .card-media-file-icon {
    flex-direction: column;
    gap: 3px;
    color: #ddd;
    font-size: .75rem;
}

#cardModal .card-media-file-icon i {
    font-size: 2rem;
}

#cardModal .card-media-name {
    overflow: hidden;
    color: #eee;
    font-size: .76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cardModal .card-media-size {
    color: #aaa;
    font-size: .68rem;
}

#cardModal .card-media-remove {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 2;
    width: 24px;
    height: 24px;
    padding: 0;
}

#cardModal .card-media-download {
    align-self: flex-start;
    border: 0;
    padding: 0;
    color: #ddd;
    background: transparent;
    font-size: .72rem;
}

#cardModal .card-media-download:hover {
    color: #fff;
    text-decoration: underline;
}

#cardModal .card-editor-settings-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

#cardModal .card-editor-settings-button[aria-expanded="true"] {
    color: #fff;
    background-color: var(--card-editor-active-bg);
}

#cardModal.template-text-hidden .card-template-label {
    display: none;
}

#cardModal.template-text-hidden .template-btn .me-1 {
    margin-right: 0 !important;
}

#cardModal :is(.form-control, .form-select, .input-group-text, .subitem-row .btn, .card-description-toolbar .btn) {
    border-color: var(--card-editor-control-border) !important;
}

/* Give every AwesomePicker-bound field a full outline that continues the
   matching border around its icon button. */
.aip3-binding > input {
    border: 1px solid rgba(148, 163, 184, .35) !important;
}

#cardModal .btn:not(.btn-close):not(.color-option) {
    border-color: var(--card-editor-control-border) !important;
}

#cardModal :is(.form-control, .form-select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .input-group-text) {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--card-editor-control-border) !important;
}

#cardModal :is(.form-control, .form-select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"])):focus {
    border-color: var(--card-editor-focus-border) !important;
    box-shadow: 0 0 0 .15rem rgba(160, 160, 160, .16) !important;
}

#cardModal .input-group:focus-within {
    border-radius: var(--bs-border-radius, .375rem);
    box-shadow: 0 0 0 .15rem rgba(160, 160, 160, .16);
}

#cardModal .input-group:focus-within :is(.form-control, .form-select, .input-group-text, .btn) {
    border-color: var(--card-editor-focus-border) !important;
}

#cardModal .icon-suggester-wrapper,
#cardModal .aip3-binding {
    border-color: var(--card-editor-control-border) !important;
}

#cardModal .aip3-binding > input,
#cardModal .aip3-binding-button {
    border-color: var(--card-editor-control-border) !important;
}

#cardModal .icon-suggester-wrapper:focus-within,
#cardModal .aip3-binding:focus-within {
    border-color: var(--card-editor-focus-border) !important;
    box-shadow: 0 0 0 .15rem rgba(160, 160, 160, .16);
}

#cardModal .template-btn.active,
#cardModal .template-btn.btn-primary,
#cardModal .btn-outline-secondary.active,
#cardModal .btn-secondary.active,
#cardModal .btn-outline-secondary[aria-pressed="true"] {
    color: #fff !important;
    border-color: var(--card-editor-control-border) !important;
    background-color: var(--card-editor-active-bg) !important;
}

#cardModal.feature-text-hidden .card-feature-label { display: none; }
#cardModal.feature-text-hidden [data-card-feature] i { margin: 0 !important; }

/* Editor panel structure and the one shared tag input/button seam. */
#cardModal .card-editor-panels {
    display: block;
    min-width: 0;
}

#cardModal .card-editor-primary,
#cardModal .card-editor-secondary {
    min-width: 0;
}

#cardModal.secondary-panel-empty #cardEditorSecondary { display: none; }
#cardModal.secondary-panel-empty .card-editor-panels { grid-template-columns: minmax(0, 1fr) !important; }

#cardModal .card-tag-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    width: 100%;
    align-items: stretch;
}

#cardModal .card-tag-entry .tag-input,
#cardModal .card-tag-entry .btn {
    min-width: 0;
    height: 44px;
}

#cardModal .card-tag-entry .tag-input {
    border-radius: var(--bs-border-radius, .375rem) 0 0 var(--bs-border-radius, .375rem) !important;
    border-right-width: 0 !important;
}

#cardModal .card-tag-entry .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    border-radius: 0 var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 !important;
}

#cardModal .card-editor-relationship-list,
.card-related-links {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.filter-header-action .filter-has-active {
    position: relative;
    border-color: rgba(96, 165, 250, .9) !important;
    color: #fff !important;
    background: rgba(37, 99, 235, .28) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .2);
}
.filter-active-count {
    display: inline-grid;
    min-width: 18px;
    height: 18px;
    place-items: center;
    margin-left: 4px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    color: #fff;
    background: rgba(30,64,175,.72);
    font-size: .68rem;
    line-height: 1;
}

#cardModal .card-editor-relationship-pill,
.card-related-link,
.card-related-more {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 6px;
    padding: 6px 10px;
    color: #fff;
    background: rgba(15, 15, 15, .42);
    font-size: .78rem;
    line-height: 1.2;
    text-decoration: none;
}

#cardModal .card-editor-relationship-pill .card-editor-relationship-name,
.card-related-link .card-related-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cardModal .card-editor-relationship-pill[data-unavailable="true"] { opacity: .72; }
#cardModal .card-editor-relationship-pill button { flex: 0 0 auto; padding: 0 2px; }

.card-related-link:hover,
.card-related-more:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.card-related-links.is-expanded .card-related-link[data-related-overflow] { display: inline-flex; }
.card-related-link[data-related-overflow] { display: none; }
.card-related-unavailable { opacity: .72; cursor: default; }

/* The graph workspace keeps native card DOM, with a movable/resizable frame. */
.relationship-workspace[hidden] { display: none !important; }
.relationship-workspace {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    color: #fff;
    background: transparent;
    isolation: isolate;
}
.relationship-workspace-bar {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.25);
    background: rgba(16,19,24,.74);
    backdrop-filter: blur(18px);
}
.relationship-workspace-title-wrap { display:flex; min-width:0; align-items:center; gap:10px; }
.relationship-workspace-title-wrap > i { flex:none; color:#dbeafe; }
.relationship-workspace-title { overflow:hidden; margin:0; color:#fff; font-size:1rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.relationship-workspace-controls { display:flex; flex:none; align-items:center; gap:6px; }
.relationship-workspace-controls button,
.relationship-canvas-node-tools button,
.relationship-workspace-card-menu button {
    display:inline-flex;
    min-width:36px;
    min-height:36px;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:7px;
    padding:5px 9px;
    color:#fff;
    background:rgba(255,255,255,.1);
}
.relationship-workspace-controls button:hover,
.relationship-canvas-node-tools button:hover,
.relationship-workspace-card-menu button:hover { background:rgba(255,255,255,.22); }
.relationship-workspace-controls button:focus-visible,
.relationship-canvas-node-tools button:focus-visible,
.relationship-workspace-card-menu button:focus-visible { outline:2px solid #60a5fa; outline-offset:2px; }
.relationship-workspace-close { width:40px; height:40px; font-size:1.2rem; }
.relationship-workspace-zoom { min-width:48px; color:#fff; font-size:.8rem; text-align:center; }
.relationship-workspace-stage { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; }
.relationship-workspace-world { position:absolute; inset:0 auto auto 0; width:1px; height:1px; will-change:transform; }
.relationship-workspace-edges { position:absolute; overflow:visible; pointer-events:none; }
.relationship-workspace-edge { fill:none; stroke:rgba(191,219,254,.82); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.relationship-workspace-nodes { position:absolute; inset:0; }
.relationship-canvas-node { position:absolute; min-width:260px; min-height:150px; overflow:visible; border:1px solid transparent; border-radius:11px; }
.relationship-canvas-node.is-selected { border-color:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,.4),0 12px 34px rgba(0,0,0,.27); }
.relationship-canvas-card { width:100%; height:100%; min-height:100%; overflow:auto; touch-action:pan-y; }
.relationship-canvas-node-tools { position:absolute; z-index:4; top:5px; right:5px; display:flex; align-items:center; gap:4px; opacity:.86; }
.relationship-canvas-node-tools button { min-width:31px; min-height:30px; padding:3px 7px; font-size:.75rem; }
.relationship-canvas-resize { position:absolute; right:0; bottom:0; z-index:5; width:30px; height:30px; border:1px solid rgba(255,255,255,.42); border-radius:8px 0 8px 0; color:#fff; background:rgba(15,23,42,.58); cursor:nwse-resize; touch-action:none; }
.relationship-workspace-empty { position:fixed; left:50%; top:52%; max-width:min(400px,calc(100vw - 32px)); transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.22); border-radius:10px; padding:12px 16px; color:#fff; background:rgba(15,23,42,.78); text-align:center; backdrop-filter:blur(12px); }
.relationship-workspace-status { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); color:#fff; font-size:.8rem; text-shadow:0 1px 4px #000; pointer-events:none; }
.relationship-workspace-card-menu { position:absolute; top:58px; right:70px; z-index:5; display:grid; width:min(360px,calc(100vw - 24px)); max-height:70vh; gap:5px; overflow:auto; border:1px solid rgba(255,255,255,.3); border-radius:10px; padding:8px; background:rgba(20,23,28,.95); box-shadow:0 12px 36px rgba(0,0,0,.35); }
.relationship-workspace-card-menu button { justify-content:flex-start; overflow:hidden; text-align:left; }
body.relationship-workspace-open { overflow:hidden; }
body.relationship-workspace-open .app-header,
body.relationship-workspace-open #columnsContainer,
body.relationship-workspace-open .boardeva-side-panel { display:none !important; }
body.relationship-workspace-open .boardeva-workspace-layout { pointer-events:none !important; }
.relationship-workspace { pointer-events:auto; }

@media (max-width:700px) {
    .relationship-workspace-bar { min-height:54px; padding:6px 7px; gap:4px; }
    .relationship-workspace-title-wrap { max-width:26vw; gap:6px; }
    .relationship-workspace-title { font-size:.86rem; }
    .relationship-workspace-controls { gap:3px; }
    .relationship-workspace-controls button { min-width:40px; min-height:42px; padding:4px 7px; }
    .relationship-workspace-controls button span { display:none; }
    .relationship-workspace-card-list { display:inline-flex !important; }
    .relationship-workspace-zoom { min-width:38px; font-size:.72rem; }
    .relationship-canvas-node { min-width:260px; }
    .relationship-workspace-node-tools { opacity:1; }
}

/* Modal-like relationship picker stays inside the editor's focus/backdrop. */
#cardModal .card-relationship-picker[hidden] { display: none !important; }
#cardModal .card-relationship-picker {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(4px);
}

#cardModal .card-relationship-picker-panel {
    display: flex;
    width: min(680px, 100%);
    max-height: min(78vh, 720px);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    background: rgba(24, 24, 24, .98);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .4);
}

#cardModal .card-relationship-picker-results {
    min-height: 120px;
    flex: 1 1 auto;
    overflow: auto;
}

#cardModal .card-relationship-candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 9px 4px;
    cursor: pointer;
}

#cardModal .card-relationship-candidate-title,
#cardModal .card-relationship-candidate-column {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cardModal .card-relationship-candidate-column { color: rgba(255, 255, 255, .62); font-size: .78rem; }
#cardModal .card-relationship-picker-footer { display: flex; justify-content: space-between; gap: 8px; padding-top: 12px; }

/* Draft color preview uses the same low-opacity palette tint as board cards. */
#cardModal .modal-content { transition: background-color .18s ease, background-image .18s ease; }

#cardModal .modal-content.card-modal-color-default { background: rgba(20, 20, 20, .92) !important; }
#cardModal .modal-content.card-modal-color-blue { background: linear-gradient(135deg, rgba(0,123,255,.12), rgba(0,123,255,.05)), rgba(20,20,20,.92) !important; }
#cardModal .modal-content.card-modal-color-green { background: linear-gradient(135deg, rgba(40,167,69,.12), rgba(40,167,69,.05)), rgba(20,20,20,.92) !important; }
#cardModal .modal-content.card-modal-color-yellow { background: linear-gradient(135deg, rgba(255,235,59,.12), rgba(255,235,59,.05)), rgba(20,20,20,.92) !important; }
#cardModal .modal-content.card-modal-color-purple { background: linear-gradient(135deg, rgba(111,66,193,.12), rgba(111,66,193,.05)), rgba(20,20,20,.92) !important; }
#cardModal .modal-content.card-modal-color-orange { background: linear-gradient(135deg, rgba(253,126,20,.12), rgba(253,126,20,.05)), rgba(20,20,20,.92) !important; }
#cardModal .modal-content.card-modal-color-red { background: linear-gradient(135deg, rgba(220,53,69,.12), rgba(220,53,69,.05)), rgba(20,20,20,.92) !important; }

@container card-editor (min-width: 940px) {
    #cardModal.split-layout-enabled .card-editor-panels:not(.secondary-panel-empty) {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
        align-items: start;
        gap: 24px;
    }
}

.temporary-filter-reveal-notice {
    position: sticky;
    top: .5rem;
    z-index: 20;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 24px);
    align-items: center;
    gap: 10px;
    margin: 8px auto;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 8px;
    padding: 7px 10px;
    color: #fff;
    background: rgba(24, 24, 24, .92);
    backdrop-filter: blur(8px);
}

.temporary-filter-reveal-notice[hidden] { display: none !important; }

#cardModal :is(.template-btn, #toggleColor, #toggleTags, #toggleRelationships, #toggleDescription, #toggleDate, #toggleSubitems, #toggleTimer, #toggleImages, #toggleLink):focus-visible,
#cardModal .modal-header-actions :focus-visible {
    outline: 2px solid #aaa;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    #cardModal .modal-dialog {
        max-height: 100dvh;
    }

    #cardModal .modal-content {
        max-height: 100dvh;
    }

    #cardModal .modal-header {
        gap: 8px;
        padding: 12px;
    }

    #cardModal .modal-header-actions {
        gap: 6px;
    }

    #cardModal .modal-header-actions .btn:not(.btn-close) {
        padding: .375rem .55rem;
    }

    #cardModal .card-template-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    #cardModal .card-template-toolbar-title {
        grid-column: 1;
    }

    #cardModal .card-template-buttons {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #cardModal .card-editor-settings-button {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Workspace browser: persistent navigation, compact workspace tiles, and a
   metadata-only board preview grid. Keep this block after legacy launcher
   rules so mobile swipe-card styles cannot reintroduce a horizontal carousel. */
.workspace-launcher-modal .workspace-launcher-surface {
    display: flex !important;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}
.workspace-launcher-header,
.workspace-launcher-search-row,
.workspace-launcher-footer { flex: 0 0 auto; }
.workspace-launcher-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.workspace-launcher-footer {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(9,14,22,.3);
}
.workspace-launcher-footer[hidden] { display: none !important; }
.workspace-launcher-footer-side { display: flex; min-width: 0; align-items: center; gap: 8px; }
.workspace-launcher-footer-left { margin-right: auto; }
.workspace-launcher-footer-right { justify-content: flex-end; }
.workspace-launcher-footer-action {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 10px;
    color: #fff !important;
    background: rgba(255,255,255,.055);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.workspace-launcher-footer-action:hover,
.workspace-launcher-footer-action:focus-visible { border-color: rgba(255,255,255,.32); color: #fff !important; background: rgba(255,255,255,.12); }
.workspace-launcher-footer-action:disabled { opacity: .72; }
.workspace-launcher-footer-action .workspace-launcher-sync-count { min-width: 19px; padding: 1px 5px; border-radius: 99px; color: #fff; background: rgba(255,255,255,.14); font-size: .68rem; text-align: center; }
.workspace-launcher-browse-switch { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(0,0,0,.19); }
.workspace-launcher-browse-switch[hidden],
.workspace-launcher-heading-copy[hidden] { display: none !important; }
.workspace-launcher-heading { flex: 1 1 auto; }
.workspace-launcher-browse-switch { flex: 0 1 auto; }
.workspace-launcher-browse-switch > button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 8px; color: rgba(255,255,255,.72); background: transparent; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.workspace-launcher-browse-switch > button[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.16); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.workspace-launcher-browse-switch > button:focus-visible { outline: 2px solid #8bb8ff; outline-offset: 1px; }
.workspace-launcher-selection-note,
.workspace-launcher-eva-hint,
.workspace-launcher-mobile-navigation { display: none !important; }

.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 2px !important;
    scroll-snap-type: none !important;
}
.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces,
.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.is-board-browser {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-card,
.workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-add-card {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 174px;
    min-height: 0;
    aspect-ratio: auto;
    box-sizing: border-box;
}
.workspace-launcher-card-main { min-height: 0; height: 100%; border-radius: inherit; }
.workspace-launcher-card-center { padding: 8px 34px 46px !important; }
.workspace-launcher-card-action { right: 9px !important; bottom: 9px !important; left: auto !important; transform: none !important; }
.workspace-launcher-search-wrap { width: 100%; box-sizing: border-box; }
.workspace-launcher-search-history { right: 0; left: 0; width: auto; max-width: min(100%, calc(100vw - 20px)); box-sizing: border-box; }
.workspace-launcher-add-card { flex-direction: column; gap: 8px; border-radius: 14px; }
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card {
    display: flex;
    min-width: 0;
    min-height: 204px;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    color: #fff;
    text-align: left;
    background: rgba(14,20,30,.72);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card:hover,
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card:focus-visible { border-color: rgba(135,184,255,.72); background-color: rgba(23,34,51,.88); }
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card:not(.has-preview) { min-height: 92px; }
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card:not(.has-preview) .workspace-launcher-board-card-title { min-height: 100%; }
.workspace-launcher-resize-edge[hidden],
.workspace-launcher-resize-corner[hidden] { display: none !important; }
.workspace-launcher-board-card-title { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; text-align: left; }
.workspace-launcher-board-card-title > .fa-arrow-up-right-from-square { margin-left: auto; color: rgba(255,255,255,.5); font-size: .72rem; }
.workspace-launcher-board-card-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #fff; background: rgba(255,255,255,.08); }
.workspace-launcher-board-card-icon img { max-width: 21px; max-height: 21px; object-fit: contain; }
.workspace-launcher-board-card-copy { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 2px; }
.workspace-launcher-board-card-copy strong { overflow: hidden; color: #fff; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-board-card-copy small { overflow: hidden; color: rgba(235,241,250,.62); font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-board-preview { display: flex; width: 100%; max-width: none; min-height: 0; flex: 1 1 auto; align-self: stretch; gap: 6px; padding: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background-color: rgba(8,13,22,.3); background-image: linear-gradient(180deg, rgba(7,12,20,.1), rgba(7,12,20,.42)), var(--board-preview-wallpaper, none); background-position: center; background-size: cover; box-sizing: border-box; }
.workspace-launcher-mini-column { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: 4px; padding: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(18,25,36,.52); }
.workspace-launcher-mini-column > strong { overflow: hidden; color: rgba(255,255,255,.9); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-mini-column > span { display: block; min-height: 12px; padding: 3px 4px; overflow: hidden; border-radius: 3px; color: rgba(255,255,255,.68); background: rgba(255,255,255,.1); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-mini-column > i { display: block; min-height: 13px; border-radius: 3px; background: rgba(255,255,255,.07); }
.workspace-launcher-board-preview-empty { align-self: center; color: rgba(255,255,255,.6); font-size: .7rem; }

/* Launcher display preferences and independent two-pane scrolling. */
.workspace-launcher-modal .workspace-launcher-header { position: relative; }
.workspace-launcher-modal .workspace-launcher-header:focus { outline: none; }
.workspace-launcher-modal .workspace-launcher-heading-copy h2 { display: flex; align-items: center; gap: 9px; }
.workspace-launcher-modal .workspace-launcher-heading-copy h2 > i { flex: 0 0 auto; color: rgba(224,236,255,.86); font-size: .94em; }
.workspace-launcher-preferences-menu,
.workspace-launcher-preview-menu {
    position: absolute;
    z-index: 40;
    display: grid;
    min-width: 224px;
    gap: 3px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 11px;
    color: #f5f8ff;
    background: rgba(24,32,45,.98);
    box-shadow: 0 14px 36px rgba(0,0,0,.4);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
.workspace-launcher-preferences-menu { top: calc(100% + 4px); right: 10px; }
.workspace-launcher-preview-control { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.workspace-launcher-preview-menu { bottom: calc(100% + 8px); left: 0; }
.workspace-launcher-preferences-menu[hidden],
.workspace-launcher-preview-menu[hidden] { display: none !important; }
.workspace-launcher-preferences-menu > strong { padding: 4px 7px 2px; color: rgba(226,237,253,.62); font-size: .7rem; }
.workspace-launcher-preferences-menu > hr { width: 100%; margin: 4px 0; border-color: rgba(255,255,255,.14); }
.workspace-launcher-preferences-menu > button,
.workspace-launcher-preview-menu > button {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 0;
    border-radius: 7px;
    color: inherit;
    text-align: left;
    background: transparent;
    font: inherit;
    font-size: .78rem;
}
.workspace-launcher-preferences-menu > button:hover,
.workspace-launcher-preferences-menu > button:focus-visible,
.workspace-launcher-preview-menu > button:hover,
.workspace-launcher-preview-menu > button:focus-visible { outline: none; background: rgba(255,255,255,.1); }
.workspace-launcher-preferences-menu > button > i,
.workspace-launcher-preview-menu > button > i { width: 15px; color: rgba(205,222,250,.7); text-align: center; }
.workspace-launcher-preferences-menu > button[aria-checked="true"] > i,
.workspace-launcher-preview-menu > button[aria-checked="true"] > i { color: #8dbaff; }
.workspace-launcher-preview-control .workspace-launcher-footer-action { min-width: 34px; }

.workspace-launcher-modal.is-split-panels .workspace-launcher-body { overflow: hidden; }
.workspace-launcher-modal.is-split-panels .workspace-launcher-body > #workspaceLauncherView,
.workspace-launcher-modal.is-split-panels .workspace-launcher-home-layout { height: 100%; min-height: 0; }
.workspace-launcher-modal.is-split-panels .workspace-launcher-home-layout {
    grid-template-columns: minmax(0,1.55fr) minmax(300px,1fr);
    gap: 14px;
}
.workspace-launcher-modal.is-split-panels .workspace-launcher-home-main,
.workspace-launcher-modal.is-split-panels .workspace-launcher-context-panel {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.workspace-launcher-modal.is-split-panels .workspace-launcher-home-main { padding: 2px 5px 8px 2px; }
.workspace-launcher-modal.is-split-panels .workspace-launcher-context-panel { padding: 2px 3px 8px; }
.workspace-launcher-modal:not(.is-split-panels) .workspace-launcher-home-layout { height: auto; min-height: 0; grid-template-columns: minmax(0,1fr); }
.workspace-launcher-modal:not(.is-split-panels) .workspace-launcher-home-main,
.workspace-launcher-modal:not(.is-split-panels) .workspace-launcher-context-panel { overflow: visible; }
.workspace-launcher-modal:not(.is-split-panels) .workspace-launcher-body { overflow: auto; }
@container (min-width: 920px) {
    .workspace-launcher-modal[data-split-panel-mode="enabled"].is-split-panels .workspace-launcher-home-layout { grid-template-columns: minmax(0,1.55fr) minmax(300px,1fr); }
}
.workspace-launcher-modal[data-split-panel-mode="disabled"] .workspace-launcher-home-layout { grid-template-columns: minmax(0,1fr) !important; }
.workspace-launcher-modal[data-split-panel-mode="disabled"] .workspace-launcher-home-main,
.workspace-launcher-modal[data-split-panel-mode="disabled"] .workspace-launcher-context-panel { overflow: visible !important; }
.workspace-launcher-modal[data-split-panel-mode="disabled"] .workspace-launcher-body { overflow: auto !important; }

.workspace-launcher-board-card.preview-image-only .workspace-launcher-mini-column { display: none; }
.workspace-launcher-board-card.preview-image-only .workspace-launcher-board-preview { display: block; }
.workspace-launcher-board-shelf-header h3 { display: inline-flex; align-items: center; gap: 7px; }
.workspace-launcher-board-shelf-header h3 > i { color: rgba(205,223,250,.78); font-size: .88em; }
.workspace-launcher-board-shelf-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%,220px), 1fr)); align-items: stretch; }
.workspace-launcher-board-choice { min-height: 56px; }
.workspace-launcher-board-choice-name { display: -webkit-box; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }

.workspace-launcher-manage-row > button { padding: 0; line-height: 1; }
.workspace-launcher-manage-row > button > i { display: block; line-height: 1; }
.workspace-launcher-manage-drag { cursor: grab; touch-action: none; }
.workspace-launcher-manage-drag:active { cursor: grabbing; }
.workspace-launcher-manage-row.is-dragging { opacity: .42; }
.workspace-launcher-manage-row.is-drop-before { box-shadow: inset 0 2px #82b5ff; }
.workspace-launcher-manage-row.is-drop-after { box-shadow: inset 0 -2px #82b5ff; }

/* Workspace and board browser follow-up polish. */
.header-actions .workspace-board-picker { margin-left: 8px !important; }
.header-actions .workspace-board-picker > .workspace-board-picker-btn { margin-left: 0 !important; }
.workspace-launcher-card-icon,
.workspace-launcher-board-card-icon,
.workspace-launcher-board-choice-icon {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
.workspace-launcher-card-icon { border-radius: 0; }
.workspace-launcher-search-row { position: relative; }
.workspace-launcher-search-row .workspace-launcher-search-wrap { flex-wrap: nowrap; }
.workspace-launcher-help {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    color: rgba(255,255,255,.84);
    background: rgba(255,255,255,.035);
    font-size: .8rem;
    font-weight: 750;
}
.workspace-launcher-help:hover,
.workspace-launcher-help:focus-visible { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.09); color: #fff; }
.workspace-launcher-help:focus-visible { outline: 2px solid #9fc4ff; outline-offset: 2px; }
.workspace-launcher-scope {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    margin: 7px 0 0 4px;
    padding: 3px 5px 3px 9px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(240,245,255,.84);
    background: rgba(255,255,255,.045);
    font-size: .7rem;
}
.workspace-launcher-scope[hidden] { display: none !important; }
.workspace-launcher-scope > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-scope > button { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border: 0; border-radius: 50%; color: inherit; background: transparent; }
.workspace-launcher-scope > button:hover,
.workspace-launcher-scope > button:focus-visible { color: #fff; background: rgba(255,255,255,.12); }
.workspace-launcher-grid.is-board-browser { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.workspace-launcher-grid.is-board-browser > .workspace-launcher-board-tile {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 204px;
}
.workspace-launcher-board-card {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    color: #fff;
    text-align: left;
    background: rgba(14,20,30,.72);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.workspace-launcher-board-card:hover,
.workspace-launcher-board-card:focus-visible,
.workspace-launcher-board-tile.is-selected .workspace-launcher-board-card {
    border-color: rgba(135,184,255,.78);
    background-color: rgba(23,34,51,.9);
}
.workspace-launcher-board-card:focus-visible { outline: 2px solid #9fc4ff; outline-offset: 2px; }
.workspace-launcher-board-card-title { align-items: flex-start; padding-right: 38px; }
.workspace-launcher-board-card-copy strong { display: -webkit-box; overflow: hidden; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.workspace-launcher-board-card-copy small { max-width: 100%; }
.workspace-launcher-board-card-counts { color: rgba(235,241,250,.64); font-size: .7rem; }
.workspace-launcher-board-add-column {
    position: absolute;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 11px;
    color: #fff;
    background: rgba(14,20,30,.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, background .12s ease;
}
.workspace-launcher-board-tile:hover .workspace-launcher-board-add-column,
.workspace-launcher-board-tile:focus-within .workspace-launcher-board-add-column,
.workspace-launcher-board-tile.is-selected .workspace-launcher-board-add-column { opacity: 1; pointer-events: auto; }
.workspace-launcher-board-add-column:hover,
.workspace-launcher-board-add-column:focus-visible { background: rgba(55,100,171,.9); border-color: rgba(255,255,255,.45); }
.workspace-launcher-board-add-column:focus-visible { outline: 2px solid #9fc4ff; outline-offset: 2px; }
.workspace-launcher-board-card.has-preview .workspace-launcher-board-preview { min-height: 82px; }
.filter-tab { transition: none; }
.filter-tab:not(.active):hover { background: transparent !important; color: var(--text-secondary) !important; }
.filter-tab.active:hover { background: rgba(77,171,247,.2) !important; color: var(--text-primary) !important; }
.filter-tab:focus-visible { outline: 2px solid #9fc4ff; outline-offset: -3px; }
.filter-favorites-empty { display: flex; min-height: 190px; align-items: flex-end; justify-content: center; margin: 0; padding: 0 0 12px; color: var(--text-secondary); text-align: center; }
#searchModal #searchInput { border-color: rgba(255,255,255,.035) !important; box-shadow: none !important; }
#searchModal #searchInput:focus-visible { border-color: rgba(134,183,254,.9) !important; outline: 2px solid rgba(134,183,254,.82) !important; outline-offset: 2px; }
.card-relationship-count { display: inline-flex; align-items: center; gap: 6px; margin: 5px 0; color: var(--text-secondary); font-size: .72rem; }
.card-relationship-count > i { opacity: .75; }

/* Keep Reader overlay actions visible while matching the quieter control borders. */
#mdReaderEditBtn,
#mdReaderCloseBtn {
    border-color: rgba(255, 255, 255, .14) !important;
}
#mdReaderEditBtn:hover,
#mdReaderEditBtn:focus-visible,
#mdReaderCloseBtn:hover,
#mdReaderCloseBtn:focus-visible {
    border-color: rgba(255, 255, 255, .38) !important;
}

@container (min-width: 1360px) {
    .workspace-launcher-home-main > .workspace-launcher-grid.is-board-browser { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

@media (max-width: 767.98px) {
    .workspace-launcher-grid.is-board-browser > .workspace-launcher-board-tile {
        width: min(calc(100vw - 76px), 292px) !important;
        min-width: min(calc(100vw - 76px), 292px) !important;
        max-width: min(calc(100vw - 76px), 292px) !important;
        flex: 0 0 min(calc(100vw - 76px), 292px) !important;
        scroll-snap-align: start;
    }
    .workspace-launcher-board-add-column { opacity: 1; pointer-events: auto; }
}

/* Follow-up interaction polish: keep the card rail visible, make both halves
   of split controls share active state, and reserve a row for selection names. */
.cards-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 197, 253, .78) rgba(255, 255, 255, .04);
}
.cards-container::-webkit-scrollbar { display: block; width: 8px; }
.cards-container::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.cards-container::-webkit-scrollbar-thumb { min-height: 28px; background: rgba(147,197,253,.76); border: 1px solid rgba(9,22,39,.5); border-radius: 999px; }
.cards-container::-webkit-scrollbar-thumb:hover { background: rgba(191,219,254,.95); }

.app-header .board-tabs > .board-tab .board-tab-icon-slot {
    display: grid;
    width: 26px;
    height: 30px;
    flex: 0 0 26px;
    place-items: center;
}
.app-header .board-tabs > .board-tab .board-icon { display: grid; place-items: center; width: 100%; height: 100%; }
.app-header .board-tabs > .board-tab .board-tab-close-action {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: rgba(255,255,255,.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, background-color .12s ease;
}
.app-header .board-tabs > .board-tab.active .board-tab-close-action,
.app-header .board-tabs > .board-tab:hover .board-tab-close-action,
.app-header .board-tabs > .board-tab:focus-within .board-tab-close-action {
    opacity: 1;
    pointer-events: auto;
}
.app-header .board-tabs > .board-tab .board-tab-close-action:hover,
.app-header .board-tabs > .board-tab .board-tab-close-action:focus-visible { background: rgba(255,255,255,.2); }
.app-header .board-tabs > .board-tab .board-tab-close-action:focus-visible { outline: 2px solid #86b7fe; outline-offset: 1px; }
@media (hover: none), (pointer: coarse) {
    .app-header .board-tabs > .board-tab .board-tab-close-action { opacity: 1; pointer-events: auto; }
}

.selected-card-names-row {
    position: relative;
    z-index: 20;
    display: flex;
    min-width: 0;
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    border-bottom: 1px solid rgba(147,197,253,.18);
    background: rgba(12,20,31,.88);
    color: #f3f7ff;
}
.selected-card-name-chips { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 7px; overflow: hidden; }
.selected-card-name-chip {
    display: inline-flex;
    min-width: 0;
    max-width: 250px;
    flex: 0 1 auto;
    align-items: center;
    overflow: hidden;
    padding: 4px 9px;
    border: 1px solid rgba(147,197,253,.3);
    border-radius: 999px;
    color: #eaf3ff;
    background: rgba(59,130,246,.16);
    font-size: .75rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.selected-card-name-overflow {
    display: inline-grid;
    min-width: 42px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0 8px;
    border: 1px solid rgba(147,197,253,.42);
    border-radius: 999px;
    color: #fff;
    background: rgba(37,99,235,.38);
    font-size: .75rem;
    font-weight: 750;
}
.selected-card-name-overflow:hover,
.selected-card-name-overflow:focus-visible { background: rgba(37,99,235,.62); }
.selected-card-overflow-menu {
    position: absolute;
    top: calc(100% + 5px);
    right: 12px;
    z-index: 1050;
    display: grid;
    width: min(360px, calc(100vw - 24px));
    max-height: min(55vh, 420px);
    overflow: auto;
    padding: 6px;
    border: 1px solid rgba(147,197,253,.3);
    border-radius: 10px;
    background: rgba(19,27,39,.98);
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.selected-card-overflow-menu[hidden] { display: none; }
.selected-card-overflow-menu > button { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 7px; color: #f3f7ff; text-align: left; background: transparent; }
.selected-card-overflow-menu > button:hover,
.selected-card-overflow-menu > button:focus-visible { outline: none; background: rgba(59,130,246,.2); }
.selected-card-overflow-menu > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.selected-card-overflow-menu > button small { overflow: hidden; color: rgba(224,235,250,.62); text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }

.workspace-board-picker.is-open > .workspace-board-picker-btn,
.workspace-board-picker.is-open > .workspace-board-picker-menu-toggle,
.filter-header-action.has-active-filter > .filter-menu-toggle,
.filter-header-action.show > .filter-menu-toggle,
.filter-header-action > .filter-menu-toggle.is-open {
    border-color: rgba(96,165,250,.9) !important;
    color: #fff !important;
    background: rgba(37,99,235,.34) !important;
    box-shadow: inset 0 0 0 1px rgba(147,197,253,.16);
}
.workspace-board-picker-menu[data-anchor-side="right"]::before,
.workspace-board-picker-menu[data-anchor-side="left"]::before {
    position: absolute;
    top: -5px;
    width: 9px;
    height: 9px;
    content: '';
    border-top: 1px solid rgba(255,255,255,.17);
    border-left: 1px solid rgba(255,255,255,.17);
    background: inherit;
    transform: rotate(45deg);
}
.workspace-board-picker-menu[data-anchor-side="right"]::before { left: 14px; }
.workspace-board-picker-menu[data-anchor-side="left"]::before { right: 14px; }

.workspace-launcher-card-topline { justify-content: center; }
.workspace-launcher-space-preview-icon { margin-inline: auto; }
.workspace-launcher-help-mark { display: block; line-height: 1; transform: translateY(-.02em); }
.workspace-launcher-board-card-summary { display: flex; width: 100%; justify-content: flex-end; margin: -1px 0 2px; text-align: right; }
.workspace-launcher-board-card-counts { text-align: right; }
.workspace-launcher-board-actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; justify-content: flex-end; pointer-events: none; }
.workspace-launcher-board-add-column { position: static; pointer-events: none; }
.workspace-launcher-board-tile:hover .workspace-launcher-board-add-column,
.workspace-launcher-board-tile:focus-within .workspace-launcher-board-add-column,
.workspace-launcher-board-tile.is-selected .workspace-launcher-board-add-column { pointer-events: auto; }
.workspace-launcher-board-card.preview-background-hidden .workspace-launcher-board-preview { background-color: rgba(45,58,76,.72); background-image: linear-gradient(145deg, rgba(95,122,160,.26), rgba(15,22,33,.82)); }
.workspace-launcher-board-card.preview-columns-hidden .workspace-launcher-mini-column { display: none; }

/* EVA's resize affordance stays keyboard available when shown, with the same
   blue selection color used by the rest of the application. */
.eva-dock-resize-toggle {
    position: absolute;
    top: 8px;
    left: 11px;
    z-index: 32;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(147,197,253,.3);
    border-radius: 7px;
    color: rgba(219,234,254,.78);
    background: rgba(30,41,59,.72);
}
.eva-dock-resize-toggle:hover,
.eva-dock-resize-toggle:focus-visible { border-color: rgba(96,165,250,.78); color: #fff; background: rgba(37,99,235,.3); }
.eva-dock-resize-toggle:focus-visible { outline: 2px solid #86b7fe; outline-offset: 1px; }
.eva-dock-resize-handle:hover::before,
.eva-dock-resize-handle:focus-visible::before,
body.eva-dock-resizing .eva-dock-resize-handle::before { background: rgba(96,165,250,.9); }
.eva-dock-resize-handle:focus-visible { outline-color: rgba(96,165,250,.82); }
#evaDockPane #askEvaModal .eva-workspace-header { box-sizing: border-box; display: flex; min-width: 0; align-items: center; gap: 8px; padding-left: 46px; }
#evaDockPane #askEvaModal .eva-brand { min-width: 0; flex: 1 1 auto; }
#evaDockPane #askEvaModal .eva-header-actions { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; }
#evaDockPane #askEvaModal .eva-header-actions > button,
#evaDockPane #askEvaModal .eva-provider-status { display: inline-flex; box-sizing: border-box; width: 34px; min-width: 34px; max-width: 34px; height: 34px; min-height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; padding: 0; }
#evaDockPane #askEvaModal .eva-header-actions > button i,
#evaDockPane #askEvaModal .eva-provider-status > i { display: block; margin: 0; line-height: 1; }
#askEvaModal .eva-send-button { background: #2563eb; color: #fff; }
#askEvaModal .eva-send-button:hover,
#askEvaModal .eva-send-button:focus-visible { background: #3b82f6; }
#askEvaModal .eva-send-button:disabled { background: #1d4ed8; color: rgba(255,255,255,.74); }

@media (max-width: 560px) {
    .selected-card-names-row { padding-inline: 8px; }
    .selected-card-name-chip { max-width: 170px; }
    #evaDockPane #askEvaModal .eva-workspace-header { padding-left: 42px; }
}

/* Docked Eva actions keep their own box model and center inside the pane. */
#evaDockPane #askEvaModal .eva-workspace-header { display: flex; min-width: 0; align-items: center; gap: 8px; overflow: visible; }
#evaDockPane #askEvaModal .eva-brand { min-width: 0; flex: 0 1 auto; }
#evaDockPane #askEvaModal .eva-header-actions { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; }
#evaDockPane #askEvaModal .eva-header-actions > button,
#evaDockPane #askEvaModal .eva-header-actions > .eva-provider-control { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; }
#evaDockPane #askEvaModal .eva-header-actions > button { box-sizing: border-box; }

/* Match the active Filter treatment while the corresponding header action is open or running. */
.header-actions :is(#workspaceBoardPicker, #workspaceBoardMenuToggle)[aria-expanded="true"],
body:has(#workspaceLauncherModal.show) .header-actions #workspaceBoardPicker,
body:has(#automationInboxModal.show) .header-actions #inboxHeaderBtn,
.header-actions #inboxHeaderBtn[aria-expanded="true"],
.header-actions #askEvaHeaderBtn[aria-expanded="true"],
.header-actions .eva-header-button[aria-expanded="true"],
.header-actions .prism-sync-widget:has(.sync-badge-syncing),
.header-actions .sync-widget[data-sync-status="syncing"] {
    border-color: rgba(96,165,250,.9) !important;
    color: #fff !important;
    background: rgba(37,99,235,.28) !important;
    box-shadow: 0 0 0 2px rgba(96,165,250,.2) !important;
}

.card-tags { margin-bottom: 16px; }
.card-related-links { margin-top: 8px; margin-bottom: 8px; }
#cardModal .card-editor-relationship-list { margin-top: 8px; margin-bottom: 8px; }
#columnsContainer .card .card-actions-header :is(.card-favorite-toggle, .card-expand-toggle) {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
#columnsContainer .card .card-actions-header :is(.card-favorite-toggle, .card-expand-toggle):hover { color: #fff !important; background: rgba(255,255,255,.1) !important; }
#columnsContainer .card .card-actions-header :is(.card-favorite-toggle, .card-expand-toggle):focus-visible { outline: 2px solid rgba(134,183,254,.95); outline-offset: 2px; }
.app-header .board-tabs .board-sync-pending-dot + .board-name { margin-left: 5px; }

@media (max-width: 767.98px) {
    .workspace-launcher-modal .workspace-launcher-dialog {
        top: 0 !important;
        left: max(env(safe-area-inset-left, 0px), 0px) !important;
        width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
        height: 100dvh;
        max-height: 100dvh;
    }
    .workspace-launcher-modal .workspace-launcher-surface { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0 !important; }
    .workspace-launcher-header { gap: 7px; padding-left: max(9px, env(safe-area-inset-left, 0px)); padding-right: max(9px, env(safe-area-inset-right, 0px)); }
    .workspace-launcher-heading { min-width: 0; gap: 6px; }
    .workspace-launcher-mark { width: 34px; height: 34px; }
    .workspace-launcher-header-actions { gap: 3px; }
    .workspace-launcher-header-actions .workspace-launcher-icon-button { width: 36px; height: 36px; }
    .workspace-launcher-search-row { padding-right: max(10px, env(safe-area-inset-right, 0px)); padding-left: max(10px, env(safe-area-inset-left, 0px)); }
    .workspace-launcher-body { padding-right: max(10px, env(safe-area-inset-right, 0px)); padding-left: max(10px, env(safe-area-inset-left, 0px)); }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.has-many-workspaces,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.is-board-browser { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; }
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-card,
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid > .workspace-launcher-add-card { height: 158px; }
    .workspace-launcher-card-icon { width: 40px; height: 40px; font-size: 21px; }
    .workspace-launcher-card-center { gap: 5px; padding: 6px 10px 44px !important; }
    .workspace-launcher-card-name { font-size: clamp(.86rem, 4vw, 1.08rem); }
    .workspace-launcher-card-action { width: 33px !important; height: 33px !important; }
    .workspace-launcher-add-card { gap: 6px; font-size: .75rem; text-align: center; }
    .workspace-launcher-add-icon { width: 31px; height: 31px; }
    .workspace-launcher-grid.is-board-browser > .workspace-launcher-board-card { min-height: 170px; padding: 7px; gap: 6px; }
    .workspace-launcher-board-card-title { gap: 5px; }
    .workspace-launcher-board-card-icon { width: 26px; height: 26px; flex-basis: 26px; }
    .workspace-launcher-board-card-copy strong { font-size: .73rem; }
    .workspace-launcher-board-card-copy small { font-size: .6rem; }
    .workspace-launcher-board-preview { gap: 3px; padding: 4px; }
    .workspace-launcher-mini-column { padding: 3px; }
    .workspace-launcher-mini-column > strong { font-size: .5rem; }
    .workspace-launcher-mini-column > span { padding: 2px; font-size: .45rem; }
    .workspace-launcher-footer {
        display: flex;
        min-height: 56px;
        justify-content: space-between;
        gap: 5px;
        padding-right: max(7px, env(safe-area-inset-right, 0px));
        padding-left: max(7px, env(safe-area-inset-left, 0px));
    }
    .workspace-launcher-footer-side { gap: 4px; }
    .workspace-launcher-footer-action { width: 36px; min-width: 36px; min-height: 36px; padding: 0; border-radius: 9px; font-size: 0; }
    .workspace-launcher-footer-action > i { font-size: 15px; }
    .workspace-launcher-footer-action > span { display: none; }
    .workspace-launcher-footer-action .workspace-launcher-sync-count { display: block; position: absolute; margin: -23px 0 0 23px; padding: 1px 4px; font-size: .58rem; }
    .workspace-launcher-footer-right { justify-content: flex-end; }
    .workspace-launcher-browse-switch { gap: 1px; padding: 2px; }
    .workspace-launcher-browse-switch > button { min-height: 32px; padding: 5px 8px; font-size: .68rem; }
}

@media (max-width: 359.98px) {
    .workspace-launcher-header { gap: 5px; }
    .workspace-launcher-heading { gap: 5px; }
    .workspace-launcher-mark { width: 30px; height: 30px; }
    .workspace-launcher-header-actions { gap: 2px; }
    .workspace-launcher-header-actions .workspace-launcher-icon-button { width: 31px; height: 31px; }
    .workspace-launcher-browse-switch { gap: 0; padding: 1px; }
    .workspace-launcher-browse-switch > button { min-height: 30px; padding: 4px 5px; font-size: .62rem; }
}

/* 2026-10-05: balanced, resizable workspace browser and its remembered sections. */
.workspace-launcher-modal .workspace-launcher-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}
.workspace-launcher-header-leading,
.workspace-launcher-leading-actions,
.workspace-launcher-header-actions { display: flex; min-width: 0; align-items: center; }
.workspace-launcher-header-leading { grid-column: 1; grid-row: 1; }
.workspace-launcher-leading-actions { justify-content: flex-start; gap: 6px; }
.workspace-launcher-browse-switch { grid-column: 2; grid-row: 1; justify-self: center; }
.workspace-launcher-header-actions { grid-column: 3; grid-row: 1; justify-content: flex-end; }
.workspace-launcher-header-leading.is-home .workspace-launcher-heading-copy { display: none !important; }
.workspace-launcher-leading-actions .workspace-launcher-icon-button,
.workspace-launcher-header-actions .workspace-launcher-icon-button,
.workspace-launcher-card-action,
.workspace-launcher-add-icon { box-sizing: border-box; }
.workspace-launcher-card-action { display: grid !important; place-items: center !important; padding: 0 !important; }
.workspace-launcher-card-action > i,
.workspace-launcher-leading-actions .workspace-launcher-icon-button > i,
.workspace-launcher-add-icon > i { display: block; width: auto; height: auto; margin: 0; flex: 0 0 auto; line-height: 1; }
.workspace-launcher-add-icon { flex: 0 0 auto; align-items: center; justify-content: center; padding: 0; }
.workspace-launcher-card.is-current.is-selected .workspace-launcher-card-main::after { display: none !important; content: none !important; }
.workspace-launcher-current-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    color: #fff;
    background: rgba(8,15,25,.7);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}
.workspace-launcher-current-badge > i { display: block; font-size: .64rem; line-height: 1; }
.workspace-launcher-card-center { padding-bottom: 48px !important; }
.workspace-launcher-section-heading { align-items: stretch; }
.workspace-launcher-section-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    color: inherit;
    text-align: left;
    background: transparent;
}
.workspace-launcher-section-toggle > span { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.workspace-launcher-section-toggle h3 { margin: 0; color: rgba(255,255,255,.94); font-size: .98rem; font-weight: 750; }
.workspace-launcher-section-toggle small { color: rgba(255,255,255,.55); font-size: .75rem; }
.workspace-launcher-section-toggle > i { flex: 0 0 auto; color: rgba(230,238,250,.68); font-size: .78rem; }
.workspace-launcher-section-toggle:hover h3,
.workspace-launcher-section-toggle:hover > i { color: #fff; }
.workspace-launcher-section-toggle:focus-visible { outline: 2px solid #86b7fe; outline-offset: 3px; }
.workspace-launcher-board-shelf-header { margin-bottom: 7px; }
.workspace-launcher-board-shelf-toggle { min-height: 34px; }
.workspace-launcher-board-shelf-toggle > span { min-width: 0; flex-wrap: wrap; }
.workspace-launcher-board-shelf-toggle h3 { white-space: nowrap; }
.workspace-launcher-board-shelf-toggle strong { max-width: min(44vw, 340px); }
.workspace-launcher-board-shelf-content[hidden],
.workspace-launcher-continue-content[hidden] { display: none !important; }
.workspace-launcher-board-preview { background-repeat: no-repeat; }
.workspace-launcher-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: none;
    touch-action: none;
}
.workspace-launcher-resize::after { display: none; content: none; }
.workspace-launcher-resize:focus-visible {
    width: 30px;
    height: 30px;
    overflow: visible;
    clip-path: none;
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    outline: 2px solid #86b7fe;
    outline-offset: -2px;
}
.workspace-launcher-resize[hidden] { display: none !important; }
.workspace-launcher-surface.is-resizing { transition: none !important; }
.workspace-launcher-modal.show .workspace-launcher-surface {
    position: relative;
    box-sizing: border-box;
    height: var(--workspace-launcher-height, auto) !important;
    max-height: var(--workspace-launcher-available-height, calc(100dvh - 32px)) !important;
}
/* 2026-10-05: adaptive workspace browser and in-place workspace form. */
.workspace-launcher-surface { container-type: inline-size; }
.workspace-launcher-home-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.workspace-launcher-home-main,
.workspace-launcher-context-panel { min-width: 0; }
.workspace-launcher-context-panel { display: grid; align-content: start; gap: 14px; }
.workspace-launcher-card-name { overflow-wrap: break-word; word-break: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-wrap: balance; }
.workspace-launcher-workspace-overlay { position: absolute; inset: 0; z-index: 20; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; color: #fff; background: #101722; }
.workspace-launcher-workspace-form-header { display: flex; min-height: 62px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(21,31,46,.98); }
.workspace-launcher-workspace-form-header h2 { min-width: 0; margin: 0; font-size: clamp(1rem, 2.3cqi, 1.35rem); white-space: nowrap; }
.workspace-launcher-workspace-form-header > div { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.workspace-launcher-form-primary,
.workspace-launcher-form-secondary { min-height: 38px; padding: 6px 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; color: #fff; background: rgba(255,255,255,.08); }
.workspace-launcher-form-primary { border-color: rgba(91,164,255,.55); background: rgba(48,111,189,.48); font-weight: 700; }
.workspace-launcher-workspace-form-body { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 18px; }
.workspace-launcher-workspace-form-body > label,
.workspace-launcher-workspace-form-body legend { display: block; margin: 0 0 8px; font-weight: 650; }
.workspace-launcher-form-name .form-control { min-height: 44px; color: #fff; background: rgba(8,13,22,.5); }
.workspace-launcher-form-board-list { display: grid; max-height: min(48vh, 440px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 5px; overflow: auto; padding: 4px; }
.workspace-launcher-form-board { display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid transparent; border-radius: 8px; cursor: pointer; }
.workspace-launcher-form-board:hover { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.06); }
.workspace-launcher-form-board > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-form-board-icon { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 7px; background: rgba(255,255,255,.08); }
.workspace-launcher-form-status { min-height: 24px; margin-top: 10px; color: #ffb4ab; }
.workspace-launcher-footer-status { max-width: min(34vw, 360px); overflow: hidden; color: rgba(255,255,255,.74); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-modal .workspace-launcher-header:has(#workspaceLauncherBrowseSwitch[hidden]) { grid-template-columns: minmax(0,1fr) auto; }
.workspace-launcher-heading-copy h2 { margin: 0; font-size: clamp(.95rem, 2cqi, 1.2rem); line-height: 1.2; white-space: nowrap; }
.workspace-launcher-heading-copy p { max-width: 46ch; margin: 2px 0 0; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-launcher-footer-action[aria-pressed] { min-width: 38px; padding: 7px; }
.workspace-launcher-board-card-title { gap: 6px; }
.workspace-launcher-board-column-total { flex: 0 0 auto; color: rgba(255,255,255,.62); font-size: .65rem; white-space: nowrap; }
.workspace-launcher-mini-column > strong { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.workspace-launcher-mini-column > strong > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.workspace-launcher-mini-column > strong > small { flex: 0 0 auto; color: rgba(255,255,255,.62); font-size: .52rem; }
.workspace-launcher-resize-edge,
.workspace-launcher-resize-corner { position: absolute; z-index: 7; touch-action: none; }
.workspace-launcher-resize-corner { z-index: 8; }
.workspace-launcher-resize-edge.is-n { top: 0; right: 20px; left: 20px; height: 7px; cursor: ns-resize; }
.workspace-launcher-resize-edge.is-s { right: 22px; bottom: 0; left: 22px; height: 7px; cursor: ns-resize; }
.workspace-launcher-resize-edge.is-e { top: 20px; right: 0; bottom: 22px; width: 7px; cursor: ew-resize; }
.workspace-launcher-resize-edge.is-w { top: 20px; bottom: 22px; left: 0; width: 7px; cursor: ew-resize; }
.workspace-launcher-resize-corner { width: 18px; height: 18px; }
.workspace-launcher-resize-corner.is-nw { top: 0; left: 0; cursor: nwse-resize; }
.workspace-launcher-resize-corner.is-ne { top: 0; right: 0; cursor: nesw-resize; }
.workspace-launcher-resize-corner.is-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.workspace-launcher-resize-corner.is-se { right: 0; bottom: 0; cursor: nwse-resize; }

@container (min-width: 1080px) {
    .workspace-launcher-home-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: 16px; }
    .workspace-launcher-home-main,
    .workspace-launcher-context-panel { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .workspace-launcher-home-main { padding: 2px 5px 6px 2px; }
    .workspace-launcher-home-main > .workspace-launcher-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .workspace-launcher-home-main > .workspace-launcher-grid.is-board-browser { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .workspace-launcher-context-panel { padding: 2px 3px 6px; }
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid,
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid.has-many-workspaces,
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid.is-board-browser { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@container (max-width: 820px) {
    .workspace-launcher-home-main > .workspace-launcher-grid,
    .workspace-launcher-home-main > .workspace-launcher-grid.has-many-workspaces,
    .workspace-launcher-home-main > .workspace-launcher-grid.is-board-browser { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .workspace-launcher-card-name { font-size: clamp(.88rem, 3.2cqi, 1.25rem) !important; }
    .workspace-launcher-heading-copy h2 { font-size: clamp(.95rem, 2.4cqi, 1.25rem); white-space: nowrap; }
}
@media (min-width: 768px) {
    @container (max-width: 980px) {
        .workspace-launcher-card-name { font-size: clamp(.72rem, 1.65cqi, .98rem) !important; }
        .workspace-launcher-board-count { font-size: clamp(.68rem, 1.05cqi, .82rem); }
        .workspace-launcher-board-card-copy strong { font-size: clamp(.64rem, 1.1cqi, .78rem); }
    }
}
.workspace-launcher-workspace-overlay ~ .workspace-launcher-resize-edge,
.workspace-launcher-workspace-overlay ~ .workspace-launcher-resize-corner { display: none; }

@media (max-width: 767.98px) {
    .workspace-launcher-modal .workspace-launcher-dialog {
        left: max(env(safe-area-inset-left, 0px), 0px) !important;
        width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    }
    .workspace-launcher-modal.show .workspace-launcher-surface {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }
    .workspace-launcher-footer { margin-bottom: 4px; }
    .workspace-launcher-modal .workspace-launcher-header { grid-template-columns: minmax(32px, 1fr) auto minmax(66px, 1fr); column-gap: 4px; }
    .workspace-launcher-header-leading { justify-content: flex-start; }
    .workspace-launcher-leading-actions .workspace-launcher-icon-button { width: 34px; height: 34px; }
    .workspace-launcher-header-actions { gap: 3px; }
    .workspace-launcher-section-toggle > span { gap: 6px; }
    .workspace-launcher-board-shelf-toggle strong { max-width: 40vw; }
    .workspace-launcher-resize { display: none !important; }
    .workspace-launcher-footer { padding-right: max(9px, env(safe-area-inset-right, 0px)); padding-left: max(9px, env(safe-area-inset-left, 0px)); }
}
@media (max-width: 359.98px) {
    .workspace-launcher-modal .workspace-launcher-header { grid-template-columns: minmax(28px, 1fr) auto minmax(64px, 1fr); column-gap: 3px; }
    .workspace-launcher-leading-actions .workspace-launcher-icon-button,
    .workspace-launcher-header-actions .workspace-launcher-icon-button { width: 31px; height: 31px; }
    .workspace-launcher-browse-switch > button { padding-right: 4px; padding-left: 4px; font-size: .58rem; }
}

/* Boardeva 2026-10-05: split filter actions and launcher controls. */
.header-actions .filter-header-action {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    height: var(--header-control-height);
    overflow: visible;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 22px;
    background: rgba(255,255,255,.1);
    box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 0 rgba(255,255,255,.12) inset;
}
.header-actions .filter-header-action > #filterDropdown {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--header-control-height) !important;
    min-width: var(--header-control-height) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 20px 0 0 20px !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
}
.header-actions .filter-header-action > #filterDropdown.header-action-with-text {
    width: auto !important;
    min-width: var(--header-control-height) !important;
    padding-inline: 14px !important;
    gap: 7px;
}
.header-actions .filter-header-action > #filterDropdown { border-radius: 20px 0 0 20px !important; }
.header-actions .filter-header-action > #filterMenuToggle {
    flex: 0 0 30px;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-left: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 0 20px 20px 0 !important;
    color: rgba(255,255,255,.84) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.header-actions .filter-header-action > #filterDropdown:hover,
.header-actions .filter-header-action > #filterDropdown:focus-visible,
.header-actions .filter-header-action > #filterMenuToggle:hover,
.header-actions .filter-header-action > #filterMenuToggle:focus-visible {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
}
.header-actions .filter-header-action > #filterDropdown:focus-visible,
.header-actions .filter-header-action > #filterMenuToggle:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid #86b7fe;
    outline-offset: -3px;
}
.header-actions .filter-header-action > #filterDropdown[aria-expanded="true"],
.header-actions .filter-header-action > #filterDropdown.filter-has-active {
    color: #fff !important;
    background: rgba(48,111,189,.48) !important;
}
.header-actions .filter-header-action:has(.filter-dropdown-menu.show) {
    border-color: rgba(89,157,255,.85);
    box-shadow: 0 0 0 2px rgba(55,132,237,.2), 0 2px 8px rgba(0,0,0,.22);
}
.header-actions .filter-header-action > #filterDropdown .filter-active-count { margin-left: 5px; }
.filter-dropdown-menu.filter-controls-hidden .filter-tabs,
.filter-dropdown-menu.filter-controls-hidden .filter-content { display: none !important; }
.filter-display-options { flex-wrap: wrap; }
.filter-panel-visibility { flex: 0 0 auto; min-width: 34px; margin-left: 0; }
.filter-dropdown-menu .filter-options-button { display: none; }

.workspace-launcher-preview-control { gap: 0; overflow: visible; border: 1px solid rgba(255,255,255,.19); border-radius: 10px; }
.workspace-launcher-preview-control .workspace-launcher-footer-action {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.workspace-launcher-preview-control .workspace-launcher-preview-menu-toggle { border-left: 1px solid rgba(255,255,255,.16); }
.workspace-launcher-preview-control .workspace-launcher-preview-toggle { border-radius: 9px 0 0 9px; }
.workspace-launcher-preview-control .workspace-launcher-preview-menu-toggle { border-radius: 0 9px 9px 0; }
.workspace-launcher-preview-control .workspace-launcher-footer-action:hover,
.workspace-launcher-preview-control .workspace-launcher-footer-action:focus-visible { border-color: transparent; }

@container (min-width: 1280px) {
    .workspace-launcher-modal.is-split-panels .workspace-launcher-home-main > #workspaceLauncherGrid:not(.is-board-browser),
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid:not(.is-board-browser) {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}
@container (min-width: 900px) {
    .workspace-launcher-modal:not(.is-split-panels) .workspace-launcher-home-main > #workspaceLauncherGrid:not(.is-board-browser) {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }
}

.workspace-launcher-manage-drag { touch-action: none; user-select: none; -webkit-user-select: none; }

/* Active tag filters stay visibly selected on every matching card chip. */
#columnsContainer .card .card-tags .tag.card-tag-filter.is-filter-active {
    border-color: rgba(77, 171, 247, .9) !important;
    color: #e4f4ff !important;
    background: rgba(77, 171, 247, .26) !important;
    box-shadow: inset 0 0 0 1px rgba(77, 171, 247, .16) !important;
}

#columnsContainer .card .card-tags .tag.card-tag-filter:focus-visible {
    outline: 2px solid rgba(77, 171, 247, .95);
    outline-offset: 2px;
}

/* The cards container is the scroll surface for mounted card windows. Extend
   its right edge through the column's existing 15px padding, then put that
   space back inside the scrollport so card content still clears the rail. */
@media (min-width: 769px) {
    #columnsContainer > .column:not(.collapsed) .column-body {
        scrollbar-width: none;
    }

    #columnsContainer > .column:not(.collapsed) .column-body::-webkit-scrollbar {
        display: none;
    }

    #columnsContainer > .column:not(.collapsed) .cards-container {
        box-sizing: border-box;
        margin-right: -15px;
        padding-right: 15px;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Match workspace density whenever the launcher pane can support three
   readable board tiles. Medium split panes keep the two-column grid. */
.workspace-launcher-home-main {
    container-type: inline-size;
    container-name: workspace-launcher-main;
}

@container workspace-launcher-main (min-width: 900px) {
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid.is-board-browser {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@container workspace-launcher-main (max-width: 899.98px) {
    #workspaceLauncherView .workspace-launcher-home-main #workspaceLauncherGrid.is-board-browser {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.is-board-browser {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px !important;
    }

    .workspace-launcher-body #workspaceLauncherView #workspaceLauncherGrid.is-board-browser > .workspace-launcher-board-tile {
        width: min(calc(100vw - 76px), 292px) !important;
        min-width: min(calc(100vw - 76px), 292px) !important;
        max-width: min(calc(100vw - 76px), 292px) !important;
        flex: 0 0 min(calc(100vw - 76px), 292px) !important;
        scroll-snap-align: start;
    }
}

/* Final cascade for the follow-up UI fixes. */
.cards-container { scrollbar-width: thin; scrollbar-color: rgba(147,197,253,.78) rgba(255,255,255,.04); }
.cards-container::-webkit-scrollbar { display: block; width: 8px; }
.cards-container::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.cards-container::-webkit-scrollbar-thumb { min-height: 28px; background: rgba(147,197,253,.76); border: 1px solid rgba(9,22,39,.5); border-radius: 999px; }
.cards-container::-webkit-scrollbar-thumb:hover { background: rgba(191,219,254,.95); }
.app-header .board-tabs > .board-tab .board-tab-icon-slot { display: grid; width: 26px; height: 30px; flex: 0 0 26px; place-items: center; }
.app-header .board-tabs > .board-tab .board-icon { display: grid; width: 100%; height: 100%; place-items: center; }
.app-header .board-tabs > .board-tab .board-tab-close-action { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 6px; color: #fff; background: rgba(255,255,255,.1); opacity: 0; pointer-events: none; transition: opacity .12s ease, background-color .12s ease; }
.app-header .board-tabs > .board-tab.active .board-tab-close-action,
.app-header .board-tabs > .board-tab:hover .board-tab-close-action,
.app-header .board-tabs > .board-tab:focus-within .board-tab-close-action { opacity: 1; pointer-events: auto; }
.app-header .board-tabs > .board-tab .board-tab-close-action:hover,
.app-header .board-tabs > .board-tab .board-tab-close-action:focus-visible { background: rgba(255,255,255,.2); }
.app-header .board-tabs > .board-tab .board-tab-close-action:focus-visible { outline: 2px solid #86b7fe; outline-offset: 1px; }
@media (hover: none), (pointer: coarse) { .app-header .board-tabs > .board-tab .board-tab-close-action { opacity: 1; pointer-events: auto; } }
.selected-card-names-row { position: relative; z-index: 20; display: flex; min-width: 0; min-height: 38px; align-items: center; gap: 7px; padding: 4px 12px; border-bottom: 1px solid rgba(147,197,253,.18); background: rgba(12,20,31,.88); color: #f3f7ff; }
.selected-card-name-chips { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 7px; overflow: hidden; }
.selected-card-name-chip { display: inline-flex; min-width: 0; max-width: 250px; flex: 0 1 auto; align-items: center; overflow: hidden; padding: 4px 9px; border: 1px solid rgba(147,197,253,.3); border-radius: 999px; color: #eaf3ff; background: rgba(59,130,246,.16); font-size: .75rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.selected-card-name-overflow { display: inline-grid; min-width: 42px; height: 28px; flex: 0 0 auto; place-items: center; padding: 0 8px; border: 1px solid rgba(147,197,253,.42); border-radius: 999px; color: #fff; background: rgba(37,99,235,.38); font-size: .75rem; font-weight: 750; }
.selected-card-name-overflow:hover, .selected-card-name-overflow:focus-visible { background: rgba(37,99,235,.62); }
.selected-card-overflow-menu { position: absolute; top: calc(100% + 5px); right: 12px; z-index: 1050; display: grid; width: min(360px, calc(100vw - 24px)); max-height: min(55vh, 420px); overflow: auto; padding: 6px; border: 1px solid rgba(147,197,253,.3); border-radius: 10px; background: rgba(19,27,39,.98); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.selected-card-overflow-menu[hidden] { display: none; }
.selected-card-overflow-menu > button { display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 7px; color: #f3f7ff; text-align: left; background: transparent; }
.selected-card-overflow-menu > button:hover, .selected-card-overflow-menu > button:focus-visible { outline: none; background: rgba(59,130,246,.2); }
.selected-card-overflow-menu > button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.selected-card-overflow-menu > button small { overflow: hidden; color: rgba(224,235,250,.62); text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.workspace-board-picker.is-open > .workspace-board-picker-btn,
.workspace-board-picker.is-open > .workspace-board-picker-menu-toggle,
body:has(#workspaceLauncherModal.show) .header-actions #workspaceBoardPicker,
body:has(#workspaceLauncherModal.show) .header-actions #workspaceBoardMenuToggle,
.filter-header-action.has-active-filter > .filter-menu-toggle,
.filter-header-action.show > .filter-main-button,
.filter-header-action.show > .filter-menu-toggle,
.filter-header-action > .filter-menu-toggle.is-open { border-color: rgba(96,165,250,.9) !important; color: #fff !important; background: rgba(37,99,235,.34) !important; box-shadow: inset 0 0 0 1px rgba(147,197,253,.16); }
.workspace-board-picker-menu[data-anchor-side="right"]::before, .workspace-board-picker-menu[data-anchor-side="left"]::before { position: absolute; top: -5px; width: 9px; height: 9px; content: ''; border-top: 1px solid rgba(255,255,255,.17); border-left: 1px solid rgba(255,255,255,.17); background: inherit; transform: rotate(45deg); }
.workspace-board-picker-menu[data-anchor-side="right"]::before { left: 14px; }
.workspace-board-picker-menu[data-anchor-side="left"]::before { right: 14px; }
.workspace-launcher-card-topline { justify-content: center; }
.workspace-launcher-space-preview-icon { margin-inline: auto; }
.workspace-launcher-help-mark { display: block; line-height: 1; transform: translateY(-.02em); }
.workspace-launcher-board-card-summary { display: flex; width: 100%; justify-content: flex-end; margin: -1px 0 2px; text-align: right; }
.workspace-launcher-board-card-counts { text-align: right; }
.workspace-launcher-board-actions { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; justify-content: flex-end; pointer-events: none; }
.workspace-launcher-board-add-column { position: static; pointer-events: none; }
.workspace-launcher-board-tile:hover .workspace-launcher-board-add-column,
.workspace-launcher-board-tile:focus-within .workspace-launcher-board-add-column,
.workspace-launcher-board-tile.is-selected .workspace-launcher-board-add-column { pointer-events: auto; }
.workspace-launcher-board-card.preview-background-hidden .workspace-launcher-board-preview { background-color: rgba(45,58,76,.72); background-image: linear-gradient(145deg, rgba(95,122,160,.26), rgba(15,22,33,.82)); }
.workspace-launcher-board-card.preview-columns-hidden .workspace-launcher-mini-column { display: none; }
.eva-dock-resize-toggle { position: absolute; top: 8px; left: 11px; z-index: 32; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 1px solid rgba(147,197,253,.3); border-radius: 7px; color: rgba(219,234,254,.78); background: rgba(30,41,59,.72); }
.eva-dock-resize-toggle:hover, .eva-dock-resize-toggle:focus-visible { border-color: rgba(96,165,250,.78); color: #fff; background: rgba(37,99,235,.3); }
.eva-dock-resize-toggle:focus-visible { outline: 2px solid #86b7fe; outline-offset: 1px; }
.eva-dock-resize-handle:hover::before, .eva-dock-resize-handle:focus-visible::before, body.eva-dock-resizing .eva-dock-resize-handle::before { background: rgba(96,165,250,.9); }
.eva-dock-resize-handle:focus-visible { outline-color: rgba(96,165,250,.82); }
#evaDockPane #askEvaModal .eva-workspace-header { box-sizing: border-box; display: flex; min-width: 0; align-items: center; gap: 8px; padding-left: 46px; }
#evaDockPane #askEvaModal .eva-brand { min-width: 0; flex: 1 1 auto; }
#evaDockPane #askEvaModal .eva-header-actions { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 5px; margin-left: auto; }
#evaDockPane #askEvaModal .eva-header-actions > button, #evaDockPane #askEvaModal .eva-provider-status { display: inline-flex; box-sizing: border-box; width: 34px; min-width: 34px; max-width: 34px; height: 34px; min-height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; padding: 0; }
#evaDockPane #askEvaModal .eva-header-actions > button i, #evaDockPane #askEvaModal .eva-provider-status > i { display: block; margin: 0; line-height: 1; }
#askEvaModal .eva-send-button { background: #2563eb; color: #fff; }
#askEvaModal .eva-send-button:hover, #askEvaModal .eva-send-button:focus-visible { background: #3b82f6; }
#askEvaModal .eva-send-button:disabled { background: #1d4ed8; color: rgba(255,255,255,.74); }
.filter-tab:not(.active):hover { background: transparent !important; color: var(--text-secondary) !important; }
.filter-tab.active:hover { background: rgba(77,171,247,.2) !important; color: var(--text-primary) !important; }
.header-actions .filter-header-action.has-active-filter > #filterDropdown,
.header-actions .filter-header-action.has-active-filter > #filterMenuToggle,
.header-actions .filter-header-action.show > #filterDropdown,
.header-actions .filter-header-action.show > #filterMenuToggle { border-color: rgba(96,165,250,.9) !important; color: #fff !important; background: rgba(37,99,235,.34) !important; box-shadow: inset 0 0 0 1px rgba(147,197,253,.16); }
@media (max-width: 560px) { .selected-card-names-row { padding-inline: 8px; } .selected-card-name-chip { max-width: 170px; } #evaDockPane #askEvaModal .eva-workspace-header { padding-left: 42px; } }