@import url(light.css);

    :root {
      --app-font-family: 'Google Sans Flex', Arial, Helvetica, sans-serif;
      --app-font-mono: 'Google Sans Code', monospace;

      --md-ref-typeface-brand: var(--app-font-family);
      --md-ref-typeface-plain: var(--app-font-family);
      --md-ref-typeface-mono: var(--app-font-mono);

      font-family: var(--md-ref-typeface-plain);
      font-size: 14px;

      background-color: var(--md-sys-color-background);
      color: var(--md-sys-color-on-background);

      /* ─── MD3 Typescale Tokens (source: Claude Design) ─── */
      --md-sys-typescale-display-large-font: var(--app-font-family);
      --md-sys-typescale-display-large-size: 64px;
      --md-sys-typescale-display-large-weight: 900;
      --md-sys-typescale-display-large-line-height: 1.2;
      --md-sys-typescale-display-large-tracking: -0.02em;

      --md-sys-typescale-display-medium-font: var(--app-font-family);
      --md-sys-typescale-display-medium-size: 48px;
      --md-sys-typescale-display-medium-weight: 700;
      --md-sys-typescale-display-medium-line-height: 1.2;
      --md-sys-typescale-display-medium-tracking: -0.01em;

      --md-sys-typescale-display-small-font: var(--app-font-family);
      --md-sys-typescale-display-small-size: 40px;
      --md-sys-typescale-display-small-weight: 700;
      --md-sys-typescale-display-small-line-height: 1.2;
      --md-sys-typescale-display-small-tracking: -0.005em;

      --md-sys-typescale-headline-large-font: var(--app-font-family);
      --md-sys-typescale-headline-large-size: 32px;
      --md-sys-typescale-headline-large-weight: 700;
      --md-sys-typescale-headline-large-line-height: 1.2;
      --md-sys-typescale-headline-large-tracking: 0em;

      --md-sys-typescale-headline-medium-font: var(--app-font-family);
      --md-sys-typescale-headline-medium-size: 24px;
      --md-sys-typescale-headline-medium-weight: 700;
      --md-sys-typescale-headline-medium-line-height: 1.2;
      --md-sys-typescale-headline-medium-tracking: 0em;

      --md-sys-typescale-headline-small-font: var(--app-font-family);
      --md-sys-typescale-headline-small-size: 18px;
      --md-sys-typescale-headline-small-weight: 700;
      --md-sys-typescale-headline-small-line-height: 1.2;
      --md-sys-typescale-headline-small-tracking: 0.005em;

      --md-sys-typescale-title-large-font: var(--app-font-family);
      --md-sys-typescale-title-large-size: 18px;
      --md-sys-typescale-title-large-weight: 700;
      --md-sys-typescale-title-large-line-height: 1.2;
      --md-sys-typescale-title-large-tracking: 0em;

      --md-sys-typescale-title-medium-font: var(--app-font-family);
      --md-sys-typescale-title-medium-size: 16px;
      --md-sys-typescale-title-medium-weight: 700;
      --md-sys-typescale-title-medium-line-height: 1.2;
      --md-sys-typescale-title-medium-tracking: 0.005em;

      --md-sys-typescale-title-small-font: var(--app-font-family);
      --md-sys-typescale-title-small-size: 12px;
      --md-sys-typescale-title-small-weight: 700;
      --md-sys-typescale-title-small-line-height: 1.2;
      --md-sys-typescale-title-small-tracking: 0.01em;

      --md-sys-typescale-body-large-font: var(--app-font-family);
      --md-sys-typescale-body-large-size: 16px;
      --md-sys-typescale-body-large-weight: 400;
      --md-sys-typescale-body-large-line-height: 1.2;
      --md-sys-typescale-body-large-tracking: 0em;

      --md-sys-typescale-body-medium-font: var(--app-font-family);
      --md-sys-typescale-body-medium-size: 14px;
      --md-sys-typescale-body-medium-weight: 400;
      --md-sys-typescale-body-medium-line-height: 1.2;
      --md-sys-typescale-body-medium-tracking: 0em;

      --md-sys-typescale-body-small-font: var(--app-font-family);
      --md-sys-typescale-body-small-size: 12px;
      --md-sys-typescale-body-small-weight: 400;
      --md-sys-typescale-body-small-line-height: 1.2;
      --md-sys-typescale-body-small-tracking: 0.005em;

      --md-sys-typescale-label-large-font: var(--app-font-family);
      --md-sys-typescale-label-large-size: 14px;
      --md-sys-typescale-label-large-weight: 700;
      --md-sys-typescale-label-large-line-height: 1.2;
      --md-sys-typescale-label-large-tracking: 0.01em;

      --md-sys-typescale-label-medium-font: var(--app-font-family);
      --md-sys-typescale-label-medium-size: 12px;
      --md-sys-typescale-label-medium-weight: 700;
      --md-sys-typescale-label-medium-line-height: 1.2;
      --md-sys-typescale-label-medium-tracking: 0.02em;

      --md-sys-typescale-label-small-font: var(--app-font-family);
      --md-sys-typescale-label-small-size: 10px;
      --md-sys-typescale-label-small-weight: 600;
      --md-sys-typescale-label-small-line-height: 1.2;
      --md-sys-typescale-label-small-tracking: 0.03em;

      /* ─── Shape (M3 shape scale, Pearpop values) ─── */
      --md-sys-shape-corner-none: 0px;
      --md-sys-shape-corner-extra-small: 4px; /* kbd, small chips */
      --md-sys-shape-corner-small: 6px; /* secondary buttons, tags */
      --md-sys-shape-corner-medium: 8px; /* inputs, nav rows */
      --md-sys-shape-corner-large: 12px; /* small cards */
      --md-sys-shape-corner-extra-large: 14px; /* main cards */
      --md-sys-shape-corner-2xl: 20px;
      --md-sys-shape-corner-full: 9999px; /* primary buttons, pills */

      /* Legacy radius aliases → backed by M3 shape tokens */
      --radius-xs: var(--md-sys-shape-corner-extra-small);
      --radius-sm: var(--md-sys-shape-corner-small);
      --radius-md: var(--md-sys-shape-corner-medium);
      --radius-lg: var(--md-sys-shape-corner-large);
      --radius-xl: var(--md-sys-shape-corner-extra-large);
      --radius-2xl: var(--md-sys-shape-corner-2xl);
      --radius-pill: var(--md-sys-shape-corner-full);
      --radius-full: var(--md-sys-shape-corner-full);

      /* chip */
      --app-chip-height: 26px;
      --app-chip-container-shape: var(--radius-pill);
      --app-chip-label-font-family: var(--app-font-family);

      --app-mono-tag-height: 20px;
      --app-mono-tag-container-shape: var(--md-sys-shape-corner-extra-small);
      --app-mono-tag-label-font-family: var(--md-ref-typeface-mono);
      --app-mono-tag-label-size: var(--md-sys-typescale-label-small-size);
      --app-mono-tag-label-tracking: 0.04em;

      --app-dialog-headline-font-family: var(--app-font-family);
      --app-dialog-headline-size: 16px;
      --app-dialog-headline-line-height: 1.2;
      --app-dialog-headline-weight: 600;

      /* ───────────────────────────────
      Z-index tokens (Layering)
      ─────────────────────────────── */
      /* Base Layers */
      --z-base: 0; /* default document flow */
      --z-content: 10; /* standard positioned elements */

      /* Sticky & Persistent UI */
      --z-sticky: 50; /* navbars, banners, progress bars */

      /* Interactive Elements */
      --z-dropdown: 100; /* dropdown menus */
      --z-tooltip: 200; /* tooltips, small floating hints */
      --z-popover: 300; /* popovers, hover cards */

      /* Overlays & Modals */
      --z-modal-backdrop: 900; /* dimmed overlay behind modal */
      --z-modal: 1000; /* dialogs, modals, side drawers */
      --z-toast: 1100; /* toast notifications, alerts */
      --z-overlay: 1200; /* global overlays, spinners */

      /* Utility / Emergency Layers */
      --z-debug: 9999; /* temp use only (debugging) */

      /* ─── Elevation (M3 levels 0–5, warm-toned) ─── */
      --shadow-50: 0px 7px 13px 3px rgba(0, 0, 0, 0.1); /* legacy alias */
      --md-sys-elevation-0: none;
      --md-sys-elevation-1: 0 1px 2px rgba(10, 11, 9, 0.04), 0 1px 1px rgba(10, 11, 9, 0.03);
      --md-sys-elevation-2: 0 2px 4px rgba(10, 11, 9, 0.06), 0 1px 2px rgba(10, 11, 9, 0.04);
      --md-sys-elevation-3: 0 6px 16px rgba(10, 11, 9, 0.08), 0 2px 4px rgba(10, 11, 9, 0.04);
      --md-sys-elevation-4: 0 12px 32px rgba(10, 11, 9, 0.12), 0 4px 8px rgba(10, 11, 9, 0.06);
      --md-sys-elevation-5: 0 24px 48px rgba(10, 11, 9, 0.18), 0 8px 16px rgba(10, 11, 9, 0.08);

      /* Lime glow — autonomy signals, live-dots, focus rings */
      --color-lime-glow: rgba(188, 255, 79, 0.9);
      --shadow-lime-glow: 0 0 10px var(--color-lime-glow);
      --shadow-lime-glow-sm: 0 0 8px var(--color-lime-glow);

      /* ─── Motion ─── */
      --motion-fast: 120ms;
      --motion-base: 180ms;
      --motion-slow: 280ms;
      --motion-cinematic: 480ms; /* scroll reveals, count-ups (ease-out) */
      --easing-standard: cubic-bezier(0.2, 0, 0, 1);
      --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

      /* ─── Gradients  ─── */

      /* Light container — status banners, card backgrounds */
      --gradient-light-spark: linear-gradient(135deg, var(--color-spark-50) 0%, var(--color-white) 72%);
      --gradient-light-hive: linear-gradient(135deg, var(--color-hive-50) 0%, var(--color-white) 72%);
      --gradient-light-pop: linear-gradient(135deg, var(--color-pop-50) 0%, var(--color-white) 72%);
      --gradient-light-blue: linear-gradient(135deg, var(--color-blue-50) 0%, var(--color-white) 72%);
      --gradient-light-yellow: linear-gradient(135deg, var(--color-yellow-50) 0%, var(--color-white) 72%);
      --gradient-light-pear: linear-gradient(135deg, var(--color-pear-50) 0%, var(--color-white) 72%);
      --gradient-light-haze: linear-gradient(135deg, var(--color-haze-50) 0%, var(--color-white) 72%);

      /* Color container — placeholder avatars, accent containers */
      --gradient-color-spark: linear-gradient(135deg, var(--color-spark-400) 0%, var(--color-spark-700) 72%);
      --gradient-color-hive: linear-gradient(135deg, var(--color-hive-400) 0%, var(--color-hive-700) 72%);
      --gradient-color-pop: linear-gradient(135deg, var(--color-pop-400) 0%, var(--color-pop-700) 72%);
      --gradient-color-blue: linear-gradient(135deg, var(--color-blue-400) 0%, var(--color-blue-700) 72%);
      --gradient-color-yellow: linear-gradient(135deg, var(--color-yellow-400) 0%, var(--color-yellow-700) 72%);
      --gradient-color-pear: linear-gradient(135deg, var(--color-pear-400) 0%, var(--color-pear-700) 72%);
      --gradient-color-haze: linear-gradient(135deg, var(--color-haze-400) 0%, var(--color-haze-700) 72%);

      /* Large container — media placeholders, 3-stop depth */
      --gradient-large-spark: linear-gradient(
        135deg,
        var(--color-spark-300) 0%,
        var(--color-spark-500) 35.36%,
        var(--color-spark-700) 72%
      );
      --gradient-large-hive: linear-gradient(
        135deg,
        var(--color-hive-300) 0%,
        var(--color-hive-500) 35.36%,
        var(--color-hive-700) 72%
      );
      --gradient-large-pop: linear-gradient(
        135deg,
        var(--color-pop-300) 0%,
        var(--color-pop-500) 35.36%,
        var(--color-pop-700) 72%
      );
      --gradient-large-blue: linear-gradient(
        135deg,
        var(--color-blue-300) 0%,
        var(--color-blue-500) 35.36%,
        var(--color-blue-700) 72%
      );
      --gradient-large-yellow: linear-gradient(
        135deg,
        var(--color-yellow-300) 0%,
        var(--color-yellow-500) 35.36%,
        var(--color-yellow-700) 72%
      );
      --gradient-large-pear: linear-gradient(
        135deg,
        var(--color-pear-300) 0%,
        var(--color-pear-500) 35.36%,
        var(--color-pear-700) 72%
      );
      --gradient-large-haze: linear-gradient(
        135deg,
        var(--color-haze-300) 0%,
        var(--color-haze-500) 35.36%,
        var(--color-haze-700) 72%
      );

      /* Horizontal light — 90deg, color-50 fades to white at 30% (banners, hero rails, rows) */
      --gradient-horizontal-light-spark: linear-gradient(90deg, var(--color-spark-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-hive: linear-gradient(90deg, var(--color-hive-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-pop: linear-gradient(90deg, var(--color-pop-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-blue: linear-gradient(90deg, var(--color-blue-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-yellow: linear-gradient(90deg, var(--color-yellow-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-pear: linear-gradient(90deg, var(--color-pear-50) 0%, var(--color-white) 30%);
      --gradient-horizontal-light-haze: linear-gradient(90deg, var(--color-haze-50) 0%, var(--color-white) 30%);

      /* ─── Spacing scale (4px base) ─── */
      --space-0: 0px;
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 28px;
      --space-8: 32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
      --space-20: 80px;

      /* ─── Semantic status colors ─── */
      --status-success-bg: var(--color-pop-50);
      --status-success-fg: var(--color-pop-700);
      --status-warning-bg: var(--color-hive-100);
      --status-warning-fg: var(--color-hive-700);
      --status-error-bg: var(--color-spark-100);
      --status-error-fg: var(--color-spark-700);
      --status-info-bg: var(--color-blue-100);
      --status-info-fg: var(--color-blue-700);
      --status-neutral-bg: var(--color-smoke-100);
      --status-neutral-fg: var(--color-smoke-600);
      --status-ai-bg: var(--color-brand);
      --status-ai-fg: var(--color-pear-900);

      --nav-bar-width: 256px;
      /* The app header's height (.main-content-header): what a page's own sticky bar sits under. */
      --app-header-height: 56px;

      --paginator-bar-overlap: 0px;

      /* Transition for main content width when nav bar collapses (none if the sidebar is collapsed + at a new page) */
      --main-content-width-transition: 0.4s;
    }

    body {
      margin: 0;
    }

    
    :root {
      /* Shared dark navigation */
      --nav-sidebar-bg: var(--color-black);
      --nav-label: var(--color-haze-100);
      --nav-count-bg: var(--color-haze-700);
      --nav-accent: var(--color-brand);

      /* Compatibility aliases used by workspace components */
      --shell-sidebar-bg: var(--nav-sidebar-bg);
      --shell-nav-label: var(--nav-label);
      --shell-nav-count-bg: var(--nav-count-bg);
      --shell-bg: var(--color-haze-900);
      --shell-surface: color-mix(in srgb, var(--color-white) 7%, transparent);
      --shell-surface-subtle: color-mix(in srgb, var(--color-white) 5%, transparent);
      --shell-border: color-mix(in srgb, var(--color-white) 8%, transparent);
      --shell-border-strong: color-mix(in srgb, var(--color-white) 10%, transparent);
      --shell-accent: var(--nav-accent);
      --shell-accent-soft: color-mix(in srgb, var(--nav-accent) 8%, transparent);
      --shell-accent-wash: color-mix(in srgb, var(--nav-accent) 25%, transparent);
      --shell-warning: var(--color-hive-400);
      --shell-on-surface: color-mix(in srgb, var(--color-white) 72%, transparent);
      --shell-on-surface-secondary: color-mix(in srgb, var(--color-white) 60%, transparent);
      --shell-on-surface-secondary-dim: color-mix(in srgb, var(--color-white) 55%, transparent);
      --shell-on-surface-muted: color-mix(in srgb, var(--color-white) 42%, transparent);
      --shell-on-surface-faint: color-mix(in srgb, var(--color-white) 34%, transparent);
      --shell-on-surface-disabled: color-mix(in srgb, var(--color-white) 32%, transparent);
    }
  
    
    a {
      color: var(--color-pear-700);
      text-decoration: underline;
    }

    .clear-text {
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
      text-decoration: underline;
      color: var(--color-pear-700);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    .small {
      font-size: smaller;
    }

    .truncate-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 30ch;
      margin: 0;
    }

    .accent {
      color: var(--color-black);
      display: inline;
      padding: 0 0.04em;
      background: linear-gradient(180deg, transparent 58%, var(--color-pear-400) 58%);
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    input[type='checkbox'] {
      appearance: none;
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border: 1px solid var(--color-smoke-400);
      border-radius: var(--radius-xs);
      background: var(--color-white);
      position: relative;
      cursor: pointer;
    }

    input[type='checkbox']:checked {
      background-color: var(--color-pop-900);
      border-color: var(--color-pop-900);
    }

    input[type='checkbox']:checked::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 6px;
      width: 4px;
      height: 8px;
      border: solid white;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    /* Mixed state for select-all controls: some, but not all, rows selected. */
    input[type='checkbox']:indeterminate {
      background-color: var(--color-pop-900);
      border-color: var(--color-pop-900);
    }

    input[type='checkbox']:indeterminate::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 10px;
      height: 2px;
      background: var(--color-white);
    }

    .info-icon svg {
      width: 14px;
      height: 14px;
      color: var(--color-smoke-500);
      vertical-align: middle;
    }

    .icon-small {
      width: 14px;
      height: 14px;
    }

    .icon-medium {
      width: 24px;
      height: 24px;
    }

    .success {
      background-color: var(--color-pop-50);
      color: var(--color-pop-700);
      border-color: var(--color-pop-700);
    }
    .success .icon svg {
      stroke: var(--color-pop-700);
    }
    .error {
      color: var(--color-spark-700);
    }
    div.error {
      background-color: var(--color-spark-50);
      border: 1px solid var(--color-spark-700);
      padding: 8px;
      border-radius: var(--radius-sm);
    }
    .error .icon svg {
      stroke: var(--color-spark-700);
    }

    .warning {
      background-color: var(--color-hive-50);
      color: var(--color-hive-800);
      border-color: var(--color-hive-500);
    }
    .warning .icon svg {
      stroke: var(--color-hive-500);
    }

    .info {
      background-color: var(--color-white);
      color: var(--color-black);
      border-color: var(--color-pear-500);
    }
    .info .icon svg {
      stroke: var(--color-pear-500);
    }

    /* if there's something too wide due to padding, it's likely this. */
    .bsbb {
      box-sizing: border-box;
    }

    .w100 {
      width: 100%;
    }
    .w50 {
      width: 50%;
    }
    .w-max {
      width: max-content;
    }

    .shadow {
      box-shadow: 0 0 3px rgba(255, 255, 255, 0.15) !important;
    }

    .card {
      color: var(--md-sys-color-on-primary);
    }

    .card2 {
      border-radius: var(--radius-md);
      border: 1px solid var(--color-smoke-200);
    }

    .pearpop-spinner {
      --md-circular-progress-active-indicator-color: var(--color-pear-500);
    }

    .section-title {
      font-family: var(--md-sys-typescale-headline-medium-font);
      font-size: var(--md-sys-typescale-headline-medium-size);
      font-weight: var(--md-sys-typescale-headline-medium-weight);
      line-height: var(--md-sys-typescale-headline-medium-line-height);
      margin: 10px 0;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      justify-content: center;
      gap: 6px;
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
      text-overflow: ellipsis;
      background-color: var(--color-smoke-100);
      color: var(--color-smoke-800);
      border-radius: var(--radius-lg);
    }
    /* Outlined variant — white card, smoke border. Used for clickable
       suggestion-style chips where the default smoke fill would compete
       with surrounding content. */
    .chip.outlined {
      background-color: var(--color-white);
      border: 1px solid var(--color-smoke-200);
      color: var(--color-smoke-700);
    }
    /* When the chip is a <button>, give it a hover lift so it reads as
       interactive. Static <span class="chip"> usages are unaffected. */
    button.chip {
      cursor: pointer;
      transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
    }
    button.chip:hover {
      background-color: var(--color-pear-50);
      border-color: var(--color-pear-400);
      color: var(--color-pear-800);
      transform: translateY(-1px);
    }

    .filter-chips-container {
      flex-wrap: wrap;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 4px 8px;
    }

    .pill-wrapper {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .pill {
      display: flex;
      padding: 6px 12px;
      justify-content: center;
      align-items: center;
      border-radius: var(--radius-pill);
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
      line-height: 1;
      white-space: nowrap;
    }

    md-select.pill-select {
      inline-size: max-content; /* shrink-wrap the field + caret */
      min-inline-size: 96px;

      /* remove the visible outline so the pill looks like the closed state */
      --md-outlined-field-outline-color: transparent;
      --md-outlined-select-text-field-outline-color: transparent;
      --md-outlined-select-text-field-hover-outline-color: transparent;
      /* subtle padding so caret sits near label */
      padding-inline-end: 20px;
    }

    md-select.pill-select::part(field) {
      padding-right: 16px; /* Prevent pill and selector icon overlap */
    }

    .pill.yellow {
      color: var(--color-hive-800);
      background: var(--color-hive-100);
    }

    .pill.green {
      color: var(--color-pop-800);
      background: var(--color-pop-100);
    }

    .pill.red {
      color: var(--color-spark-800);
      background-color: var(--color-spark-100);
    }

    .pill.blue {
      color: var(--color-haze-700);
      background-color: var(--color-blue);
    }

    .pill.gray {
      color: var(--color-haze-900);
      background-color: var(--color-smoke-200);
    }

    .pill.orange {
      color: var(--color-haze-900);
      background-color: var(--color-hive-500);
    }

    .pill.white {
      color: var(--color-haze-900);
      border: 1px solid var(--color-smoke-500);
      background-color: var(--color-white);
    }

    .pill.selected {
      background: var(--color-smoke-100);
    }

    .pill-display {
      position: absolute;
      pointer-events: none;
      white-space: nowrap;
    }

    .disabled {
      opacity: 0.6;
      pointer-events: none;
      cursor: not-allowed;
    }

    .required {
      color: var(--color-spark-500);
    }

    :where(schedule-modal, confirm-modal, template-modal, find-creators-modal, past-decks-modal) {
      position: relative;
      z-index: var(--z-modal);
    }

    .container-wrapper {
      width: 100%;
      box-sizing: border-box;
    }

    .divider {
      height: 1px;
      background-color: var(--color-cream-100);
    }

    .card-container {
      display: flex;
      flex-direction: column;
      border-radius: 16px;
      margin: 14px;
      gap: 12px;
    }

    .creator-info {
      display: flex;
      flex-direction: row;
      gap: 8px;
    }

    
    /* ─── MD3 Typography Utility Classes ─── */

    .display-large {
      font-family: var(--md-sys-typescale-display-large-font);
      font-size: var(--md-sys-typescale-display-large-size);
      font-weight: var(--md-sys-typescale-display-large-weight);
      line-height: var(--md-sys-typescale-display-large-line-height);
    }
    .display-medium {
      font-family: var(--md-sys-typescale-display-medium-font);
      font-size: var(--md-sys-typescale-display-medium-size);
      font-weight: var(--md-sys-typescale-display-medium-weight);
      line-height: var(--md-sys-typescale-display-medium-line-height);
    }
    .display-small {
      font-family: var(--md-sys-typescale-display-small-font);
      font-size: var(--md-sys-typescale-display-small-size);
      font-weight: var(--md-sys-typescale-display-small-weight);
      line-height: var(--md-sys-typescale-display-small-line-height);
    }

    .headline-large {
      font-family: var(--md-sys-typescale-headline-large-font);
      font-size: var(--md-sys-typescale-headline-large-size);
      font-weight: var(--md-sys-typescale-headline-large-weight);
      line-height: var(--md-sys-typescale-headline-large-line-height);
    }
    .headline-medium {
      font-family: var(--md-sys-typescale-headline-medium-font);
      font-size: var(--md-sys-typescale-headline-medium-size);
      font-weight: var(--md-sys-typescale-headline-medium-weight);
      line-height: var(--md-sys-typescale-headline-medium-line-height);
    }
    .headline-small {
      font-family: var(--md-sys-typescale-headline-small-font);
      font-size: var(--md-sys-typescale-headline-small-size);
      font-weight: var(--md-sys-typescale-headline-small-weight);
      line-height: var(--md-sys-typescale-headline-small-line-height);
    }

    .title-large {
      font-family: var(--md-sys-typescale-title-large-font);
      font-size: var(--md-sys-typescale-title-large-size);
      font-weight: var(--md-sys-typescale-title-large-weight);
      line-height: var(--md-sys-typescale-title-large-line-height);
    }
    .title-large-bold {
      font-family: var(--md-sys-typescale-title-large-font);
      font-size: var(--md-sys-typescale-title-large-size);
      font-weight: 700;
      line-height: var(--md-sys-typescale-title-large-line-height);
    }
    .title-medium {
      font-family: var(--md-sys-typescale-title-medium-font);
      font-size: var(--md-sys-typescale-title-medium-size);
      font-weight: var(--md-sys-typescale-title-medium-weight);
      line-height: var(--md-sys-typescale-title-medium-line-height);
    }
    .title-small {
      font-family: var(--md-sys-typescale-title-small-font);
      font-size: var(--md-sys-typescale-title-small-size);
      font-weight: var(--md-sys-typescale-title-small-weight);
      line-height: var(--md-sys-typescale-title-small-line-height);
    }

    .body-large {
      font-family: var(--md-sys-typescale-body-large-font);
      font-size: var(--md-sys-typescale-body-large-size);
      font-weight: var(--md-sys-typescale-body-large-weight);
      line-height: var(--md-sys-typescale-body-large-line-height);
    }
    .body-medium {
      font-family: var(--md-sys-typescale-body-medium-font);
      font-size: var(--md-sys-typescale-body-medium-size);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      line-height: var(--md-sys-typescale-body-medium-line-height);
    }
    .body-small {
      font-family: var(--md-sys-typescale-body-small-font);
      font-size: var(--md-sys-typescale-body-small-size);
      font-weight: var(--md-sys-typescale-body-small-weight);
      line-height: var(--md-sys-typescale-body-small-line-height);
    }

    .label-large {
      font-family: var(--md-sys-typescale-label-large-font);
      font-size: var(--md-sys-typescale-label-large-size);
      font-weight: var(--md-sys-typescale-label-large-weight);
      line-height: var(--md-sys-typescale-label-large-line-height);
    }
    .label-medium {
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
    }
    .label-small {
      font-family: var(--md-sys-typescale-label-small-font);
      font-size: var(--md-sys-typescale-label-small-size);
      font-weight: var(--md-sys-typescale-label-small-weight);
      line-height: var(--md-sys-typescale-label-small-line-height);
      letter-spacing: 0.8px;
      text-transform: uppercase;
      line-height: 120%;
    }

    /* Responsive overrides */
    @media (width < 840px) {
      .title-small {
        font-size: 12px;
        font-weight: var(--md-sys-typescale-title-small-weight);
        letter-spacing: 0.1px;
        line-height: 16px;
      }
      .title-medium {
        font-size: 15px;
        font-weight: var(--md-sys-typescale-title-medium-weight);
        letter-spacing: 0.1px;
        line-height: 16px;
      }
      .title-large {
        font-size: 20px;
        font-weight: var(--md-sys-typescale-title-large-weight);
        letter-spacing: 0px;
        line-height: 18px;
      }
      .title-large-bold {
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 18px;
      }
    }
  
    
    .smoke100 {
      background-color: var(--color-smoke-100);
    }
    .smoke400 {
      color: var(--color-smoke-400);
    }
    .smoke500 {
      color: var(--color-smoke-500);
    }
    .smoke600 {
      color: var(--color-smoke-600);
    }
    .smoke700 {
      color: var(--color-smoke-700);
    }
    .blue500 {
      color: var(--color-blue-500);
    }
    .hive500 {
      color: var(--color-hive-500);
    }
    .hive700 {
      color: var(--color-hive-700);
    }
    .color-black {
      color: var(--color-black);
    }
    .pear700 {
      color: var(--color-pear-700);
    }
    .pear500 {
      color: var(--color-pear-500);
    }
    .pear600 {
      color: var(--color-pear-600);
    }
    .pear400 {
      color: var(--color-pear-400);
    }
    .pop700 {
      color: var(--color-pop-700);
    }
    .pop600 {
      color: var(--color-pop-600);
    }
    .spark700 {
      color: var(--color-spark-700);
    }
    .spark500 {
      color: var(--color-spark-500);
    }
  
    
    md-card {
      --md-outlined-card-container-shape: var(--radius-lg);
    }

    md-nav-item[active] {
      --md-nav-bar-active-indicator-color: var(--color-pear-50);
    }

    md-chip {
      height: var(--app-chip-height);
      --md-assist-chip-container-shape: var(--app-chip-container-shape);
      --md-filter-chip-container-shape: var(--app-chip-container-shape);
      --md-input-chip-container-shape: var(--app-chip-container-shape);
      --md-suggestion-chip-container-shape: var(--app-chip-container-shape);
    }

    md-button {
      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
      --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);
      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
      --md-tonal-button-container-shape: var(--md-sys-shape-corner-small);
    }

    md-button.ai[color='filled'] {
      --md-sys-color-primary: var(--color-pear-400);
      --md-sys-color-on-primary: var(--color-pop-900);
    }

    md-text-field {
      --md-outlined-text-field-container-shape: var(--radius-sm);
      --md-outlined-text-field-label-text-font: var(--md-ref-typeface-plain);
      --md-text-field-outline-color: var(--color-smoke-200);
      --md-text-field-hover-outline-color: var(--color-smoke-200);
      --md-text-field-focus-outline-color: var(--color-smoke-200);
      --md-text-field-focus-outline-width: 1px;
      --md-text-field-label-text-color: var(--color-black);
      --md-text-field-hover-label-text-color: var(--color-black);
      --md-text-field-focus-label-text-color: var(--color-black);
      --md-text-field-input-text-color: var(--color-black);
      --md-text-field-hover-input-text-color: var(--color-black);
      --md-text-field-focus-input-text-color: var(--color-black);
      --md-text-field-caret-color: var(--color-black);
      --md-text-field-focus-caret-color: var(--color-black);
    }

    md-text-field.white-background,
    md-menu-item.white-background,
    md-button[color='outlined'] {
      background-color: var(--text-field-background-color, var(--md-sys-color-surface));
      border-radius: var(--radius-sm);
    }

    md-field {
      --md-outlined-field-outline-color: var(--color-smoke-200);
      --md-outlined-field-hover-outline-color: var(--color-smoke-200);
      --md-outlined-field-focus-outline-color: var(--color-smoke-200);
      --md-outlined-field-focus-outline-width: 1px;
    }

    md-select {
      --md-outlined-select-text-field-outline-color: var(--color-smoke-600);
    }

    md-list.navbar {
      display: flex;
      flex-direction: column;
      height: 100%;

      --md-list-container-color: var(--color-haze-900);
      --md-list-item-label-text-color: var(--color-haze-100);
      --md-list-item-label-text-font: var(--md-sys-typescale-label-large-font);
      --md-list-item-label-text-size: var(--md-sys-typescale-label-large-size);
      --md-list-item-label-text-weight: var(--md-sys-typescale-label-large-weight);
      --md-list-item-label-text-line-height: var(--md-sys-typescale-label-large-line-height);
    }

    md-list.navbar md-list-item {
      border-radius: var(--radius-sm);
      padding: 0;
      --md-list-item-hover-state-layer-color: rgb(255 255 255);
      --md-list-item-hover-state-layer-opacity: 0.05;
    }

    md-list.navbar md-list-item:hover {
      cursor: pointer;
    }

    md-menu {
      --md-menu-container-color: var(--color-white);
    }

    md-menu-item::part(focus-ring) {
      display: none;
    }

    md-nav-bar {
      --_container-color: var(--color-black);
      --_container-height: 80px;
    }

    md-nav-tab[active],
    md-nav-item[active] {
      --md-nav-bar-active-indicator-color: transparent;
      --_active-indicator-color: transparent;
      --_active-icon-color: var(--color-brand);
      --_active-label-text-color: var(--color-brand);
      --_active-focus-icon-color: var(--color-brand);
      --_active-focus-label-text-color: var(--color-brand);
      --_active-hover-icon-color: var(--color-brand);
      --_active-hover-label-text-color: var(--color-brand);
    }

    md-nav-tab,
    md-nav-item {
      /* No public token for nav label font — --_label-text-font is private/internal.
         Kept because md-nav-bar does not expose a public typography token. */
      --_label-text-font: var(--md-sys-typescale-label-small-font);
      --_label-text-size: var(--md-sys-typescale-label-small-size);
      --_label-text-weight: var(--md-sys-typescale-label-small-weight);
      --_label-text-line-height: var(--md-sys-typescale-label-small-line-height);
      --md-nav-bar-inactive-indicator-color: transparent;
      --_active-indicator-color: transparent;
      --_inactive-icon-color: var(--color-haze-100);
      --_inactive-label-text-color: var(--color-haze-100);
      --_inactive-focus-icon-color: var(--color-smoke-600);
      --_inactive-focus-label-text-color: var(--color-smoke-600);
      --_inactive-hover-icon-color: var(--color-smoke-600);
      --_inactive-hover-label-text-color: var(--color-smoke-600);
    }
    md-circular-progress,
    md-progress[type='circular'] {
      width: 32px;
      height: 32px;
    }

    md-dialog {
      width: 500px;
      max-width: 500px;
      min-width: 400px;
      --md-dialog-container-color: var(--color-white);
      --md-dialog-container-shape: var(--radius-sm);
      --md-sys-typescale-headline-small-font: var(--app-dialog-headline-font-family);
      --md-sys-typescale-headline-small-size: var(--app-dialog-headline-size);
      --md-sys-typescale-headline-small-line-height: var(--app-dialog-headline-line-height);
      --md-sys-typescale-headline-small-weight: var(--app-dialog-headline-weight);
    }
    /* A 400–500px dialog overflows a phone: full width inside 16px gutters below 600px. */
    @media (width < 600px) {
      md-dialog {
        width: calc(100vw - 32px);
        min-width: 0;
        max-width: none;
      }
    }

    md-snackbar md-button[slot='action'].inverse {
      --md-button-label-text-color: var(--color-pear-400);
      --md-button-hover-label-text-color: var(--color-pear-400);
      --md-button-focus-label-text-color: var(--color-pear-400);
      --md-button-pressed-label-text-color: var(--color-pear-400);
      --md-button-hover-state-layer-opacity: 0;
      --md-button-pressed-state-layer-opacity: 0;
      --md-focus-ring-color: transparent;
      --md-focus-ring-width: 0;
      --md-focus-ring-active-width: 0;
    }
    /* material design overrides */
    
    .p4 {
      padding: 4px;
    }
    .p8 {
      padding: 8px;
    }
    .p12 {
      padding: 12px;
    }
    .p16 {
      padding: 16px;
    }
    .p24 {
      padding: 24px;
    }

    .pt4 {
      padding-top: 4px;
    }
    .pt8 {
      padding-top: 8px;
    }
    .pt12 {
      padding-top: 12px;
    }
    .pt18 {
      padding-top: 18px;
    }
    .pt40 {
      padding-top: 40px;
    }
    .pt60 {
      padding-top: 60px;
    }
    .pb12 {
      padding-bottom: 12px;
    }
    .pb20 {
      padding-bottom: 20px;
    }
    .pb40 {
      padding-bottom: 40px;
    }
    .pb60 {
      padding-bottom: 60px;
    }

    .m0 {
      margin: 0;
    }
    .m5 {
      margin: 5px;
    }
    .m16 {
      margin: 16px;
    }

    .mt0 {
      margin-top: 0;
    }
    .mt12 {
      margin-top: 12px;
    }
    .mt16 {
      margin-top: 16px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .mt24 {
      margin-top: 24px;
    }
    .mt32 {
      margin-top: 32px;
    }
    .mt48 {
      margin-top: 48px;
    }

    .mb4 {
      margin-bottom: 4px;
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .mb12 {
      margin-bottom: 12px;
    }
    .mb16 {
      margin-bottom: 16px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mb24 {
      margin-bottom: 24px;
    }
    .mb32 {
      margin-bottom: 32px;
    }

    .mr4 {
      margin-right: 4px;
    }
    .mr8 {
      margin-right: 8px;
    }
    .mr12 {
      margin-right: 12px;
    }
    .ml12 {
      margin-left: 12px;
    }
    .ml16 {
      margin-left: 16px;
    }
    .mlauto {
      margin-left: auto;
    }
    /* padding and margin utilities */
    
    .flex {
      display: flex;
    }

    .flexr {
      display: flex;
    }

    .flexw {
      display: flex;
      flex-wrap: wrap;
    }

    .flexin {
      display: inline-flex;
    }

    .grid {
      display: grid;
    }

    .row {
      flex-direction: row;
    }

    .col {
      flex-direction: column;
    }

    .bb {
      box-sizing: border-box;
    }

    .jcc {
      justify-content: center;
    }
    .jcsb,
    .jsb {
      justify-content: space-between;
    }
    .jcse {
      justify-content: space-evenly;
    }
    .jce {
      justify-content: end;
    }
    .jcs {
      justify-content: start;
    }
    .jce {
      justify-content: end;
    }
    /* todo: don't use these, I think they are deprecated */
    .jcfs {
      justify-content: flex-start;
    }
    .jcfe {
      justify-content: flex-end;
    }

    .ais {
      align-items: start;
    }
    .aic {
      align-items: center;
    }
    .aistr {
      align-items: stretch;
    }
    .aie {
      align-items: end;
    }
    .aib {
      align-items: baseline;
    }

    /* This will right align text in a flex box item or grid item */
    .right {
      margin-left: auto;
    }

    .aifs {
      align-items: flex-start;
    }

    .asc {
      align-self: center;
    }

    .g0 {
      gap: 0px;
    }
    .g2 {
      gap: 2px;
    }
    .g4 {
      gap: 4px;
    }
    .g6 {
      gap: 6px;
    }
    .g8 {
      gap: 8px;
    }
    .g12 {
      gap: 12px;
    }
    .g16 {
      gap: 16px;
    }
    .g20 {
      gap: 20px;
    }
    .g24 {
      gap: 24px;
    }
    .g32 {
      gap: 32px;
    }
    /* flexbox utilities */
    
    button.primary {
      display: inline-flex;
      height: 32px;
      padding: 4px 16px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      border-radius: var(--radius-pill);
      background: var(--color-brand);
      border: none;
      font-family: var(--md-sys-typescale-label-large-font);
      font-size: var(--md-sys-typescale-label-large-size);
      font-weight: var(--md-sys-typescale-label-large-weight);
      line-height: var(--md-sys-typescale-label-large-line-height);
      cursor: pointer;
    }

    button.primary:disabled {
      background: var(--color-smoke-400);
      cursor: not-allowed;
      opacity: 0.6;
    }

    button.primary.large {
      height: 48px;
    }

    button.primary:hover:not(:disabled) {
      background: var(--color-pear-600);
    }

    .badge.blue {
      background-color: var(--color-azure-500);
      color: var(--color-white);
      height: 24px;
      padding: 0 10px;
      border-radius: var(--radius-md);
      border: none;
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    button.secondary {
      border-radius: var(--radius-pill);
      border: 1px solid var(--color-pear-500);
      display: inline-flex;
      height: 32px;
      padding: 4px 16px;
      justify-content: center;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      background: var(--color-white);
      font-family: var(--md-sys-typescale-label-large-font);
      font-size: var(--md-sys-typescale-label-large-size);
      font-weight: var(--md-sys-typescale-label-large-weight);
      line-height: var(--md-sys-typescale-label-large-line-height);
      color: var(--color-pop-900);
    }

    button.secondary.large {
      height: 48px;
    }

    button.secondary:disabled {
      background-color: var(--color-smoke-100);
      color: var(--color-smoke-400);
      cursor: not-allowed;
      opacity: 0.6;
      border: 1px solid var(--color-smoke-200);
    }

    .btn-icon {
      border: none;
      background-color: transparent;
      color: var(--color-pop-900);
    }

    .btn-icon.cta.pinned,
    md-icon.pinned {
      color: var(--color-hive-500);
      font-variation-settings: 'FILL' 1;
    }

    .btn-icon.hover-circle {
      display: flex;
      width: 38px;
      height: 38px;
      align-items: center;
      justify-content: center;
      background: transparent;
      transition: background 0.2s ease;
      border-radius: 50%;
    }

    .btn-icon.hover-circle:hover {
      background: var(--color-smoke-200);
    }

    .btn-icon.hover-circle:disabled {
      color: var(--color-smoke-400);
      cursor: not-allowed;
    }

    .cta {
      cursor: pointer;
    }

    .pointer {
      cursor: pointer;
    }
    /* button styles */

    
    /* https://m3.material.io/foundations/layout/applying-layout/window-size-classes */

    /* Mobile UI */
    @media (width < 840px) {
      :root {
        --paginator-bar-overlap: 60px;
        --bottom-nav-height: 80px;
      }

      .flexr {
        flex-direction: column;
      }

      .mobOrder1 {
        order: -100;
      }

      .mobOrder2 {
        order: -50;
      }

      .mobOrder3 {
        order: -20;
      }

      .lteMedium {
        display: block;
      }

      .gtMedium {
        /* aka expanded */
        display: none;
      }

      .gteMedium {
        display: block;
      }

      /* Global page organization */
      /* All page including content and sidebar (not shown in mobile) */
      .main-page {
        display: flex;
        min-height: 100%;
        min-width: 100%;
        box-sizing: border-box;
        max-height: 100%;
        max-width: 100%;
      }
      /* Main content including header, body, and bottom */
      .main-content {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        box-sizing: border-box;
        max-height: 100%;
      }
      .main-content-header {
        height: var(--app-header-height);
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
      }

      .main-content-body {
        margin-top: 56px;
        width: 100%;
        overflow-x: hidden;
        height: calc(100dvh - 136px);
        padding: 16px 16px 80px;
        box-sizing: border-box;

        overflow-y: auto; /* enable scrolling only when needed */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */

        /* hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
      }
      .main-content-body::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
      }

      .main-content-body.has-bottom-nav {
        height: calc(100dvh - (56px + var(--bottom-nav-height, 80px) + var(--paginator-bar-overlap, 60px)));
      }

      .main-content > .main-content-body:has(> opps-kanban-page) {
        height: auto;
      }

      .main-content-body.has-bottom-nav::after {
        height: var(--paginator-bar-overlap, 60px);
      }
      .main-content-body.dashboard {
        padding: 0px 8px;
      }

      .main-content-bottom {
        height: 80px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
      }

      .filter-chips-container {
        padding: 4px 4px 0 4px;
      }

      .pill-wrapper {
        height: 32px;
      }
      .pill {
        padding: 8px 12px;
      }
    }

    /* Desktop UI */
    @media (width >=840px) {
      :root {
        --paginator-bar-overlap: 70px;
        --bottom-nav-height: 0px;
      }

      .gtMedium {
        display: block;
      }
      .lteMedium {
        display: none;
      }

      /* Global page organization */
      /* All of page including content and sidebar */
      .main-page {
        display: flex;
        flex-direction: row;
        min-height: 100%;
        min-width: 100%;
        max-height: 100%;
        max-width: 100%;
        box-sizing: border-box;
      }

      /* Main content including header, body, and bottom (bottom bar only in mobile) */
      .main-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        max-width: calc(100% - var(--nav-bar-width, 256px));
        transition:
          max-width var(--main-content-width-transition, 0.4s),
          left var(--main-content-width-transition, 0.4s);
        overflow-y: auto;
        height: 100dvh;
      }
      .main-content-header {
        height: var(--app-header-height);
        box-sizing: border-box;
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        background-color: var(--md-sys-color-background);
      }

      .main-content-body {
        flex: 1 1 auto;
        box-sizing: border-box;
        width: 100%;
        max-width: 1380px;
        margin: 0 auto;
        padding: 24px 24px 80px;
      }
      .main-content-body.has-bottom-nav::after {
        content: '';
        display: block;
        height: var(--paginator-bar-overlap, 70px);
      }
      .main-content-body.dashboard {
        padding: 0 8px;
      }

      body.opp-page-active .main-content,
      body.brand-thread-active .main-content {
        overflow-y: hidden;
      }
      body.opp-page-active .main-content-body,
      body.brand-thread-active .main-content-body {
        padding: 0;
        height: calc(100vh - 56px);
        overflow: hidden;
        max-width: none;
      }

      /* The deliverable review workspace is a FIXED workspace: the media pane and the action
         bar hold still while only the activity spine scrolls. Same treatment as
         .opp-page-active (minus its max-width reset — the review grid keeps the shell's normal
         measure), and for the same reason: .main-content is the desktop scrollport, and its
         child .main-content-body adds 24px+80px of vertical padding on top of a full-height
         page. That overflow is what made the action bar ride the page scroll instead of
         staying put — the shell cannot fix it from inside its own shadow root, because the
         extra height belongs to an ancestor. deliverable-page toggles the class for the review
         view only; the upload view is an ordinary scrolling page and must keep its padding. */
      body.deliverable-review-active .main-content {
        overflow-y: hidden;
      }
      body.deliverable-review-active .main-content-body {
        padding: 0;
        height: calc(100dvh - 56px);
        overflow: hidden;
      }
    }
   /* responsive styles */
    
    .mb-card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 16px;
    }
    .mb-card-item {
      width: 100%;
      box-sizing: border-box;
      min-width: 300px;
      max-width: 500px;
    }
    .mb-card-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 12px;
    }
    .mb-card-row-left {
      font-family: var(--md-sys-typescale-label-medium-font);
      font-size: var(--md-sys-typescale-label-medium-size);
      font-weight: var(--md-sys-typescale-label-medium-weight);
      line-height: var(--md-sys-typescale-label-medium-line-height);
      flex: 1;
    }
    .mb-card-row-right {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 2;
      font-family: var(--md-sys-typescale-body-medium-font);
      font-size: var(--md-sys-typescale-body-medium-size);
      font-weight: var(--md-sys-typescale-body-medium-weight);
      line-height: var(--md-sys-typescale-body-medium-line-height);
      gap: 8px;
    }
    .mb-card-divider {
      height: 1px;
      background: var(--color-smoke-200);
    }
    .mb-card-control-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
   /* card styles for Mobile */

    
    .dropdown-anchor {
      position: relative;
    }
    .search-dropdown-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      line-height: 1;
      padding: 7px 16px;
      border-radius: var(--radius-sm);
      background: var(--color-white);
      border: 1px solid var(--color-smoke-200);
      cursor: pointer;
    }
    .search-dropdown-menu {
      --md-menu-container-color: var(--color-white);
      --md-menu-container-shape: var(--radius-sm);
      max-height: 360px;
    }
    .menu-search {
      padding: 8px;
      box-sizing: border-box;
    }
    .row-item {
      min-width: 200px;
    }
    .row-item.selected {
      --md-menu-item-container-color: var(--color-pear-50);
      --md-menu-item-label-text-color: var(--color-pear-700);
    }
    @media (max-width: 839px) {
      .search-dropdown-btn {
        padding: 3px 8px;
      }
    }
   /* search filter styles */

    
    .deal-task-row {
      border-bottom: 1px solid var(--color-smoke-200);
      background: var(--color-white);
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      color: var(--color-black);
      position: relative;

      &:last-child {
        border-bottom: none;
      }
      &:hover {
        background-color: var(--color-smoke-50);
      }
      &.selected {
        background-color: var(--color-pear-50);
      }
    }

    .deal-task-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 80px;
      flex-shrink: 0;
    }

    .deal-task-middle {
      flex: 1;
      min-width: 0;
    }

    .deal-task-right {
      position: relative;
      display: flex;
      min-width: 100px;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
    }

    .task-check {
      --md-checkbox-container-size: 20px;
      --md-checkbox-container-shape: 50%;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;

      /* Unchecked: ring only */
      --md-checkbox-unselected-container-color: transparent;
      --md-checkbox-unselected-outline-color: var(--color-smoke-600);
      --md-checkbox-unselected-icon-color: transparent;

      /* Checked: green fill */
      --md-checkbox-selected-container-color: var(--color-pear-500);
      --md-checkbox-selected-outline-color: var(--color-pear-500);
      --md-checkbox-selected-icon-color: var(--color-white);
      --md-checkbox-selected-hover-icon-color: var(--color-white);
      --md-checkbox-selected-focus-icon-color: var(--color-white);
      --md-checkbox-selected-pressed-icon-color: var(--color-white);
      --md-checkbox-selected-hover-container-color: var(--color-pear-500);
      --md-checkbox-selected-focus-container-color: var(--color-pear-500);
      --md-checkbox-selected-pressed-container-color: var(--color-pear-500);

      /* kill Material overlay/ripple box */
      --md-state-layer-opacity-hover: 0;
      --md-state-layer-opacity-focus: 0;
      --md-state-layer-opacity-pressed: 0;
    }
   /* task row styles */

    
    .skel-block {
      background: linear-gradient(
        90deg,
        var(--color-smoke-100) 0%,
        var(--color-smoke-50) 50%,
        var(--color-smoke-100) 100%
      );
      background-size: 200% 100%;
      animation: shimmer 1.6s ease-in-out infinite;
      border-radius: 6px;
    }
    @keyframes shimmer {
      0% {
        background-position: 200% 0;
      }
      100% {
        background-position: -200% 0;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .skel-block {
        animation: none;
      }
    }
   /* skeleton loading primitives */

    
    .ai-badge {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 10px;
      font-weight: 600;
      background: var(--color-smoke-100);
      color: var(--color-smoke-700);
      padding: 1px 6px;
      border-radius: 100px;
      flex: 0 0 auto;
    }
    .ai-badge svg {
      width: 12px;
      height: 12px;
    }
   /* AI related */