:root {
        --app-bg: #f5f5f7;
        --app-bg-alt: #eceff3;
        --app-sidebar-bg: #f9f9fb;
        --app-surface: rgba(255, 255, 255, 0.92);
        --app-surface-solid: #ffffff;
        --app-surface-secondary: rgba(242, 244, 247, 0.88);
        --app-border: rgba(60, 60, 67, 0.12);
        --app-border-strong: rgba(60, 60, 67, 0.18);
        --app-text: #1d1d1f;
        --app-text-secondary: #6e6e73;
        --app-text-tertiary: #8e8e93;
        --app-accent: #007aff;
        --app-accent-soft: rgba(0, 122, 255, 0.12);
        --app-accent-soft-strong: rgba(0, 122, 255, 0.18);
        --app-danger: #ff3b30;
        --app-danger-soft: rgba(255, 59, 48, 0.12);
        --app-success: #34c759;
        --app-success-soft: rgba(52, 199, 89, 0.14);
        --app-shadow: 0 18px 45px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(15, 23, 42, 0.04);
        --app-icon-surface: linear-gradient(180deg, rgba(222, 232, 246, 0.96), rgba(205, 215, 229, 0.96));
        --app-icon-border: rgba(0, 122, 255, 0.22);
        --app-icon-text: #16324f;
        --app-monogram-surface: #eef4fb;
        --app-monogram-border: rgba(0, 122, 255, 0.28);
        --app-monogram-text: #16324f;
        --app-pill-primary-min-height: 3rem;
        --app-pill-primary-padding-block: 0.58rem;
        --app-pill-primary-padding-inline: 1rem;
        --app-pill-primary-gap: 0.55rem;
        --app-pill-primary-font-size: 0.9rem;
        --app-pill-primary-font-weight: 600;
        --app-pill-primary-radius: 999px;
        --app-pill-compact-min-height: 2.15rem;
        --app-pill-compact-padding-block: 0.42rem;
        --app-pill-compact-padding-inline: 0.82rem;
        --app-pill-compact-font-size: 0.82rem;
        --app-pill-compact-font-weight: 600;
        --app-pill-compact-radius: 999px;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --app-bg: #17181b;
          --app-bg-alt: #1d1f24;
          --app-sidebar-bg: #18191c;
          --app-surface: rgba(30, 32, 36, 0.92);
          --app-surface-solid: #22242a;
          --app-surface-secondary: rgba(44, 46, 51, 0.84);
          --app-border: rgba(255, 255, 255, 0.1);
          --app-border-strong: rgba(255, 255, 255, 0.16);
          --app-text: #f5f5f7;
          --app-text-secondary: #a1a1aa;
          --app-text-tertiary: #8e8e93;
          --app-accent: #0a84ff;
          --app-accent-soft: rgba(10, 132, 255, 0.2);
          --app-accent-soft-strong: rgba(10, 132, 255, 0.28);
          --app-danger: #ff453a;
          --app-danger-soft: rgba(255, 69, 58, 0.18);
          --app-success: #30d158;
          --app-success-soft: rgba(48, 209, 88, 0.2);
          --app-shadow: 0 20px 40px rgba(0, 0, 0, 0.24);
          --app-icon-surface: linear-gradient(180deg, rgba(72, 79, 93, 0.94), rgba(53, 59, 70, 0.98));
          --app-icon-border: rgba(144, 186, 255, 0.24);
          --app-icon-text: #f5f7fb;
          --app-monogram-surface: #4c5566;
          --app-monogram-border: #6f7d96;
          --app-monogram-text: #ffffff;
        }
      }

      html {
        height: 100%;
        overflow: hidden;
        background: var(--app-bg);
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
        background: linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-alt) 100%);
        color: var(--app-text);
        height: 100%;
        min-height: 100vh;
        margin: 0;
        overflow: hidden;
        -webkit-font-smoothing: antialiased;
      }

      a {
        transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      turbo-frame {
        display: block;
        min-width: 0;
      }

      .app-content-frame {
        position: relative;
        min-height: 100%;
      }

      .app-content-frame.is-loading > .app-main {
        opacity: 0.42;
        filter: saturate(0.82);
        pointer-events: none;
        transition: opacity 0.12s ease, filter 0.12s ease;
      }

      .app-content-loading {
        position: absolute;
        inset: 0;
        z-index: 55;
        display: grid;
        place-items: start center;
        padding-top: clamp(5rem, 18vh, 10rem);
        background: linear-gradient(
          180deg,
          color-mix(in srgb, var(--app-bg) 78%, transparent) 0%,
          color-mix(in srgb, var(--app-bg) 56%, transparent) 48%,
          color-mix(in srgb, var(--app-bg) 22%, transparent) 100%
        );
        pointer-events: auto;
        cursor: progress;
      }

      .app-content-loading[hidden] {
        display: none !important;
      }

      .app-content-loading-card {
        display: inline-flex;
        align-items: center;
        gap: 0.62rem;
        min-height: 2.8rem;
        padding: 0.72rem 1rem;
        border: 1px solid color-mix(in srgb, var(--app-accent) 24%, var(--app-border));
        border-radius: var(--app-radius-control);
        background: color-mix(in srgb, var(--app-surface-solid) 92%, var(--app-surface-secondary));
        color: var(--app-text);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1;
      }

      .app-content-loading-spinner {
        width: 1rem;
        height: 1rem;
        border-radius: 999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: app-control-spinner 0.7s linear infinite;
      }

      a[href],
      button:not(:disabled),
      summary,
      label[for],
      input[type="checkbox"],
      input[type="radio"],
      select:not(:disabled) {
        cursor: pointer;
      }

      button:disabled,
      input:disabled,
      select:disabled,
      textarea:disabled {
        cursor: default;
      }

      a[aria-disabled="true"],
      .is-requesting {
        cursor: default;
      }

      a[aria-disabled="true"] {
        pointer-events: none;
      }

      .bg-base-100,
      .bg-base-200 {
        background: transparent !important;
      }

      .bg-white,
      .card,
      .modal-box {
        background-color: var(--app-surface-solid) !important;
        color: var(--app-text) !important;
      }

      .border-base-200,
      .border-gray-100,
      .border-gray-101,
      .border-gray-200 {
        border-color: var(--app-border) !important;
      }

      .text-gray-900 {
        color: var(--app-text) !important;
      }

      .text-gray-800 {
        color: color-mix(in srgb, var(--app-text) 84%, transparent) !important;
      }

      .text-gray-500 {
        color: var(--app-text-secondary) !important;
      }

      .text-gray-400 {
        color: var(--app-text-tertiary) !important;
      }

      .app-shell-sidebar .bg-base-100 {
        background: var(--app-sidebar-bg) !important;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
      }

      .drawer-overlay {
        background: rgba(15, 23, 42, 0.08);
        backdrop-filter: blur(2px);
      }

      .card {
        border-radius: 24px;
        border: 1px solid var(--app-border);
        box-shadow: var(--app-shadow);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
      }

      .card:hover {
        transform: translateY(-1px);
        box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08), 0 8px 18px rgba(15, 23, 42, 0.05);
      }

      .btn {
        min-height: 2.25rem;
        border-radius: 999px;
        border-color: transparent;
        font-weight: 600;
        letter-spacing: -0.01em;
        box-shadow: none;
      }

      .btn-primary {
        background: var(--app-accent) !important;
        color: #ffffff !important;
        box-shadow: none;
      }

      .btn-primary:hover {
        background: color-mix(in srgb, var(--app-accent) 88%, black) !important;
      }

      .btn-error {
        background: var(--app-danger) !important;
        color: #ffffff !important;
      }

      .btn-ghost {
        color: var(--app-text-secondary) !important;
      }

      .btn-ghost:hover {
        background: rgba(60, 60, 67, 0.08) !important;
        color: var(--app-text) !important;
      }

      .alert {
        border-radius: 20px;
        border: 1px solid var(--app-border);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .alert-success {
        background: color-mix(in srgb, var(--app-success-soft) 84%, white) !important;
        color: color-mix(in srgb, var(--app-success) 80%, black) !important;
      }

      .alert-error {
        background: color-mix(in srgb, var(--app-danger-soft) 88%, white) !important;
        color: color-mix(in srgb, var(--app-danger) 82%, black) !important;
      }

      .badge {
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-weight: 600;
      }

      .badge-primary,
      .badge-outline {
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent) !important;
        background: var(--app-accent-soft) !important;
        color: var(--app-accent) !important;
      }

      .badge-neutral {
        background: var(--app-surface-secondary) !important;
        color: var(--app-text-secondary) !important;
      }

      .app-public-shell {
        min-height: 100vh;
        padding: 2.5rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
      }

      .app-public-shell:has(.app-assistant-shell) {
        padding: 0;
        display: block;
      }

      .app-assistant-shell {
        position: relative;
        min-height: 100vh;
        width: 100%;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--app-accent) 18%, transparent) 0%, transparent 38%),
          linear-gradient(180deg, var(--app-bg) 0%, var(--app-bg-alt) 100%);
      }

      .app-assistant-topbar {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        justify-content: flex-end;
        padding: clamp(1rem, 3vw, 2rem);
      }

      .app-assistant-conversation-title {
        max-width: min(36rem, 58vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--app-text-tertiary);
        font-size: 0.85rem;
        font-weight: 720;
      }

      .app-assistant-library-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding: 0.55rem 1rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.88rem;
        font-weight: 700;
        text-decoration: none;
        backdrop-filter: blur(18px);
      }

      .app-assistant-library-link:hover,
      .app-assistant-library-link:focus-visible {
        color: var(--app-text);
        border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
      }

      .app-assistant-stage {
        position: relative;
        z-index: 1;
        width: min(100%, 56rem);
        min-height: min(44rem, calc(100vh - 6rem));
        margin: 0 auto;
        padding: clamp(1.25rem, 5vw, 3rem);
        display: grid;
        align-content: center;
        justify-items: center;
        gap: clamp(1.5rem, 4vw, 2.4rem);
      }

      .app-assistant-pulse {
        position: relative;
        width: clamp(11rem, 34vw, 19rem);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
      }

      .app-assistant-pulse-ring,
      .app-assistant-pulse-core {
        position: absolute;
        border-radius: 999px;
      }

      .app-assistant-pulse-ring--outer {
        inset: 0;
        border: 1px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 32%, transparent);
        animation: app-assistant-breathe 4.8s ease-in-out infinite;
      }

      .app-assistant-pulse-ring--middle {
        inset: 18%;
        border: 1px solid color-mix(in srgb, var(--app-success) 26%, var(--app-border));
        background: color-mix(in srgb, var(--app-surface-solid) 44%, transparent);
        animation: app-assistant-breathe 4.8s ease-in-out infinite reverse;
      }

      .app-assistant-pulse-core {
        width: 38%;
        aspect-ratio: 1;
        background:
          radial-gradient(circle at 42% 36%, rgba(255, 255, 255, 0.88), transparent 34%),
          color-mix(in srgb, var(--app-accent) 86%, var(--app-success) 14%);
        box-shadow:
          0 0 0 1px color-mix(in srgb, var(--app-accent) 28%, transparent),
          0 0 44px color-mix(in srgb, var(--app-accent) 42%, transparent);
        animation: app-assistant-pulse-core 2.6s ease-in-out infinite;
      }

      .app-assistant-copy {
        text-align: center;
        max-width: 36rem;
      }

      .app-assistant-copy h1 {
        margin: 0;
        color: var(--app-text);
        font-size: clamp(2.1rem, 7vw, 4.7rem);
        line-height: 1.02;
        letter-spacing: 0;
        font-weight: 760;
      }

      .app-assistant-copy p {
        margin: 1rem auto 0;
        max-width: 31rem;
        color: var(--app-text-secondary);
        font-size: clamp(1rem, 2.4vw, 1.18rem);
        line-height: 1.55;
        font-weight: 560;
      }

      .app-assistant-thread {
        width: min(100%, 46rem);
        max-height: min(32vh, 22rem);
        overflow-y: auto;
        display: grid;
        gap: 0.8rem;
        padding: 0.25rem;
      }

      .app-assistant-message {
        width: min(86%, 34rem);
        padding: 0.85rem 1rem;
        border: 1px solid var(--app-border);
        border-radius: 18px;
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        box-shadow: var(--app-shadow);
        backdrop-filter: blur(18px);
      }

      .app-assistant-message--user {
        justify-self: end;
        border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
        background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-surface-solid));
      }

      .app-assistant-message--assistant {
        justify-self: start;
      }

      .app-assistant-message p {
        margin: 0;
        color: var(--app-text);
        font-size: 0.96rem;
        line-height: 1.48;
        white-space: pre-line;
      }

      .app-assistant-memory-strip {
        width: min(100%, 48rem);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.55rem;
      }

      .app-assistant-memory-chip {
        min-width: 0;
        max-width: min(16rem, 100%);
        display: inline-grid;
        gap: 0.12rem;
        padding: 0.6rem 0.78rem;
        border: 1px solid var(--app-border);
        border-radius: 12px;
        background: color-mix(in srgb, var(--app-surface-solid) 72%, transparent);
        color: var(--app-text);
        text-decoration: none;
        backdrop-filter: blur(18px);
      }

      .app-assistant-memory-chip:hover,
      .app-assistant-memory-chip:focus-visible {
        border-color: color-mix(in srgb, var(--app-accent) 32%, var(--app-border));
      }

      .app-assistant-memory-chip span,
      .app-assistant-memory-chip small {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-assistant-memory-chip span {
        font-size: 0.88rem;
        font-weight: 760;
      }

      .app-assistant-memory-chip small {
        color: var(--app-text-tertiary);
        font-size: 0.72rem;
        font-weight: 680;
      }

      .app-assistant-memory-chip--reminder {
        border-color: color-mix(in srgb, var(--app-success) 28%, var(--app-border));
      }

      .app-assistant-input-shell {
        width: min(100%, 42rem);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 0.75rem;
        padding: 0.7rem;
        border: 1px solid var(--app-border-strong);
        border-radius: 28px;
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        box-shadow: var(--app-shadow);
        backdrop-filter: blur(22px);
      }

      .app-assistant-input {
        min-height: 3.2rem;
        max-height: 10rem;
        resize: vertical;
        border: 0;
        border-radius: 22px;
        padding: 0.92rem 1rem;
        background: transparent;
        color: var(--app-text);
        font: inherit;
        font-size: 1rem;
        line-height: 1.4;
        outline: none;
      }

      .app-assistant-input::placeholder {
        color: var(--app-text-tertiary);
      }

      .app-assistant-actions {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }

      .app-assistant-voice-button,
      .app-assistant-send-button {
        min-height: 2.85rem;
        border: 0;
        border-radius: 999px;
        font-weight: 760;
        cursor: pointer;
      }

      .app-assistant-voice-button {
        width: 2.85rem;
        display: inline-grid;
        place-items: center;
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
      }

      .app-assistant-voice-button svg {
        width: 1.15rem;
        height: 1.15rem;
      }

      .app-assistant-send-button {
        padding: 0 1.1rem;
        background: var(--app-accent);
        color: white;
      }

      .app-assistant-voice-button:hover,
      .app-assistant-voice-button:focus-visible {
        color: var(--app-text);
        background: var(--app-accent-soft);
      }

      .app-assistant-send-button:hover,
      .app-assistant-send-button:focus-visible {
        filter: brightness(1.04);
      }

      @keyframes app-assistant-breathe {
        0%,
        100% {
          opacity: 0.72;
          transform: scale(0.96);
        }

        50% {
          opacity: 1;
          transform: scale(1.04);
        }
      }

      @keyframes app-assistant-pulse-core {
        0%,
        100% {
          transform: scale(0.94);
        }

        50% {
          transform: scale(1.04);
        }
      }

      @media (max-width: 640px) {
        .app-assistant-topbar {
          padding: 1rem;
          justify-content: space-between;
        }

        .app-assistant-stage {
          min-height: calc(100vh - 4.5rem);
          padding-inline: 1rem;
        }

        .app-assistant-conversation-title {
          max-width: 48vw;
        }

        .app-assistant-thread {
          max-height: 26vh;
        }

        .app-assistant-message {
          width: min(92%, 100%);
        }

        .app-assistant-input-shell {
          grid-template-columns: minmax(0, 1fr);
          border-radius: 24px;
        }

        .app-assistant-actions {
          justify-content: flex-end;
        }
      }

      .app-auth-card {
        width: min(100%, 32rem);
        background: var(--app-surface-solid);
        border: 1px solid var(--app-border);
        border-radius: 32px;
        padding: 2.25rem;
        box-shadow: var(--app-shadow);
      }

      .app-auth-eyebrow {
        margin: 0 0 0.75rem;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--app-text-tertiary);
      }

      .app-auth-title {
        margin: 0;
        font-size: clamp(2rem, 5vw, 3rem);
        line-height: 1;
        letter-spacing: -0.05em;
      }

      .app-auth-subtitle {
        margin: 1rem 0 0;
        font-size: 1rem;
        line-height: 1.6;
        color: var(--app-text-secondary);
      }

      .app-auth-provider-stack {
        margin-top: 2rem;
        display: grid;
        gap: 1rem;
      }

      .app-auth-setup {
        display: grid;
        gap: 1rem;
        padding-top: 0.5rem;
      }

      .app-auth-setup h2 {
        margin: 0;
        font-size: 1rem;
        line-height: 1.3;
      }

      .app-auth-setup p {
        margin: 0;
        color: var(--app-text-secondary);
        font-size: 0.95rem;
        line-height: 1.55;
      }

      .app-auth-setup-block {
        display: grid;
        gap: 0.65rem;
        padding: 1rem;
        border: 1px solid var(--app-border);
        border-radius: 18px;
        background: var(--app-surface-secondary);
      }

      .app-auth-setup-block strong {
        font-size: 0.95rem;
      }

      .app-auth-setup-block ol {
        margin: 0;
        padding-left: 1.1rem;
        color: var(--app-text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      .app-auth-setup-block code {
        overflow-wrap: anywhere;
        color: var(--app-text);
        font-size: 0.85rem;
      }

      .app-auth-setup-block a {
        color: var(--app-accent);
        font-size: 0.9rem;
        font-weight: 700;
        text-decoration: none;
      }

      .app-auth-provider-slot {
        width: 100%;
        min-height: 3.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .app-auth-provider-placeholder {
        width: min(100%, 25rem);
        min-height: 3.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: var(--app-surface-secondary);
        font-weight: 600;
        color: var(--app-text-secondary);
      }

      .app-auth-provider-google-target {
        width: min(100%, 25rem);
        max-width: 100%;
        min-height: 2.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .app-auth-provider-button {
        position: relative;
        width: min(100%, 25rem);
        min-height: 3.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 0 1.4rem;
        border-radius: 999px;
        border: 2px solid #cdd3d8;
        background: #ffffff;
        color: #050505;
        font-size: clamp(1rem, 2.3vw, 1.32rem);
        font-weight: 820;
        letter-spacing: 0;
        line-height: 1.25;
        box-shadow: none;
        transition: border-color 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
      }

      .app-auth-provider-button:hover,
      .app-auth-provider-button:focus-visible {
        border-color: #aeb7bf;
        background: #f8fafc;
        transform: translateY(-1px);
      }

      .app-auth-provider-button:disabled {
        opacity: 0.5;
      }

      .app-auth-provider-button span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.25;
        padding-block: 0.1em;
      }

      .app-auth-provider-icon {
        width: 1.8rem;
        height: 1.8rem;
        flex: 0 0 auto;
      }

      .app-auth-provider-button--google {
        cursor: pointer;
      }

      .app-auth-provider-google-proxy {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
      }

      .app-auth-provider-google-proxy > div,
      .app-auth-provider-google-proxy iframe {
        width: 100% !important;
        height: 100% !important;
      }

      .app-auth-provider-google-proxy iframe {
        border-radius: 999px !important;
      }

      .app-account-card {
        max-width: 42rem;
      }

      .app-account-section {
        display: grid;
        gap: 1rem;
      }

      .app-account-section-heading {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }

      .app-account-section-heading h2 {
        margin: 0;
        font-size: 1.1rem;
        line-height: 1.2;
      }

      .app-account-section-heading p {
        margin: 0.25rem 0 0;
        color: var(--app-text-secondary);
        font-size: 0.95rem;
      }

      .app-account-provider-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border: 1px solid var(--app-border);
        border-radius: 20px;
        background: var(--app-surface-secondary);
      }

      .app-account-provider-row--stacked {
        align-items: stretch;
        flex-direction: column;
      }

      .app-account-provider-copy {
        display: grid;
        gap: 0.2rem;
      }

      .app-account-provider-copy strong {
        font-size: 1rem;
      }

      .app-account-provider-copy span {
        color: var(--app-text-secondary);
        font-size: 0.95rem;
      }

      .app-external-token-reveal {
        display: grid;
        gap: 0.85rem;
        padding: 1rem 1.25rem;
        border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
        border-radius: 20px;
        background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface-secondary));
      }

      .app-external-token-input,
      .app-external-url-input {
        width: 100%;
        min-width: 0;
        font-family: ui-monospace, SFMono-Regular, SFMono, Consolas, "Liberation Mono", Menlo, monospace;
        font-size: 0.85rem;
      }

      .app-external-token-list {
        display: grid;
        gap: 0.75rem;
      }

      .input,
      .textarea,
      .select {
        border-radius: 16px;
        border-color: var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text);
        box-shadow: none;
      }

      .input:focus,
      .textarea:focus,
      .input:focus-within,
      .select:focus {
        outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
        outline-offset: 1px;
      }

      .checkbox {
        border-color: var(--app-border-strong);
        background: var(--app-surface-solid);
      }

      .checkbox:checked {
        border-color: var(--app-accent);
        background-color: var(--app-accent);
      }

      .select[multiple] {
        background-image: none !important;
        height: auto;
      }

      .app-emoji-field {
        position: relative;
      }

      .app-emoji-field-control {
        display: flex;
        align-items: center;
        gap: 0.6rem;
      }

      .app-emoji-trigger {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 2.75rem;
        border-radius: 16px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .app-emoji-trigger:hover,
      .app-emoji-field.is-open .app-emoji-trigger {
        color: var(--app-text);
        border-color: color-mix(in srgb, var(--app-accent) 16%, transparent);
        background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface-secondary));
      }

      .app-emoji-picker-panel {
        position: absolute;
        top: calc(100% + 0.6rem);
        left: 0;
        z-index: 80;
        width: min(21rem, calc(100vw - 2rem));
        border-radius: 22px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 94%, transparent);
        box-shadow: var(--app-shadow);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        padding: 1rem;
      }

      .app-emoji-field.is-above .app-emoji-picker-panel {
        top: auto;
        bottom: calc(100% + 0.6rem);
      }

      .app-emoji-picker-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.9rem;
      }

      .app-emoji-picker-title {
        color: var(--app-text);
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      .app-emoji-picker-subtitle,
      .app-emoji-picker-footnote {
        color: var(--app-text-secondary);
        font-size: 0.76rem;
        line-height: 1.45;
      }

      .app-emoji-picker-clear {
        color: var(--app-accent);
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
      }

      .app-emoji-picker-section + .app-emoji-picker-section {
        margin-top: 0.8rem;
      }

      .app-emoji-picker-section-title {
        color: var(--app-text-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 0.45rem;
      }

      .app-emoji-picker-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 0.38rem;
      }

      .app-emoji-picker-option {
        aspect-ratio: 1;
        border-radius: 14px;
        border: 1px solid transparent;
        background: var(--app-surface-secondary);
        font-size: 1.25rem;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      }

      .app-emoji-picker-option:hover {
        background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface-secondary));
        border-color: color-mix(in srgb, var(--app-accent) 16%, transparent);
        transform: translateY(-1px);
      }

      .app-emoji-picker-footnote {
        margin-top: 0.9rem;
      }

      trix-editor {
        min-height: 150px;
        background: var(--app-surface-secondary) !important;
        border-radius: 20px;
        border: 1px solid var(--app-border) !important;
        padding: 1rem 1.1rem;
        font-size: 15px;
        line-height: 1.65;
        color: var(--app-text) !important;
      }

      trix-toolbar .trix-button-row {
        border-bottom: none;
        margin-bottom: 0.75rem;
      }

      trix-toolbar .trix-button-group {
        border-color: var(--app-border) !important;
        border-radius: 12px;
        overflow: hidden;
      }

      trix-toolbar .trix-button {
        background: var(--app-surface-secondary) !important;
        border-bottom-color: var(--app-border) !important;
        color: var(--app-text-secondary) !important;
      }

      trix-toolbar .trix-button:hover,
      trix-toolbar .trix-button.trix-active {
        background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface-secondary)) !important;
        color: var(--app-text) !important;
      }

      @media (prefers-color-scheme: dark) {
        trix-toolbar .trix-button--icon::before {
          filter: brightness(0) invert(1);
          opacity: 0.9;
        }
      }

      .trix-content {
        font-size: 15px;
        line-height: 1.68;
        color: inherit;
      }

      .trix-content a {
        color: var(--app-accent);
        text-decoration: none;
        font-weight: 600;
      }

      .app-shell {
        position: relative;
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
        --app-sidebar-collapsed-width: 4.35rem;
        --app-sidebar-expanded-width: 17rem;
        --app-sidebar-inline-padding: 0.6rem;
        --app-sidebar-rail-link-size: 3.15rem;
        --app-sidebar-rail-center: calc(var(--app-sidebar-collapsed-width) / 2);
        --app-sidebar-active-inset: calc((var(--app-sidebar-collapsed-width) - var(--app-sidebar-rail-link-size)) / 2);
        --app-sidebar-link-border-width: 1px;
        --app-sidebar-list-gap: 0.5rem;
        --app-sidebar-group-icon-size: 1.55rem;
        --app-sidebar-feed-monogram-source-size: 2.35rem;
        --app-sidebar-feed-monogram-source-radius: 0.92rem;
        --app-sidebar-feed-monogram-source-font-size: 0.86rem;
        --app-sidebar-monogram-scale: 0.659574;
        --app-sidebar-monogram-border-width: 0.659574px;
        --app-sidebar-monogram-radius: calc(var(--app-sidebar-feed-monogram-source-radius) * var(--app-sidebar-monogram-scale));
        --app-sidebar-monogram-font-size: calc(var(--app-sidebar-feed-monogram-source-font-size) * var(--app-sidebar-monogram-scale));
        --app-sidebar-monogram-shadow: inset 0 0 0 var(--app-sidebar-monogram-border-width) color-mix(in srgb, var(--app-border) 80%, transparent);
        --app-sidebar-group-emoji-size: 1.32rem;
        --app-sidebar-utility-icon-size: 1.75rem;
        --app-sidebar-label-start: calc((var(--app-sidebar-collapsed-width) / 2) + (var(--app-sidebar-utility-icon-size) / 2) + 0.62rem);
        --app-sidebar-expanded-label-start: calc(var(--app-sidebar-label-start) - var(--app-sidebar-inline-padding));
        --app-sidebar-expanded-group-icon-left: calc(((var(--app-sidebar-collapsed-width) - var(--app-sidebar-group-icon-size)) / 2) - var(--app-sidebar-inline-padding) - var(--app-sidebar-link-border-width));
        --app-sidebar-expanded-utility-icon-left: calc(((var(--app-sidebar-collapsed-width) - var(--app-sidebar-utility-icon-size)) / 2) - var(--app-sidebar-inline-padding) - var(--app-sidebar-link-border-width));
        --app-sidebar-collapsed-group-icon-left: calc(((var(--app-sidebar-rail-link-size) - var(--app-sidebar-group-icon-size)) / 2) - var(--app-sidebar-link-border-width));
        --app-sidebar-collapsed-utility-icon-left: calc(((var(--app-sidebar-rail-link-size) - var(--app-sidebar-utility-icon-size)) / 2) - var(--app-sidebar-link-border-width));
        --app-shell-toggle-size: var(--app-sidebar-rail-link-size);
        --app-sidebar-header-height: 4.25rem;
        --app-sidebar-disclosure-slot: 0.86rem;
        --app-sidebar-disclosure-inset: 0.18rem;
        --app-sidebar-disclosure-gap: 0.1rem;
        --app-sidebar-nest-step: 0.86rem;
        --app-sidebar-tree-line-offset: 0.44rem;
      }

      .app-shell-body {
        display: flex;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
      }

      .app-shell-toggle {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
        left: calc(
          env(safe-area-inset-left, 0px) +
          ((var(--app-sidebar-collapsed-width) - var(--app-shell-toggle-size)) / 2)
        );
        z-index: 70;
        width: var(--app-shell-toggle-size);
        height: var(--app-shell-toggle-size);
        border-radius: 17px;
        border: var(--app-sidebar-link-border-width) solid transparent;
        background: transparent;
        color: var(--app-text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .app-shell-toggle:hover {
        color: var(--app-text);
        background: rgba(60, 60, 67, 0.08);
        border-color: var(--app-border);
      }

      .app-shell-toggle-icon--close {
        display: none;
      }

      .app-shell-overlay {
        position: fixed;
        inset: 0;
        z-index: 54;
        background: rgba(15, 23, 42, 0.18);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
      }

      .app-shell-main {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-color: color-mix(in srgb, var(--app-text-tertiary) 42%, transparent) transparent;
        scrollbar-width: thin;
      }

      .app-shell-main::-webkit-scrollbar {
        width: 0.7rem;
        height: 0.7rem;
      }

      .app-shell-main::-webkit-scrollbar-track {
        background: transparent;
      }

      .app-shell-main::-webkit-scrollbar-thumb {
        border: 0.22rem solid transparent;
        border-radius: 999px;
        background-clip: content-box;
        background-color: color-mix(in srgb, var(--app-text-tertiary) 42%, transparent);
      }

      .app-shell-main::-webkit-scrollbar-thumb:hover {
        background-color: color-mix(in srgb, var(--app-text-secondary) 58%, transparent);
      }

      .app-shell-main::-webkit-scrollbar-corner {
        background: transparent;
      }

      .app-shell-sidebar {
        position: relative;
        width: max-content;
        min-width: var(--app-sidebar-collapsed-width);
        max-width: var(--app-sidebar-expanded-width);
        flex: 0 0 auto;
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow: visible !important;
        z-index: 55;
      }

      .app-shell-sidebar > * {
        transform: none !important;
        translate: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        margin-inline-start: 0 !important;
        inset-inline-start: 0 !important;
      }

      .app-sidebar-shell {
        position: relative;
        min-height: 100vh;
        height: 100vh;
        width: max-content;
        min-width: var(--app-sidebar-collapsed-width);
        max-width: var(--app-sidebar-expanded-width);
        border-right: 1px solid var(--app-border);
        background: var(--app-sidebar-bg) !important;
        backdrop-filter: blur(28px);
        -webkit-backdrop-filter: blur(28px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: width 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      }

      .app-sidebar-content {
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: visible;
      }

      .app-sidebar-header {
        position: absolute;
        inset: 0 0 auto;
        width: 100%;
        height: var(--app-sidebar-header-height);
        background: var(--app-sidebar-bg);
        overflow: visible;
        isolation: isolate;
        z-index: 6;
        pointer-events: none;
      }

      .app-sidebar-header::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: 1px;
        background: color-mix(in srgb, var(--app-border) 86%, transparent);
        box-shadow: 0 10px 18px color-mix(in srgb, #000 18%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
      }

      .app-sidebar-shell.is-scrolled .app-sidebar-header::after {
        opacity: 1;
      }

      .app-sidebar-expanded,
      .app-sidebar-collapsed {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        width: 100%;
        position: relative;
        z-index: 1;
        flex-direction: column;
      }

      .app-sidebar-expanded {
        padding-inline: var(--app-sidebar-inline-padding);
        width: max-content;
        max-width: var(--app-sidebar-expanded-width);
        box-sizing: border-box;
      }

      .app-sidebar-collapsed {
        display: none;
        padding-inline: 0;
      }

      .app-main {
        max-width: 58rem;
        padding: clamp(3rem, 4.6vw, 4rem) clamp(0.85rem, 2.2vw, 1.8rem) 2.75rem;
      }

      .app-shell :where(
        button,
        summary,
        [role="button"],
        .btn,
        .app-group-header-menu,
        .app-group-header-menu *,
        .app-sidebar-list,
        .app-sidebar-list *,
        .app-sidebar-rail-list,
        .app-sidebar-rail-list *,
        .app-sidebar-tree-list,
        .app-sidebar-tree-list *,
        .app-shell-toggle,
        .app-shell-toggle *,
        .app-page-mobile-sticky-menu,
        .app-page-mobile-sticky-menu *,
        .app-status-browser-group-filter-button,
        .app-status-browser-group-filter-button *,
        .app-status-browser-group-filter-mode-option,
        .app-status-browser-group-filter-mode-option *,
        .app-status-browser-group-filter-option,
        .app-status-browser-group-filter-option *,
        .app-group-picker-section-toggle,
        .app-group-picker-section-toggle *,
        .app-group-picker-more-button,
        .app-group-picker-more-button *,
        .app-status-browser-content-filter-chip,
        .app-status-browser-content-filter-chip *,
        .app-group-filter-chip,
        .app-group-filter-chip *,
        .app-filter-option,
        .app-filter-option *,
        .app-search-filter-button,
        .app-search-filter-button *,
        .app-group-summary-link,
        .app-group-summary-link *,
        .app-group-summary-button,
        .app-group-summary-button *,
        .app-ratings-create-toggle,
        .app-ratings-create-toggle *,
        .app-note-action,
        .app-note-action *,
        .app-note-footer-disclosure,
        .app-note-footer-disclosure *,
        .app-feed-page-entry-disclosure-toggle,
        .app-feed-page-entry-disclosure-toggle *,
        .app-feed-page-entry-more-link,
        .app-feed-page-entry-more-link *,
        .app-composer-toggle,
        .app-composer-toggle *,
        .app-child-entry-toggle-option,
        .app-child-entry-toggle-option *,
        .app-parent-pill,
        .app-parent-pill *
      ) {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
      }

      /* Sidebar */
      .app-sidebar-list,
      .app-sidebar-rail-list,
      .app-sidebar-tree-list {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
      }

      .app-sidebar-list {
        display: grid;
        grid-auto-rows: max-content;
        align-content: start;
        gap: var(--app-sidebar-list-gap);
        width: 100%;
        min-width: max-content;
        max-width: 100%;
      }

      .app-sidebar-panel,
      .app-sidebar-rail-panel {
        height: 100%;
        min-height: 0;
        width: max-content;
        max-width: 100%;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: stretch;
        gap: 0;
        position: relative;
        isolation: isolate;
        padding-top: var(--app-sidebar-header-height);
      }

      .app-sidebar-scroll-region {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        min-width: max-content;
        max-width: 100%;
        overscroll-behavior: contain;
      }

      .app-sidebar-scroll-region--rail {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .app-sidebar-list--primary,
      .app-sidebar-rail-list--primary {
        padding-bottom: 0.35rem;
      }

      .app-sidebar-list--footer,
      .app-sidebar-rail-list--footer {
        flex: 0 0 auto;
        padding-top: 0.18rem;
      }

      .app-sidebar-footer {
        flex: 0 0 auto;
        position: relative;
        z-index: 4;
        margin-inline: calc(var(--app-sidebar-inline-padding) * -1);
        padding-inline: var(--app-sidebar-inline-padding);
        padding-top: 0;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.35rem);
        background: var(--app-sidebar-bg);
        overflow: visible;
        isolation: isolate;
        width: auto;
        max-width: none;
      }

      .app-sidebar-footer::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 1px;
        background: color-mix(in srgb, var(--app-border) 86%, transparent);
        box-shadow: 0 -10px 18px color-mix(in srgb, #000 18%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
      }

      .app-sidebar-footer::after {
        content: "";
        position: absolute;
        inset: 0 0 0 auto;
        width: 1px;
        background: var(--app-border);
        pointer-events: none;
      }

      .app-sidebar-shell.has-footer-overflow .app-sidebar-footer::before {
        opacity: 1;
      }

      .app-sidebar-footer--rail {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .app-sidebar-rail-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
      }

      .app-sidebar-list > li,
      .app-sidebar-rail-list > li,
      .app-sidebar-tree-list > li {
        list-style: none;
      }

      .app-sidebar-list > li {
        width: 100%;
        min-width: max-content;
        max-width: 100%;
      }

      .app-sidebar-rail-list > li {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      .app-sidebar-group-link,
      .app-sidebar-utility-link {
        position: relative;
        min-height: var(--app-sidebar-rail-link-size);
        height: var(--app-sidebar-rail-link-size);
        border-radius: 14px;
        padding: 0 0.68rem 0 var(--app-sidebar-expanded-label-start);
        color: var(--app-text-secondary);
        font-size: 0.96rem;
        font-weight: 600;
        line-height: 1.2;
        background: transparent;
        border: var(--app-sidebar-link-border-width) solid transparent;
        display: flex;
        align-items: center;
        gap: 0.62rem;
        isolation: isolate;
        flex: 1 1 auto;
        min-width: 0;
        width: max-content;
        max-width: 100%;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .app-sidebar-group-link:hover,
      .app-sidebar-utility-link:hover {
        background: rgba(60, 60, 67, 0.06);
        color: var(--app-text);
      }

      .app-sidebar-group-link.active,
      .app-sidebar-utility-link.active {
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 16%, transparent);
        color: var(--app-accent);
      }

      .app-sidebar-group-link-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: opacity 0.14s ease;
        position: relative;
        z-index: 1;
      }

      .app-sidebar-utility-link > span {
        transition: opacity 0.14s ease;
        position: relative;
        z-index: 1;
      }

      .app-sidebar-group-link-icon {
        position: absolute;
        top: 50%;
        left: var(--app-sidebar-expanded-group-icon-left);
        transform: translateY(-50%);
        width: var(--app-sidebar-group-icon-size);
        height: var(--app-sidebar-group-icon-size);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        z-index: 1;
      }

      .app-sidebar-utility-link > svg {
        position: absolute;
        top: 50%;
        left: var(--app-sidebar-expanded-utility-icon-left);
        transform: translateY(-50%);
        width: var(--app-sidebar-utility-icon-size);
        height: var(--app-sidebar-utility-icon-size);
        margin: 0;
        z-index: 1;
      }

      .app-sidebar-tree-item {
        list-style: none;
        width: 100%;
        min-width: max-content;
        max-width: 100%;
      }

      .app-sidebar-branch {
        width: 100%;
        min-width: max-content;
        max-width: 100%;
      }

      .app-sidebar-branch-row {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        width: 100%;
        min-width: max-content;
        max-width: 100%;
        padding-right: var(--app-sidebar-disclosure-inset);
        box-sizing: border-box;
      }

      .app-sidebar-disclosure-toggle,
      .app-sidebar-disclosure-spacer {
        height: var(--app-sidebar-rail-link-size);
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        margin-left: auto;
      }

      .app-sidebar-disclosure-spacer {
        width: var(--app-sidebar-disclosure-slot);
        min-width: var(--app-sidebar-disclosure-slot);
      }

      .app-sidebar-branch-count {
        width: max-content;
        min-width: 0;
        height: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-text-tertiary);
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        white-space: nowrap;
        transition: color 0.2s ease, opacity 0.14s ease;
      }

      .app-sidebar-expanded .app-sidebar-branch-count:not(.app-sidebar-branch-count--empty) {
        transform: none;
      }

      .app-sidebar-branch-count--empty {
        opacity: 0;
      }

      .app-sidebar-disclosure-toggle {
        width: auto;
        min-width: var(--app-sidebar-disclosure-slot);
        gap: var(--app-sidebar-disclosure-gap);
        padding: 0 0 0 0.18rem;
        border: none;
        border-radius: 12px;
        color: var(--app-text-tertiary);
        background: transparent;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .app-sidebar-disclosure-toggle:hover {
        background: rgba(60, 60, 67, 0.06);
        color: var(--app-text-secondary);
      }

      .app-sidebar-branch-row:has(.app-sidebar-disclosure-toggle:hover) .app-sidebar-branch-count {
        color: var(--app-text-secondary);
      }

      .app-sidebar-branch-caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--app-sidebar-disclosure-slot);
        height: var(--app-sidebar-disclosure-slot);
        color: currentColor;
      }

      .sidebar-disclosure-icon {
        width: 0.7rem;
        height: 0.7rem;
        transition: transform 0.2s ease, opacity 0.2s ease;
        opacity: 0.88;
      }

      .app-sidebar-branch.is-open > .app-sidebar-branch-row .sidebar-disclosure-icon {
        transform: rotate(90deg);
        opacity: 1;
      }

      .app-sidebar-tree-list {
        position: relative;
        margin-top: 0.12rem;
        margin-left: 0;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
      }

      .app-sidebar-tree-list::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 calc(((var(--app-sidebar-depth, 1) - 1) * var(--app-sidebar-nest-step)) + var(--app-sidebar-tree-line-offset));
        width: 1px;
        background: color-mix(in srgb, var(--app-border) 78%, transparent);
      }

      .app-sidebar-tree-list > .app-sidebar-tree-item > .app-sidebar-branch > .app-sidebar-branch-row,
      .app-sidebar-tree-list > .app-sidebar-tree-item > .app-sidebar-branch-row {
        padding-left: calc(var(--app-sidebar-depth, 1) * var(--app-sidebar-nest-step));
      }
      .app-sidebar-rail-link {
        width: var(--app-sidebar-rail-link-size);
        height: var(--app-sidebar-rail-link-size);
        border-radius: 17px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-text-secondary);
        background: transparent;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .app-sidebar-rail-link:hover {
        background: rgba(60, 60, 67, 0.06);
        color: var(--app-text);
      }

      .app-sidebar-rail-link.active {
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 16%, transparent);
        color: var(--app-accent);
      }

      .app-sidebar-rail-group-icon {
        width: var(--app-sidebar-group-icon-size);
        height: var(--app-sidebar-group-icon-size);
      }

      .app-group-icon-badge {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--app-icon-surface);
        border: 1px solid var(--app-icon-border);
        color: var(--app-icon-text);
        flex-shrink: 0;
      }

      .app-sidebar-group-link .app-group-icon-badge {
        width: var(--app-sidebar-group-icon-size);
        height: var(--app-sidebar-group-icon-size);
      }

      .app-sidebar-group-link .app-group-icon-badge.is-monogram,
      .app-sidebar-rail-link .app-group-icon-badge.is-monogram {
        border-radius: var(--app-sidebar-monogram-radius);
        border-width: var(--app-sidebar-monogram-border-width);
        background: var(--app-icon-surface);
        border-color: var(--app-icon-border);
        color: var(--app-icon-text);
        box-shadow: var(--app-sidebar-monogram-shadow);
      }

      .app-sidebar-group-link .app-sidebar-group-link-icon--generated {
        display: inline-flex;
      }

      .app-group-icon-emoji {
        font-size: 1rem;
        line-height: 1;
      }

      .app-sidebar-group-link .app-group-icon-emoji {
        font-size: var(--app-sidebar-group-emoji-size);
      }

      .app-sidebar-group-link .app-group-icon-monogram {
        font-size: var(--app-sidebar-monogram-font-size);
      }

      .app-group-icon-monogram {
        font-size: 0.86rem;
        font-weight: 800;
        letter-spacing: 0.01em;
        line-height: 1;
      }

      .app-sidebar-tree-list .app-sidebar-group-link .app-sidebar-group-link-icon--generated {
        display: inline-flex !important;
        background: var(--app-icon-surface);
        border-width: var(--app-sidebar-monogram-border-width);
        border-color: var(--app-icon-border);
        color: var(--app-icon-text);
        box-shadow: var(--app-sidebar-monogram-shadow);
      }

      .app-sidebar-rail-link .app-group-icon-badge {
        width: var(--app-sidebar-group-icon-size);
        height: var(--app-sidebar-group-icon-size);
        border-radius: 12px;
      }

      .app-library-card-icon .app-group-icon-badge {
        width: 100%;
        height: 100%;
        border-radius: inherit;
      }

      .app-sidebar-rail-link .app-group-icon-badge.is-monogram {
        background: var(--app-icon-surface);
        border-color: var(--app-icon-border);
        color: var(--app-icon-text);
        box-shadow: var(--app-sidebar-monogram-shadow);
      }

      .app-library-card-icon .app-group-icon-badge {
        background: transparent;
      }

      .app-sidebar-group-link.active .app-group-icon-badge.is-monogram,
      .app-sidebar-rail-link.active .app-group-icon-badge.is-monogram {
        background: var(--app-icon-surface);
        border-color: var(--app-icon-border);
        color: var(--app-icon-text);
        box-shadow: var(--app-sidebar-monogram-shadow);
      }

      .app-group-icon-badge.is-emoji,
      .app-group-title-icon.is-emoji {
        background: transparent;
        border-color: transparent;
      }

      .app-sidebar-group-link.active .app-group-icon-badge.is-emoji,
      .app-sidebar-rail-link.active .app-group-icon-badge.is-emoji {
        background: transparent;
        border-color: transparent;
      }

      .app-library-card-icon:has(.app-group-icon-badge.is-emoji) {
        background: transparent;
        border-color: transparent;
      }

      /* Page chrome */
      .app-page-header {
        margin-bottom: 0.55rem;
      }

      .app-page-header-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        flex-wrap: wrap;
      }

      .app-page-header-title-row .button_to {
        margin: 0;
      }

      .app-page-header-title-cluster {
        display: inline-flex;
        align-items: baseline;
        flex: 1 1 auto;
        gap: 0.72rem;
        min-width: 0;
      }

      .app-empty-trash-trigger {
        appearance: none;
        border: 0;
        border-radius: 0.35rem;
        background: transparent;
        color: color-mix(in srgb, var(--app-danger) 88%, white 12%);
        cursor: pointer;
        font-size: clamp(1rem, 1.2vw, 1.12rem);
        font-weight: 750;
        letter-spacing: 0;
        line-height: 1;
        padding: 0.12rem 0.05rem;
        text-transform: lowercase;
        transition: color 0.16s ease, text-decoration-color 0.16s ease;
        white-space: nowrap;
      }

      .app-empty-trash-trigger:hover,
      .app-empty-trash-trigger:focus-visible {
        color: var(--app-danger);
        text-decoration: underline;
        text-decoration-color: color-mix(in srgb, var(--app-danger) 52%, transparent);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.22em;
      }

      .app-empty-trash-trigger:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--app-danger) 54%, transparent);
        outline-offset: 0.22rem;
      }

      .app-page-header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.18rem;
      }

      .app-page-meta {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-width: 0;
      }

      .app-back-link {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--app-text);
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 650;
        line-height: 1.2;
        padding: 0.2rem 0;
      }

      .app-back-link:hover,
      .app-back-link:focus-visible {
        color: var(--app-accent);
      }

      .app-back-link:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--app-accent) 42%, transparent);
        outline-offset: 0.24rem;
        border-radius: 0.45rem;
      }

      .app-page-label {
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        display: inline-flex;
        align-items: center;
        min-height: 2rem;
        padding: 0.32rem 0.7rem;
        font-size: 0.78rem;
        font-weight: 760;
        line-height: 1;
      }

      .app-page-mobile-sticky-bar {
        display: none;
        pointer-events: auto;
      }

      .app-page-mobile-sticky-inner {
        display: grid;
        grid-template-columns: 2.45rem minmax(0, 1fr) 2.45rem;
        align-items: center;
        gap: 0.8rem;
        min-height: 3.65rem;
        padding: 0.5rem 0.9rem 0.48rem;
        border-radius: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
        background: color-mix(in srgb, var(--app-sidebar-bg) 96%, transparent);
        box-shadow: none;
        transition: border-color 0.18s ease, box-shadow 0.18s ease;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .app-page-mobile-sticky-inner--with-actions {
        grid-template-columns: 2.45rem minmax(0, 1fr) auto;
      }

      .app-page-mobile-sticky-actions,
      .app-page-mobile-sticky-actions .app-group-header-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.42rem;
        min-width: 0;
      }

      .app-page-mobile-sticky-actions .app-page-sort-control,
      .app-page-mobile-sticky-actions .app-group-header-search-button,
      .app-page-mobile-sticky-actions .app-group-header-menu-button {
        flex: 0 0 2.45rem;
        width: 2.45rem;
        height: 2.45rem;
      }

      .app-page-mobile-sticky-actions .app-status-browser-header-actions.app-group-header-actions--mobile .app-group-header-search-button {
        display: none;
      }

      .app-page-mobile-sticky-menu {
        width: 2.45rem;
        height: 2.45rem;
        min-width: 2.45rem;
        min-height: 2.45rem;
        border: 0;
        padding: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-secondary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .app-page-mobile-sticky-menu:hover,
      .app-page-mobile-sticky-menu:focus-visible {
        color: var(--app-text);
        background: rgba(60, 60, 67, 0.08);
      }

      .app-page-mobile-sticky-menu-icon {
        width: 1.45rem;
        height: 1.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .app-page-mobile-sticky-menu-icon svg {
        width: 100%;
        height: 100%;
      }

      .app-page-mobile-sticky-menu-icon--close {
        display: none;
      }

      .app-page-mobile-sticky-title {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--app-text);
        font-size: 1.72rem;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.16;
      }

      .app-page-mobile-sticky-title-content {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        min-width: 0;
        max-width: 100%;
      }

      .app-page-mobile-sticky-title-emoji {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 1.12em;
        line-height: 1;
      }

      .app-page-mobile-sticky-title-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-page-mobile-sticky-edit-trigger {
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        text-align: left;
      }

      .app-page-mobile-sticky-icon-edit-trigger {
        width: 2.45rem;
        height: 2.45rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .app-page-mobile-sticky-title .app-page-title-content {
        align-items: baseline;
        flex-wrap: nowrap;
        line-height: inherit;
        overflow: visible;
        padding-block: 0.04em 0.08em;
      }

      .app-page-mobile-sticky-title .app-page-title-main,
      .app-page-mobile-sticky-title .app-page-title-count,
      .app-page-mobile-sticky-title .app-page-title-qualifier {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-page-mobile-sticky-title .app-page-title-main {
        flex: 1 1 auto;
      }

      .app-page-mobile-sticky-title .app-page-title-count {
        max-width: 9rem;
        font-size: 0.42em;
      }

      .app-page-mobile-sticky-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.45rem;
        height: 2.45rem;
      }

      .app-page-mobile-sticky-inner--index .app-page-mobile-sticky-icon {
        visibility: hidden;
      }

      .app-page-mobile-sticky-icon-badge {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: 14px;
        background: var(--app-icon-surface);
        border-color: var(--app-icon-border);
        box-shadow: none;
      }

      .app-page-mobile-sticky-icon-badge.is-emoji {
        background: transparent;
        border-color: transparent;
      }

      .app-page-mobile-sticky-icon-badge .app-group-icon-emoji {
        font-size: 2.25rem;
      }

      .app-page-mobile-sticky-icon-badge .app-group-icon-monogram {
        font-size: 1rem;
      }

      .app-page-mobile-sticky-bar.is-scrolled .app-page-mobile-sticky-inner {
        border-bottom-color: color-mix(in srgb, var(--app-border) 92%, transparent);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
      }

      .app-page-scroll-sticky-bar {
        display: block;
        position: sticky;
        top: 0;
        z-index: 52;
        height: 0;
        pointer-events: none;
      }

      .app-page-scroll-sticky-trigger {
        appearance: none;
        width: 100%;
        min-width: 0;
        min-height: 3rem;
        border: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--app-border) 76%, transparent);
        background: color-mix(in srgb, var(--app-bg) 92%, transparent);
        color: var(--app-text);
        cursor: pointer;
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        justify-content: flex-start;
        padding: 0.58rem 0 0.62rem;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-106%);
        transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
      }

      .app-page-scroll-sticky-trigger:hover,
      .app-page-scroll-sticky-trigger:focus-visible {
        color: var(--app-text);
        background: color-mix(in srgb, var(--app-bg) 86%, var(--app-surface-secondary) 14%);
      }

      .app-page-scroll-sticky-trigger:focus-visible {
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--app-accent) 48%, transparent);
      }

      .app-page-scroll-sticky-bar.is-scrolled .app-page-scroll-sticky-trigger {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        box-shadow: 0 0.8rem 1.4rem color-mix(in srgb, var(--app-bg) 72%, transparent);
      }

      .app-page-scroll-sticky-title {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: clamp(1.22rem, 1.8vw, 1.5rem);
        font-weight: 820;
        letter-spacing: 0;
        line-height: 1.1;
      }

      .app-page-scroll-sticky-count {
        color: var(--app-text-secondary);
        flex: 0 0 auto;
        font-size: 0.82rem;
        font-weight: 780;
        line-height: 1;
      }

      .app-page-parent-links {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
      }

      .app-page-parent-links--breadcrumbs {
        gap: 0.5rem;
      }

      .app-parent-breadcrumb-separator {
        display: inline-flex;
        align-items: center;
        color: var(--app-text-muted);
        font-size: var(--app-pill-compact-font-size);
        font-weight: 800;
        line-height: 1;
      }

      .app-parent-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: min(24ch, 100%);
        min-height: var(--app-pill-compact-min-height);
        padding: var(--app-pill-compact-padding-block) var(--app-pill-compact-padding-inline);
        border-radius: var(--app-pill-compact-radius);
        background: var(--app-surface-secondary);
        border: 1px solid var(--app-border);
        color: var(--app-text-secondary);
        font-size: var(--app-pill-compact-font-size);
        font-weight: var(--app-pill-compact-font-weight);
        line-height: 1.16;
        letter-spacing: 0.01em;
        text-decoration: none;
      }

      button.app-parent-pill,
      button.app-tag-selection-chip {
        appearance: none;
        font-family: inherit;
      }

      .app-parent-pill--with-context {
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.34rem;
        max-width: min(34ch, 100%);
        padding-inline: calc(var(--app-pill-compact-padding-inline) + 0.08rem);
      }

      .app-parent-pill-label {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-parent-pill-context {
        position: relative;
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
        padding-left: 0.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--app-text-muted);
        font-size: 0.78em;
        font-weight: 650;
        line-height: 1;
        letter-spacing: 0;
      }

      .app-parent-pill-context::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 0.24rem;
        height: 0.24rem;
        border-radius: 999px;
        background: color-mix(in srgb, currentColor 58%, transparent);
        transform: translateY(-50%);
      }

      .app-parent-pill:hover {
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-parent-pill--trash-context {
        background: color-mix(in srgb, var(--app-danger) 16%, transparent);
        border-color: color-mix(in srgb, var(--app-danger) 28%, transparent);
        color: color-mix(in srgb, var(--app-danger) 86%, white 14%);
      }

      .app-parent-pill--trash-context:hover,
      .app-parent-pill--trash-context:focus-visible {
        background: color-mix(in srgb, var(--app-danger) 22%, transparent);
        color: color-mix(in srgb, var(--app-danger) 90%, white 10%);
      }

      .app-page-title {
        color: var(--app-text);
        font-size: clamp(2.45rem, 5vw, 3.3rem);
        font-weight: 700;
        letter-spacing: -0.055em;
        line-height: 1;
      }

      .app-page-title-reset-link {
        display: inline-flex;
        max-width: 100%;
        color: inherit;
        text-decoration: none;
        border-radius: 0.24rem;
      }

      .app-page-title-content {
        display: inline-flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.18em;
        min-width: 0;
        max-width: 100%;
      }

      .app-page-title-main {
        min-width: 0;
      }

      .app-page-title-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 1.72em;
        padding: 0.32em 0.62em;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.24em;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
      }

      .app-page-title-qualifier {
        color: var(--app-text-secondary);
        font-size: 0.42em;
        font-weight: 650;
        letter-spacing: 0;
        line-height: 1.05;
        white-space: nowrap;
      }

      .app-page-title-reset-link:hover,
      .app-page-title-reset-link:focus-visible {
        color: color-mix(in srgb, var(--app-accent) 74%, var(--app-text));
        outline: none;
      }

      .app-page-title-reset-link:focus-visible {
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--app-accent) 16%, transparent);
      }

      .app-page-subtitle {
        color: var(--app-text-secondary);
        font-size: 1.02rem;
        line-height: 1.55;
        max-width: 42rem;
        margin-top: 0.04rem;
      }

      .app-group-title-row {
        display: flex;
        align-items: center;
        gap: 0.92rem;
        min-width: 0;
        width: fit-content;
        max-width: 100%;
      }

      .app-group-header-display {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.02rem;
      }

      .app-group-edit-trigger {
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
        display: inline-flex;
        width: auto;
        max-width: 100%;
      }

      .app-group-edit-trigger--icon,
      .app-group-edit-trigger--emoji {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        flex: 0 0 auto;
        border-radius: 18px;
      }

      .app-group-edit-trigger--name {
        min-width: 0;
        flex: 0 1 auto;
        align-items: center;
      }

      .app-group-edit-trigger--name .app-page-title,
      .app-group-edit-trigger--description .app-page-subtitle {
        display: block;
      }

      .app-group-edit-trigger--description {
        display: inline-block;
        width: auto;
        max-width: min(42rem, 100%);
        align-self: flex-start;
      }

      .app-group-edit-trigger:hover .app-group-title-icon,
      .app-group-edit-trigger:focus-visible .app-group-title-icon {
        border-color: color-mix(in srgb, var(--app-accent) 20%, transparent);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
      }

      .app-group-edit-trigger:hover .app-page-title,
      .app-group-edit-trigger:focus-visible .app-page-title {
        color: color-mix(in srgb, var(--app-text) 88%, var(--app-accent) 12%);
      }

      .app-group-edit-trigger:hover .app-page-subtitle,
      .app-group-edit-trigger:focus-visible .app-page-subtitle {
        color: var(--app-text);
      }

      .app-group-title-emoji {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: clamp(2.35rem, 4.9vw, 3.05rem);
        line-height: 1;
      }

      .app-group-title-icon {
        width: clamp(3.8rem, 6.6vw, 4.6rem);
        height: clamp(3.8rem, 6.6vw, 4.6rem);
        border-radius: 22px;
        background: var(--app-icon-surface);
        border: 1px solid var(--app-icon-border);
        color: var(--app-icon-text);
      }

      .app-group-title-icon .app-group-icon-emoji {
        font-size: clamp(2.4rem, 4vw, 2.85rem);
      }

      .app-group-title-icon .app-group-icon-monogram {
        font-size: 1.22rem;
      }

      .app-group-header-main {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.85rem;
      }

      .app-group-header-content {
        flex: 1 1 auto;
        min-width: 0;
      }

      .app-group-header-actions {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        flex: 0 0 auto;
      }

      .app-group-header-menu {
        position: relative;
      }

      .app-group-header-menu summary {
        list-style: none;
      }

      .app-group-header-menu summary::-webkit-details-marker {
        display: none;
      }

      .app-group-header-search-button,
      .app-group-header-menu-button,
      .app-group-header-actions .app-page-sort-control {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--app-radius-control);
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        cursor: pointer;
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
      }

      .app-page-search-shell.is-open .app-group-header-search-button[data-search-panel-target~="button"],
      .app-group-header-search-button.is-active,
      .app-group-header-actions .app-page-sort-control.is-active,
      .app-group-header-menu[open] .app-group-header-menu-button,
      .app-group-header-search-button:hover,
      .app-group-header-search-button:focus-visible,
      .app-group-header-actions .app-page-sort-control:hover,
      .app-group-header-actions .app-page-sort-control:focus-within,
      .app-group-header-menu-button:hover,
      .app-group-header-menu-button:focus-visible {
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent);
        background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface-secondary));
        color: var(--app-text);
      }

      .app-group-header-search-button svg,
      .app-group-header-actions .app-page-sort-icon,
      .app-group-header-actions .app-page-sort-icon svg,
      .app-group-header-menu-button svg {
        width: 1.2rem;
        height: 1.2rem;
      }

      .app-group-header-search-button.is-loading svg {
        opacity: 0;
      }

      .app-group-header-search-button.is-loading::after {
        content: "";
        position: absolute;
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: app-control-spinner 0.7s linear infinite;
      }

      .app-group-header-menu-list {
        position: absolute;
        top: calc(100% + 0.55rem);
        right: 0;
        z-index: 30;
        min-width: 14rem;
        padding: 0.45rem;
        border-radius: 20px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-solid);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.18);
      }

      .app-group-header-menu-form {
        display: block;
      }

      .app-group-header-menu-item {
        display: flex;
        align-items: center;
        gap: 0.72rem;
        width: 100%;
        padding: 0.78rem 0.9rem;
        border: 0;
        border-radius: 15px;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: left;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .app-group-header-menu-item svg {
        width: 1rem;
        height: 1rem;
        flex: 0 0 auto;
      }

      .app-group-header-menu-item:hover,
      .app-group-header-menu-item:focus-visible {
        background: color-mix(in srgb, var(--app-accent-soft) 84%, transparent);
        color: var(--app-text);
      }

      .app-group-header-menu-item--danger:hover,
      .app-group-header-menu-item--danger:focus-visible {
        background: var(--app-danger-soft);
        color: var(--app-danger);
      }

      .app-pin-icon--filled {
        transform: rotate(45deg);
        transform-origin: center;
      }

      .app-title-edit-field,
      .app-description-editor {
        width: 100%;
        border-radius: 18px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text);
        box-shadow: none;
      }

      .app-title-edit-field {
        font-size: 1.15rem;
        font-weight: 650;
        letter-spacing: 0;
        line-height: 1.2;
        padding: 0.86rem 1rem;
      }

      .app-description-editor {
        font-size: 1.15rem;
        line-height: 1.2;
        padding: 0.86rem 1rem;
      }

      .app-group-header-form {
        margin-top: 0.85rem;
      }

      .app-group-header-edit-shell {
        margin-top: 0;
      }

      .app-group-header-form-row {
        display: grid;
        grid-template-columns: 5.25rem minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
      }

      .app-group-header-icon-field {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
      }

      .app-group-header-main:has(.app-group-header-form:not(.hidden)) {
        display: block;
      }

      .app-group-header-main:has(.app-group-header-form:not(.hidden)) .app-group-header-content {
        width: 100%;
      }

      .app-group-header-main:has(.app-group-header-form:not(.hidden)) .app-group-header-actions--desktop {
        display: none;
      }

      .app-group-header-icon-input {
        width: 100%;
        text-align: center;
        font-size: 1.95rem;
        padding-inline: 0.5rem;
      }

      .app-group-header-icon-control {
        position: relative;
      }

      .app-group-header-icon-fallback {
        position: absolute;
        inset: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-text-secondary);
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        pointer-events: none;
      }

      .app-group-header-icon-label {
        display: block;
        width: 100%;
        margin-top: 0.48rem;
        color: var(--app-text-secondary);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.02em;
        text-align: center;
      }

      .app-group-header-icon-link {
        margin-top: 0.55rem;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--app-accent);
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
      }

      .app-group-header-icon-link:hover {
        text-decoration: underline;
      }

      .app-group-header-form-fields {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .app-group-header-description-input {
        min-height: 0;
      }

      .app-composer {
        overflow: hidden;
      }

      .app-composer-shell {
        transform: none !important;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .app-composer-shell:hover {
        transform: none !important;
        box-shadow: none !important;
      }

      .app-composer-shell:not(.is-open) {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }

      .app-composer .card-body {
        padding: 0;
      }

      .app-composer-shell .card-body,
      .app-composer-shell form {
        display: flex;
        flex-direction: column;
      }

      .app-composer-editor {
        padding: 0 1rem 0;
      }

      .app-composer-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        min-height: 0;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        padding: 0 1rem;
        transition: max-height 0.2s ease, padding 0.2s ease;
      }

      .app-composer-utility-row {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        flex-wrap: wrap;
        min-width: 0;
      }

      .app-composer-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.65rem;
        flex: 0 0 auto;
      }

      .app-composer-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.85rem;
        padding: 0.68rem 1.15rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 62%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.94rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      }

      .app-composer-toggle:hover,
      .app-composer-toggle:focus-visible {
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        border-color: color-mix(in srgb, var(--app-border-strong) 86%, transparent);
        color: var(--app-text);
      }

      .app-composer-shell trix-toolbar {
        display: block;
        visibility: hidden;
        pointer-events: none;
        min-height: 0;
        height: 0;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0 1rem;
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        background: transparent;
        transition: border-color 0.18s ease, background-color 0.18s ease, max-height 0.18s ease;
      }

      .app-composer-shell trix-toolbar .trix-button-row {
        margin-bottom: 0;
      }

      .app-composer-shell trix-toolbar .trix-button-group,
      .app-composer-shell trix-toolbar .trix-button {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease;
      }

      .app-composer-shell .app-composer-submit {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      .app-composer-shell .app-composer-footer > * {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
      }

      .app-composer-shell trix-editor {
        min-height: 1lh;
        height: auto;
        overflow-y: visible;
        padding: 0.95rem 1rem 1rem;
        line-height: 1.5;
        border-radius: 20px;
      }

      .app-composer-shell.is-open.is-rich trix-toolbar {
        visibility: visible;
        pointer-events: auto;
      }

      .app-composer-shell.is-open.is-rich trix-toolbar .trix-button-group,
      .app-composer-shell.is-open.is-rich trix-toolbar .trix-button {
        opacity: 1;
        visibility: visible;
      }

      .app-composer-shell.is-open:not(.app-tag-composer) {
        background: var(--app-surface-secondary) !important;
        background-color: var(--app-surface-secondary) !important;
        border-color: var(--app-border);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
      }

      .app-composer-shell.is-open:not(.app-tag-composer):hover {
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08) !important;
      }

      .app-composer-shell.is-open:not(.app-tag-composer) .app-composer-footer {
        background: var(--app-surface-secondary);
        max-height: 16rem;
        padding: 0.5rem 1rem 0.92rem;
      }

      .app-composer-shell.is-open.is-rich:not(.app-tag-composer) trix-toolbar {
        visibility: visible;
        min-height: 3.75rem;
        height: 3.75rem;
        max-height: 4rem;
        border-color: var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-composer-shell.is-open .app-composer-footer > * {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
      }

      .app-composer-shell.is-open .app-composer-submit {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
      }

      .app-composer-shell.is-open.is-rich trix-editor {
        min-height: 2.5lh;
        border-top: 0 !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .app-composer-shell.is-open.is-rich trix-editor {
        border-top: 0 !important;
      }

      .app-composer-shell--bare .app-composer-editor {
        padding-inline: 0;
      }

      .app-composer-shell--bare trix-toolbar {
        padding: 0;
      }

      .app-composer-shell--bare .app-composer-footer {
        padding: 0;
        gap: 0.75rem;
      }

      .app-composer-shell--bare.is-open {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }

      .app-composer-shell--bare.is-open:hover {
        box-shadow: none !important;
      }

      .app-composer-shell--bare.is-open .app-composer-footer {
        background: transparent;
        padding: 0.42rem 0 0;
      }

      .app-note-comment-composer .card-body {
        padding-top: 1rem;
        gap: 0.85rem;
      }

      .app-note-comment-composer-header {
        padding: 0 1rem;
      }

      .app-note-comment-composer .app-section-title {
        margin: 0;
      }

      .app-note-comment-composer .app-composer-editor {
        padding-inline: 0;
      }

      .app-note-comment-composer .app-composer-footer {
        justify-content: flex-end;
        padding-top: 0.75rem;
      }

      .app-note-comment-composer .app-composer-actions,
      .app-note-inline-reply-composer .app-composer-actions {
        width: 100%;
      }

      .app-note-thread-comment-header {
        display: none;
      }

      .app-note-thread-comment-actions {
        display: none;
      }

      .app-note-action--icon {
        justify-content: center;
        min-width: 2rem;
        padding-inline: 0;
        gap: 0;
      }

      .app-note-thread-comment .app-note-footer {
        margin-top: 0.62rem;
      }

      .app-note-thread-comment .app-note-action-row {
        justify-content: flex-start;
      }

      .app-note-thread-comment-thread {
        margin-bottom: 0.9rem;
      }

      .app-note-inline-reply-composer {
        margin-top: 0;
        margin-bottom: 0;
      }

      .app-note-inline-reply-composer .card-body {
        padding: 0;
        gap: 0.7rem;
      }

      .app-note-inline-reply-composer .app-composer-editor {
        padding-inline: 0;
      }

      .app-note-inline-reply-composer .app-composer-footer {
        justify-content: space-between;
        padding-top: 0.55rem;
      }

      .app-tag-composer {
        --app-tag-composer-toolbar-height: 3.75rem;
        margin-top: 0;
        margin-bottom: 0.58rem;
      }

      .app-note-inline-reply-composer.app-tag-composer {
        margin-bottom: 0;
      }

      .app-tag-composer form {
        position: relative;
        display: flex;
        flex-direction: column;
      }

      .app-tag-composer .app-composer-editor {
        margin-top: 0;
        padding-inline: 0;
      }

      .app-tag-composer trix-toolbar {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin-bottom: 0;
        padding-inline: 0;
        visibility: visible;
        pointer-events: none;
        min-height: 0;
        height: 0;
        max-height: 0;
        border-color: var(--app-border);
        background: transparent;
        opacity: 1;
      }

      .app-tag-composer.is-rich trix-toolbar {
        pointer-events: auto;
        background: var(--app-surface-secondary);
      }

      .app-tag-composer.is-open .app-composer-editor {
        margin-top: var(--app-tag-composer-toolbar-height);
      }

      .app-tag-composer.is-open:not(.is-rich) .app-composer-editor {
        margin-top: 0;
      }

      .app-tag-composer .app-composer-footer {
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0;
      }

      .app-tag-composer.is-open .app-composer-footer {
        background: transparent;
        max-height: 6rem;
        padding: 0.62rem 0 0;
      }

      .app-tag-composer.is-open:not(.is-rich) trix-toolbar {
        min-height: 0;
        height: 0;
        max-height: 0;
        border-color: transparent;
        background: transparent;
      }

      .app-tag-composer-tools {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 2.45rem;
      }

      .app-child-entry-toggle {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
      }

      .app-child-entry-toggle-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.45rem;
        padding: 0.48rem 0.92rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      }

      .app-child-entry-toggle-button:hover,
      .app-child-entry-toggle-button:focus-visible {
        background: color-mix(in srgb, var(--app-surface-solid) 90%, transparent);
        color: var(--app-text);
      }

      .app-child-entry-toggle-button.is-area {
        background: color-mix(in srgb, var(--app-surface-solid) 94%, transparent);
        border-color: color-mix(in srgb, var(--app-border) 100%, transparent);
        color: var(--app-text);
      }

      .app-tag-composer.is-open trix-editor {
        border-top: 0 !important;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .app-tag-composer:not(.is-rich) trix-editor {
        min-height: 3.35rem;
        height: 3.35rem;
        max-height: 3.35rem;
        overflow-y: auto;
        padding-top: 0.82rem;
        padding-bottom: 0.82rem;
        font-size: 0.9rem;
        line-height: 1.35;
      }

      .app-tag-composer.is-open:not(.is-rich) trix-editor {
        height: 3.35rem;
        max-height: 3.35rem;
        border-top: 1px solid var(--app-border) !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }

      .app-tag-composer-tools .app-tag-field,
      .app-tag-composer-tools .app-composer-tags {
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        gap: 0;
      }

      .app-tag-field {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.42rem;
        min-width: 0;
        min-height: 2.9rem;
        padding: 0.38rem 0.48rem;
        border-radius: 18px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-tag-field--compact {
        min-height: 2.55rem;
        padding: 0.3rem 0.4rem;
        border-radius: 16px;
      }

      .app-tag-field-button {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        flex: 0 0 auto;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-secondary);
        padding: 0.45rem 0.6rem;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .app-composer-tags {
        flex: 0 1 auto;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        gap: 0.35rem;
      }

      .app-composer-tags .app-tag-field-button {
        min-height: 2.45rem;
        padding: 0.48rem 0.74rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
      }

      .app-ratings-create-toggle--icon,
      .app-composer-tags .app-tag-field-button--icon-only {
        width: 2.45rem;
        min-width: 2.45rem;
        height: 2.45rem;
        min-height: 2.45rem;
        padding: 0 !important;
        gap: 0;
        justify-content: center;
        flex: 0 0 2.45rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
      }

      .app-ratings-create-toggle--icon svg,
      .app-composer-tags .app-tag-field-button--icon-only svg {
        width: 1.22rem;
        height: 1.22rem;
      }

      .app-composer-tags .app-tag-field-button:hover,
      .app-composer-tags .app-tag-field-button:focus-visible {
        background: color-mix(in srgb, var(--app-surface-solid) 90%, transparent);
      }

      .app-composer-tags .app-tag-selection-chip {
        margin: 0;
      }

      .app-tag-field-button:hover,
      .app-tag-field-button:focus-visible {
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-tag-field-button--compact {
        padding: 0.35rem 0.48rem;
        font-size: 0.76rem;
      }

      .app-tag-field-button--icon-only {
        width: 2.45rem;
        min-width: 2.45rem;
        height: 2.45rem;
        min-height: 2.45rem;
        padding: 0 !important;
        border-radius: 999px;
        justify-content: center;
        background: color-mix(in srgb, var(--app-surface-solid) 70%, transparent);
        border: 1px solid color-mix(in srgb, var(--app-border) 90%, transparent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .app-composer-tags {
        flex: 0 1 auto;
        min-width: 0;
      }

      .app-composer-tags.app-tag-field {
        min-height: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
      }

      .app-composer-tags .app-tag-field-button--icon-only {
        background: color-mix(in srgb, var(--app-surface-solid) 62%, transparent);
        border-color: color-mix(in srgb, var(--app-border) 86%, transparent);
      }

      .app-composer-tags .app-tag-field-button--icon-only:hover,
      .app-composer-tags .app-tag-field-button--icon-only:focus-visible {
        background: color-mix(in srgb, var(--app-surface-solid) 78%, transparent);
      }

      .app-tag-field-placeholder {
        color: var(--app-text-tertiary);
        font-size: 0.8rem;
        font-weight: 500;
      }

      .app-tag-selection-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
        max-width: min(100%, 18rem);
        white-space: nowrap;
      }

      .app-tag-selection-chip-label {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-tag-selection-chip--removable {
        padding-right: 0.22rem;
      }

      .app-tag-selection-chip-remove {
        border: none;
        background: transparent;
        color: inherit;
        flex: 0 0 1.35rem;
        width: 1.35rem;
        min-width: 1.35rem;
        height: 1.35rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 0.95em;
        line-height: 1;
        opacity: 0.72;
        transition: opacity 0.2s ease, background-color 0.2s ease;
      }

      .app-tag-selection-chip-remove:hover {
        opacity: 1;
        background: rgba(60, 60, 67, 0.08);
      }

      .app-tag-modal-preview {
        padding: 0.9rem 1.5rem 0.95rem;
        border-bottom: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-secondary) 88%, transparent);
        max-height: min(8.5rem, 26dvh);
        overflow-y: auto;
      }

      #tag-modal[open] {
        animation: none;
      }

      .app-tag-modal {
        width: min(90rem, calc(100vw - 1rem));
        max-width: none;
        min-height: min(44rem, calc(100dvh - 1.25rem));
        height: min(44rem, calc(100dvh - 1.25rem));
        max-height: min(44rem, calc(100dvh - 1.25rem));
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .app-tag-modal .app-modal-header,
      .app-child-groups-modal .app-modal-header {
        padding: 0.9rem 1rem 0;
      }

      .app-tag-modal .app-modal-body,
      .app-child-groups-modal .app-modal-body {
        padding: 0.75rem 1rem 0.9rem;
      }

      .app-tag-modal .app-modal-footer,
      .app-child-groups-modal .app-modal-footer {
        padding: 0.75rem 1rem 1rem;
      }

      .app-tag-modal-body {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.65rem;
        min-height: 0;
        overflow: hidden;
        width: 100%;
      }

      .app-child-groups-modal {
        width: min(90rem, calc(100vw - 1rem));
        max-width: none;
        min-height: min(44rem, calc(100dvh - 1.25rem));
        height: min(44rem, calc(100dvh - 1.25rem));
        max-height: min(44rem, calc(100dvh - 1.25rem));
        display: flex;
        flex-direction: column;
      }

      .app-child-groups-modal .app-filter-modal-form {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
      }

      .app-child-groups-modal .app-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
      }

      .app-child-groups-selector {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 0.65rem;
        min-height: 0;
      }

      .app-tag-modal .app-selection-search {
        margin-bottom: 0;
      }

      .app-tag-modal-search-shell {
        width: 100%;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 3rem;
        padding: 0 1rem;
        border-radius: 18px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 84%, var(--app-surface-secondary));
        transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
      }

      .app-tag-modal-search-shell:focus-within {
        border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
        box-shadow: var(--app-focus-ring);
      }

      .app-tag-modal-search-icon {
        width: 1rem;
        height: 1rem;
        color: var(--app-text-tertiary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
      }

      .app-tag-modal-search-icon svg {
        display: block;
        width: 1rem;
        height: 1rem;
        flex: 0 0 auto;
      }

      .app-tag-modal-search-input {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
        border: 0;
        outline: 0;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        color: var(--app-text);
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.4;
        padding: 0;
        box-shadow: none !important;
      }

      .app-tag-modal-search-input:focus {
        outline: none !important;
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      .app-tag-modal-search-input::placeholder {
        color: var(--app-text-tertiary);
      }

      .app-tag-modal-panel {
        margin-top: 0;
        flex: 1 1 auto;
        min-height: min(24rem, calc(100dvh - 18rem));
        height: 100%;
        overflow-y: auto;
      }

      .app-tag-modal-create-slot {
        flex: 0 0 3.5rem;
        min-height: 3.5rem;
      }

      .app-tag-modal-create-slot .app-selection-create-row {
        height: 100%;
      }

      .app-tag-modal-done {
        height: 3rem;
        min-width: 7.25rem;
        white-space: nowrap;
      }

      .app-tag-modal-preview-label {
        color: var(--app-text-tertiary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-bottom: 0.55rem;
      }

      .app-tag-modal-preview-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.62rem 0.72rem;
      }

      .app-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.35rem;
      }

      .app-section-heading {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
      }

      .app-section-block {
        margin-bottom: 2rem;
      }

      .app-section-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
      }

      .app-section-toggle:hover .app-section-title,
      .app-section-toggle:focus-visible .app-section-title {
        color: var(--app-accent);
      }

      .app-section-disclosure-icon {
        width: 0.82rem;
        height: 0.82rem;
        color: var(--app-text-tertiary);
        transition: transform 0.2s ease, color 0.2s ease;
      }

      .app-section-block.is-open .app-section-disclosure-icon {
        transform: rotate(90deg);
        color: var(--app-text-secondary);
      }

      .app-section-content {
        margin-top: 1rem;
      }

      .app-section-title {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--app-text);
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: -0.03em;
      }

      .app-section-visibility-toggle {
        border: 0;
        background: transparent;
        padding: 0;
        color: var(--app-text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
        transition: color 0.2s ease;
      }

      .app-section-visibility-toggle:hover,
      .app-section-visibility-toggle:focus-visible {
        color: var(--app-text);
      }

      .app-section-visibility-toggle-closed {
        display: none;
      }

      .app-child-groups-section:not(.is-open) .app-section-visibility-toggle-open {
        display: none;
      }

      .app-child-groups-section:not(.is-open) .app-section-visibility-toggle-closed {
        display: inline;
      }

      .app-child-groups-section:not(.is-open) .app-child-groups-header-actions .app-segmented-control {
        display: none;
      }

      .app-section-title-button {
        border: 0;
        background: transparent;
        padding: 0;
        cursor: pointer;
      }

      .app-section-title-button:hover .app-section-title,
      .app-section-title-button:focus-visible .app-section-title {
        color: var(--app-accent);
      }

      .app-section-edit-button {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-tertiary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .app-section-edit-button:hover,
      .app-section-edit-button:focus-visible {
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-empty-state {
        border-radius: 24px;
        border: 1px dashed var(--app-border-strong);
        background: color-mix(in srgb, var(--app-surface-solid) 72%, transparent);
        color: var(--app-text);
        padding: 2.85rem 2rem;
        text-align: center;
      }

      .app-empty-state--plain {
        border: 0;
        background: transparent;
      }

      .app-empty-icon {
        width: 4rem;
        height: 4rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-solid);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-text-tertiary);
        margin-bottom: 1rem;
      }

      .app-empty-state-title {
        color: var(--app-text);
        font-size: 1.05rem;
        font-weight: 750;
        letter-spacing: 0;
        line-height: 1.25;
      }

      .app-empty-state-copy {
        color: var(--app-text-secondary);
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .app-note-card {
        overflow: hidden;
      }

      .app-note-card-body {
        position: relative;
        padding: 0.85rem 0.95rem 0.82rem;
        gap: 0;
      }

      .app-note-card-body--with-floating-actions .app-note-inline-edit {
        padding-right: 2.85rem;
      }

      .app-note-card-body--with-top-disclosure {
        --app-top-disclosure-space: 2.7rem;
      }

      .app-note-card-body--with-top-disclosure > .app-note-header,
      .app-note-card-body--with-top-disclosure > .app-note-inline-edit > .app-note-content,
      .app-note-card-body--with-top-disclosure > .app-note-inline-edit > [data-inline-edit-target="display"] {
        padding-right: var(--app-top-disclosure-space);
      }

      .app-note-floating-actions {
        position: absolute;
        top: 0.72rem;
        right: 0.72rem;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
      }

      .app-note-header {
        margin-bottom: 0.55rem;
      }

      .app-note-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.34rem 0.5rem;
        min-width: 0;
      }

      .app-note-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.72rem;
        font-weight: 700;
        padding: 0.32rem 0.66rem;
        cursor: pointer;
      }

      .app-note-chip--subject {
        color: var(--app-accent);
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 16%, transparent);
      }

      .app-criterion-page-header {
        margin-bottom: 1.1rem;
      }

      .app-criterion-breadcrumbs {
        flex-wrap: wrap;
        color: var(--app-text-secondary);
      }

      .app-criterion-breadcrumbs .app-note-chip {
        max-width: min(24rem, 72vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-criterion-breadcrumb-separator {
        color: var(--app-text-tertiary);
        font-size: 0.9rem;
        font-weight: 750;
      }

      .app-criterion-context-chip {
        cursor: default;
      }

      .app-criterion-page-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.34rem 0.55rem;
        margin-top: 0.95rem;
        color: var(--app-text-secondary);
        font-size: clamp(1.02rem, 1.35vw, 1.22rem);
        font-weight: 760;
        letter-spacing: 0;
        line-height: 1.25;
      }

      .app-criterion-page-summary .app-note-time {
        font-size: inherit;
        font-weight: inherit;
      }

      .app-page-summary-dot {
        color: var(--app-text-tertiary);
      }

      .app-criterion-comment-composer {
        border-top: 1px solid var(--app-border);
        margin: 0 0 1.9rem;
        padding-top: 1.2rem;
      }

      .app-search-toolbar {
        margin-bottom: 1.6rem;
      }

      .app-search-toolbar--groups {
        margin-bottom: 0.8rem;
      }

      .app-search-toolbar--status-browser {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 0.8rem;
        row-gap: 0.16rem;
        margin-bottom: 1.15rem;
      }

      .app-search-toolbar--status-browser .app-group-filter-form {
        display: contents;
      }

      .app-search-toolbar--status-browser .app-group-filter-search-row {
        grid-column: 1 / -1;
        min-width: 0;
      }

      .app-search-toolbar--status-browser .app-status-browser-status-filter-fieldset {
        grid-column: 1;
        grid-row: 2;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin-top: 0.68rem;
      }

      .app-status-browser-content-filter-form--toolbar {
        grid-column: 1;
        grid-row: 3;
        width: fit-content;
        max-width: 100%;
        min-width: 0;
        margin-top: 0;
      }

      .app-search-toolbar--status-browser .app-status-browser-filter-row {
        grid-column: 2;
        grid-row: 2 / span 2;
        align-self: center;
        justify-self: end;
        min-width: 0;
        width: max-content;
        max-width: 100%;
        margin-top: 0.16rem;
      }

      .app-page-status-filter-row {
        margin: 0.2rem 0 0.95rem;
      }

      .app-page-status-filter-form {
        display: block;
      }

      .app-search-form {
        display: flex;
        align-items: center;
        gap: 0.85rem;
      }

      .app-search-input-wrap {
        position: relative;
        flex: 1 1 auto;
        min-width: 0;
      }

      .app-search-input-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        width: 1rem;
        height: 1rem;
        color: var(--app-text-tertiary);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .app-search-input {
        width: 100%;
        min-height: 2.5rem;
        padding: 0.56rem 1rem 0.56rem 2.45rem;
        border: 1px solid var(--app-border) !important;
        border-radius: 16px;
        background: var(--app-surface-secondary) !important;
        color: var(--app-text);
        font-size: 0.9rem;
        line-height: 1.35;
        box-shadow: none;
      }

      .app-search-input:focus {
        outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
        outline-offset: 1px;
        border-color: var(--app-border) !important;
        box-shadow: none;
      }

      .app-search-input::placeholder {
        color: var(--app-text-tertiary);
      }

      .app-group-filter-form {
        display: block;
      }

      .app-group-filter-panel {
        padding: 0.72rem 0.8rem 0.76rem;
        border-radius: 20px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface) 96%, white 4%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .app-group-filter-search-row {
        display: flex;
        align-items: stretch;
        gap: 0.65rem;
      }

      .app-group-filter-reset {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.5rem;
        padding-inline: 0.95rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
      }

      .app-group-filter-reset:hover,
      .app-group-filter-reset:focus-visible {
        color: var(--app-text);
        border-color: color-mix(in srgb, var(--app-border-strong) 82%, transparent);
        background: color-mix(in srgb, var(--app-surface-secondary) 80%, white 20%);
      }

      .app-group-filter-groups {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        margin-top: 0.8rem;
      }

      .app-group-filter-group {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .app-status-browser-filter-row {
        margin-top: 0;
      }

      .app-page-sort-row,
      .app-status-browser-sort-row {
        display: flex;
        align-items: center;
        margin-top: 0;
      }

      .app-page-sort-form {
        display: inline-flex;
        align-items: center;
        margin: 0;
      }

      .app-page-sort-control,
      .app-status-browser-sort-control {
        position: relative;
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--app-radius-control);
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 88%, var(--app-surface-secondary));
        color: var(--app-text-secondary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
      }

      .app-page-sort-label,
      .app-status-browser-sort-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .app-page-sort-icon,
      .app-status-browser-sort-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
      }

      .app-page-sort-icon svg,
      .app-status-browser-sort-icon svg {
        width: 100%;
        height: 100%;
      }

      .app-page-sort-control.is-loading .app-page-sort-icon,
      .app-status-browser-sort-control.is-loading .app-page-sort-icon {
        opacity: 0;
      }

      .app-page-sort-control.is-loading::after,
      .app-status-browser-sort-control.is-loading::after {
        content: "";
        position: absolute;
        width: 1.15rem;
        height: 1.15rem;
        border-radius: 999px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        animation: app-control-spinner 0.7s linear infinite;
      }

      @keyframes app-control-spinner {
        to {
          transform: rotate(360deg);
        }
      }

      .app-page-sort-select,
      .app-status-browser-sort-select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        cursor: pointer;
      }

      .app-page-sort-control:hover,
      .app-page-sort-control:focus-within,
      .app-status-browser-sort-control:hover,
      .app-status-browser-sort-control:focus-within {
        outline: none;
        border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
        box-shadow: var(--app-focus-ring);
      }

      .app-status-browser-icon-control.is-active {
        color: var(--app-accent);
        border-color: color-mix(in srgb, var(--app-accent) 28%, transparent);
        background: var(--app-accent-soft);
      }

      .app-status-browser-control-badge {
        position: absolute;
        right: -0.28rem;
        top: -0.28rem;
        min-width: 1rem;
        height: 1rem;
        padding-inline: 0.2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--app-surface-solid);
        background: var(--app-accent);
        color: var(--app-accent-contrast);
        font-size: 0.62rem;
        font-weight: 800;
        line-height: 1;
      }

      .app-status-browser-filter-group {
        gap: 0;
      }

      .app-status-browser-group-filter-inline {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        width: max-content;
        max-width: 100%;
      }

      .app-status-browser-filter-label-row {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
      }

      .app-status-browser-area-controls {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .app-status-browser-area-select {
        min-width: min(100%, 15.5rem);
        min-height: var(--app-pill-compact-min-height);
        padding: 0.46rem 2.25rem 0.46rem 0.9rem;
        border-radius: 999px;
        border-color: var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text);
        font-size: 0.84rem;
        font-weight: 600;
        line-height: 1.2;
      }

      .app-status-browser-area-select:focus-visible {
        outline: none;
        border-color: color-mix(in srgb, var(--app-accent) 24%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 16%, transparent);
      }

      .app-status-browser-group-filter-button {
        width: auto;
        max-width: 100%;
        min-height: 1.32rem;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.28rem;
        padding: 0.04rem 0.08rem;
        border: 0;
        border-radius: 0.35rem;
        background: transparent;
        color: var(--app-text-secondary);
        text-align: left;
        box-shadow: none;
        white-space: nowrap;
        transition: color 0.18s ease, background-color 0.18s ease;
      }

      .app-status-browser-group-filter-button:hover,
      .app-status-browser-group-filter-button:focus-visible {
        background: color-mix(in srgb, var(--app-accent) 8%, transparent);
        color: var(--app-text);
        box-shadow: none;
      }

      .app-status-browser-group-filter-button:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--app-accent) 28%, transparent);
        outline-offset: 2px;
      }

      .app-status-browser-group-filter-button.is-active {
        width: auto;
        max-width: 100%;
        min-height: 1.32rem;
        justify-content: flex-start;
        gap: 0.28rem;
        padding: 0.04rem 0.08rem;
        border: 0;
        border-radius: 0.35rem;
        background: transparent;
        color: var(--app-text-secondary);
      }

      .app-status-browser-group-filter-icon {
        width: 0.84rem;
        height: 0.84rem;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        background: transparent;
        color: var(--app-accent);
      }

      .app-status-browser-group-filter-icon svg,
      .app-status-browser-group-filter-search-icon svg,
      .app-status-browser-group-filter-check svg {
        width: 0.84rem;
        height: 0.84rem;
      }

      .app-status-browser-group-filter-copy {
        position: static;
        width: auto;
        height: auto;
        min-width: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        clip: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        white-space: nowrap;
        border: 0;
      }

      .app-status-browser-group-filter-button.is-active .app-status-browser-group-filter-copy {
        position: static;
        width: auto;
        height: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        white-space: nowrap;
        border: 0;
      }

      .app-status-browser-group-filter-kicker {
        color: var(--app-text-secondary);
        font-size: 0.78rem;
        font-weight: 720;
        line-height: 1.2;
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
        text-transform: none;
      }

      .app-status-browser-group-filter-button.is-active .app-status-browser-group-filter-kicker {
        color: var(--app-accent);
        font-size: 0.78rem;
        font-weight: 720;
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        text-decoration-thickness: 1.5px;
        text-transform: none;
      }

      .app-status-browser-group-filter-value {
        color: var(--app-text);
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 5.25rem;
      }

      .app-status-browser-group-filter-button.is-active .app-status-browser-group-filter-value {
        min-width: 0;
        max-width: 5.25rem;
        color: var(--app-text);
        font-size: 0.78rem;
        font-weight: 700;
      }

      .app-status-browser-group-filter-button.is-active .app-status-browser-control-badge {
        position: static;
        min-width: 1.08rem;
        height: 1.08rem;
        margin-left: 0.04rem;
        padding-inline: 0.27rem;
        border: 0;
        background: color-mix(in srgb, var(--app-accent) 18%, transparent);
        color: var(--app-accent);
        font-size: 0.62rem;
      }

      .app-status-browser-group-filter-dialog {
        width: min(90rem, calc(100vw - 1rem));
        height: min(44rem, calc(100vh - 1.25rem));
        height: min(44rem, calc(100dvh - 1.25rem));
        max-height: min(44rem, calc(100vh - 1.25rem));
        max-height: min(44rem, calc(100dvh - 1.25rem));
        display: flex;
        flex-direction: column;
        background: var(--app-surface-solid) !important;
      }

      .app-status-browser-group-filter-header {
        align-items: flex-start;
        padding: 0.9rem 1rem 0;
      }

      .app-status-browser-group-filter-modal .app-modal-body {
        padding: 0.75rem 1rem 0.9rem;
      }

      .app-status-browser-group-filter-modal .app-modal-footer {
        padding: 0.75rem 1rem 1rem;
      }

      .app-status-browser-group-filter-subtitle {
        margin-top: 0.18rem;
        color: var(--app-text-secondary);
        font-size: 0.84rem;
        line-height: 1.35;
      }

      .app-status-browser-group-filter-body {
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.58rem;
        overflow-y: auto;
        overscroll-behavior: contain;
      }

      .app-status-browser-group-filter-search {
        position: relative;
      }

      .app-status-browser-group-filter-search-icon {
        position: absolute;
        left: 0.9rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--app-text-tertiary);
        pointer-events: none;
      }

      .app-status-browser-group-filter-search-input {
        width: 100%;
        min-height: 2.8rem;
        padding: 0.62rem 0.9rem 0.62rem 2.55rem;
        border-radius: var(--app-radius-control);
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface) 72%, var(--app-surface-secondary));
        color: var(--app-text);
        font-size: 0.92rem;
        font-weight: 600;
      }

      .app-status-browser-group-filter-search-input::placeholder {
        color: var(--app-text-tertiary);
      }

      .app-status-browser-group-filter-search-input:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
        box-shadow: var(--app-focus-ring);
      }

      .app-status-browser-group-filter-mode {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0.25rem;
        border-radius: var(--app-radius-control);
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-status-browser-group-filter-mode-option {
        position: relative;
        min-width: 0;
      }

      .app-status-browser-group-filter-mode-option input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

      .app-status-browser-group-filter-mode-option span {
        min-height: 2.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: 0.65rem;
        border-radius: calc(var(--app-radius-control) - 0.25rem);
        color: var(--app-text-secondary);
        font-size: 0.82rem;
        font-weight: 760;
        line-height: 1.1;
        text-align: center;
      }

      .app-status-browser-group-filter-mode-option input:checked + span {
        background: var(--app-surface-solid);
        color: var(--app-text);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 18px color-mix(in srgb, black 10%, transparent);
      }

      .app-status-browser-group-filter-selected {
        display: grid;
        gap: 0.5rem;
        padding: 0.1rem 0 0.2rem;
      }

      .app-status-browser-group-filter-selected-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        color: var(--app-text-tertiary);
        font-size: 0.72rem;
        font-weight: 760;
        line-height: 1.2;
      }

      .app-status-browser-group-filter-selected-list {
        min-height: 1.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .app-status-browser-group-filter-selected-chip {
        max-width: 100%;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
        min-height: 1.85rem;
        padding: 0.24rem 0.28rem 0.24rem 0.62rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-solid) 78%, var(--app-surface-secondary));
        color: var(--app-text);
        font-size: 0.74rem;
        font-weight: 760;
        line-height: 1.15;
      }

      .app-status-browser-group-filter-selected-chip--include {
        border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
        background: color-mix(in srgb, var(--app-accent-soft) 54%, var(--app-surface-solid));
      }

      .app-status-browser-group-filter-selected-chip--exclude {
        border-color: color-mix(in srgb, #fb7185 42%, var(--app-border));
        background: color-mix(in srgb, #7f1d1d 24%, var(--app-surface-solid));
      }

      .app-status-browser-group-filter-selected-chip-scope {
        color: var(--app-accent);
        font-size: 0.62rem;
        font-weight: 850;
        line-height: 1;
        text-transform: lowercase;
      }

      .app-status-browser-group-filter-selected-chip--exclude .app-status-browser-group-filter-selected-chip-scope {
        color: #fca5a5;
      }

      .app-status-browser-group-filter-selected-chip-label {
        min-width: 0;
        max-width: min(18rem, 62vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-status-browser-group-filter-selected-remove {
        width: 1.18rem;
        height: 1.18rem;
        min-width: 1.18rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-tertiary);
        font-size: 1rem;
        font-weight: 760;
        line-height: 1;
      }

      .app-status-browser-group-filter-selected-remove:hover,
      .app-status-browser-group-filter-selected-remove:focus-visible {
        outline: none;
        background: color-mix(in srgb, var(--app-surface-secondary) 88%, transparent);
        color: var(--app-text);
      }

      .app-status-browser-group-filter-list {
        min-height: 0;
        max-height: none;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.38rem;
        overflow-y: auto;
        padding-right: 0.2rem;
      }

      .app-status-browser-group-filter-option {
        position: relative;
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 0.72rem;
        min-height: 3.35rem;
        padding: 0.54rem 0.72rem;
        border-radius: var(--app-radius-control);
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface) 74%, var(--app-surface-secondary));
        color: var(--app-text);
        cursor: pointer;
        transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
      }

      .app-status-browser-group-filter-option:hover,
      .app-status-browser-group-filter-option:focus-within {
        border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-border));
        background: color-mix(in srgb, var(--app-surface-solid) 82%, var(--app-accent-soft));
      }

      .app-status-browser-group-filter-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-border));
        background: color-mix(in srgb, var(--app-accent-soft) 66%, var(--app-surface-solid));
      }

      .app-status-browser-group-filter-option.is-excluded {
        border-color: color-mix(in srgb, #fb7185 42%, var(--app-border));
        background: color-mix(in srgb, #7f1d1d 22%, var(--app-surface-solid));
      }

      .app-status-browser-group-filter-section {
        display: grid;
        gap: 0.28rem;
        padding: 0.28rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 82%, transparent);
        border-radius: calc(var(--app-radius-control) + 4px);
        background: color-mix(in srgb, var(--app-surface-solid) 42%, transparent);
      }

      .app-status-browser-group-filter-branch {
        display: grid;
        gap: 0.28rem;
        min-width: 0;
      }

      .app-status-browser-group-filter-section-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.32rem;
      }

      .app-status-browser-group-filter-section-row .app-status-browser-group-filter-option {
        border-color: transparent;
        background: transparent;
      }

      .app-status-browser-group-filter-section-row .app-status-browser-group-filter-option:hover,
      .app-status-browser-group-filter-section-row .app-status-browser-group-filter-option:focus-within {
        background: color-mix(in srgb, var(--app-surface-solid) 70%, var(--app-accent-soft));
      }

      .app-status-browser-group-filter-section-row .app-status-browser-group-filter-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 34%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 54%, transparent);
      }

      .app-status-browser-group-filter-section-row .app-status-browser-group-filter-option.is-excluded {
        border-color: color-mix(in srgb, #fb7185 38%, transparent);
        background: color-mix(in srgb, #7f1d1d 19%, transparent);
      }

      .app-status-browser-group-filter-section-toggle {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        align-self: center;
      }

      .app-status-browser-group-filter-children,
      .app-status-browser-group-filter-overflow-panel {
        display: flex;
        flex-direction: column;
        gap: 0.38rem;
      }

      .app-status-browser-group-filter-children {
        margin: 0.06rem 0 0.12rem 0.9rem;
        padding-left: 0.6rem;
        border-left: 1.5px solid color-mix(in srgb, var(--app-border) 72%, transparent);
      }

      .app-status-browser-group-filter-children--nested {
        margin-left: 0.95rem;
      }

      .app-status-browser-group-filter-children .app-status-browser-group-filter-option,
      .app-status-browser-group-filter-overflow-panel .app-status-browser-group-filter-option {
        min-height: 3rem;
        padding-inline: 0.54rem;
        border-color: transparent;
        background: transparent;
      }

      .app-status-browser-group-filter-children .app-status-browser-group-filter-option:hover,
      .app-status-browser-group-filter-children .app-status-browser-group-filter-option:focus-within,
      .app-status-browser-group-filter-overflow-panel .app-status-browser-group-filter-option:hover,
      .app-status-browser-group-filter-overflow-panel .app-status-browser-group-filter-option:focus-within {
        background: color-mix(in srgb, var(--app-surface-solid) 72%, var(--app-accent-soft));
      }

      .app-status-browser-group-filter-children .app-status-browser-group-filter-option.is-selected,
      .app-status-browser-group-filter-overflow-panel .app-status-browser-group-filter-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 32%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 50%, transparent);
      }

      .app-status-browser-group-filter-children .app-status-browser-group-filter-option.is-excluded,
      .app-status-browser-group-filter-overflow-panel .app-status-browser-group-filter-option.is-excluded {
        border-color: color-mix(in srgb, #fb7185 34%, transparent);
        background: color-mix(in srgb, #7f1d1d 18%, transparent);
      }

      .app-status-browser-group-filter-checkbox {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
      }

      .app-status-browser-group-filter-check {
        width: 1.25rem;
        height: 1.25rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.42rem;
        border: 1.5px solid var(--app-border-strong);
        color: transparent;
        background: var(--app-surface-solid);
      }

      .app-status-browser-group-filter-option.is-selected .app-status-browser-group-filter-check {
        border-color: color-mix(in srgb, var(--app-accent) 72%, white 8%);
        background: var(--app-accent);
        color: white;
      }

      .app-status-browser-group-filter-option.is-excluded .app-status-browser-group-filter-check {
        border-color: color-mix(in srgb, #fca5a5 72%, white 8%);
        background: #ef4444;
        color: white;
      }

      .app-status-browser-group-filter-option-icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1rem;
      }

      .app-status-browser-group-filter-option-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.12rem;
      }

      .app-status-browser-group-filter-option-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.92rem;
        font-weight: 720;
        line-height: 1.2;
      }

      .app-status-browser-group-filter-option-meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--app-text-tertiary);
        font-size: 0.74rem;
        font-weight: 620;
      }

      .app-status-browser-group-filter-empty {
        margin: 0;
        padding: 1.5rem 0.5rem;
        text-align: center;
      }

      .app-status-browser-group-filter-footer {
        flex: 0 0 auto;
        justify-content: space-between;
        padding-top: 0.9rem;
        border-top: 1px solid color-mix(in srgb, var(--app-border) 74%, transparent);
        background: var(--app-surface-solid);
        box-shadow: 0 -18px 34px color-mix(in srgb, var(--app-bg) 46%, transparent);
      }

      .app-status-browser-group-filter-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
      }

      .app-group-filter-group-label {
        color: var(--app-text-secondary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .app-group-filter-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
      }

      .app-group-filter-chip {
        position: relative;
        display: inline-flex;
      }

      .app-group-filter-checkbox {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
      }

      .app-group-filter-chip-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--app-pill-compact-min-height);
        padding: var(--app-pill-compact-padding-block) var(--app-pill-compact-padding-inline);
        border-radius: var(--app-pill-compact-radius);
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: var(--app-pill-compact-font-size);
        font-weight: var(--app-pill-compact-font-weight);
        line-height: 1;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
      }

      .app-group-filter-checkbox:checked + .app-group-filter-chip-label {
        color: var(--app-accent);
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
      }

      .app-group-filter-checkbox:focus-visible + .app-group-filter-chip-label {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent);
      }

      .app-status-browser-negation-chip .app-group-filter-chip-label {
        min-width: 7.25rem;
      }

      .app-status-browser-negation-chip .app-group-filter-checkbox:disabled + .app-group-filter-chip-label {
        opacity: 0.48;
        color: var(--app-text-tertiary);
        cursor: default;
      }

      .app-group-filter-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        margin-top: 0.1rem;
        margin-bottom: 0.55rem;
        color: var(--app-text-secondary);
        font-size: 0.8rem;
      }

      .app-status-browser-content-filter-form,
      .app-status-browser-content-filter-fieldset,
      .app-status-browser-status-filter-fieldset {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .app-status-browser-content-filter-form {
        flex: 1 1 auto;
      }

      .app-status-browser-status-filter-fieldset {
        margin-top: 1.05rem;
      }

      .app-status-browser-content-filter-list,
      .app-status-browser-status-filter-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.74rem 0.84rem;
        min-width: 0;
      }

      .app-status-browser-status-filter-list {
        align-items: flex-start;
      }

      .app-status-browser-content-filter-chip {
        position: relative;
        display: inline-flex;
        min-width: 0;
      }

      .app-status-browser-content-filter-checkbox {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
      }

      .app-status-browser-content-filter-checkbox:disabled {
        cursor: not-allowed;
      }

      .app-status-browser-content-filter-label {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        min-width: 0;
        min-height: 2rem;
        padding: 0.38rem 0.72rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: color-mix(in srgb, var(--app-surface-secondary) 72%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.84rem;
        font-weight: 720;
        line-height: 1;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
      }

      .app-status-browser-content-filter-check {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 0.88rem;
        height: 0.88rem;
        border-radius: 0.28rem;
        border: 1.5px solid color-mix(in srgb, var(--app-text-tertiary) 78%, transparent);
        background: color-mix(in srgb, var(--app-surface) 70%, transparent);
      }

      .app-status-browser-content-filter-check::after {
        content: "";
        width: 0.36rem;
        height: 0.2rem;
        border-left: 1.8px solid transparent;
        border-bottom: 1.8px solid transparent;
        transform: rotate(-45deg) translate(0.02rem, -0.02rem);
      }

      .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label {
        color: var(--app-accent);
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent);
      }

      .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label .app-status-browser-content-filter-check {
        border-color: color-mix(in srgb, var(--app-accent) 76%, transparent);
        background: color-mix(in srgb, var(--app-accent) 22%, transparent);
      }

      .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label .app-status-browser-content-filter-check::after {
        border-color: currentColor;
      }

      .app-status-browser-content-filter-checkbox:focus-visible + .app-status-browser-content-filter-label {
        border-color: color-mix(in srgb, var(--app-accent) 28%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-accent) 16%, transparent);
      }

      .app-status-browser-content-filter-checkbox:hover + .app-status-browser-content-filter-label {
        border-color: color-mix(in srgb, var(--app-accent) 20%, transparent);
        color: var(--app-text);
      }

      .app-status-browser-content-filter-checkbox:disabled + .app-status-browser-content-filter-label {
        opacity: 0.48;
        color: var(--app-text-tertiary);
        background: color-mix(in srgb, var(--app-surface-secondary) 50%, transparent);
        border-color: color-mix(in srgb, var(--app-border) 72%, transparent);
      }

      .app-status-browser-content-filter-checkbox:disabled:hover + .app-status-browser-content-filter-label {
        color: var(--app-text-tertiary);
        border-color: color-mix(in srgb, var(--app-border) 72%, transparent);
      }

      .app-page-status-filter-row .app-status-browser-status-filter-list,
      .app-search-toolbar--status-browser .app-status-browser-status-filter-list,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list,
      .app-group-filter-footer .app-status-browser-content-filter-list {
        align-items: baseline;
        gap: 0;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-chip,
      .app-search-toolbar--status-browser .app-status-browser-status-filter-chip,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-chip,
      .app-group-filter-footer .app-status-browser-content-filter-chip {
        align-items: baseline;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-chip + .app-status-browser-content-filter-chip::before,
      .app-search-toolbar--status-browser .app-status-browser-status-filter-chip + .app-status-browser-status-filter-chip::before,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-chip + .app-status-browser-content-filter-chip::before,
      .app-group-filter-footer .app-status-browser-content-filter-chip + .app-status-browser-content-filter-chip::before {
        content: "•";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 0.46rem;
        color: color-mix(in srgb, var(--app-text-tertiary) 82%, transparent);
        font-size: 0.8rem;
        line-height: 1;
        pointer-events: none;
      }

      .app-search-toolbar--status-browser .app-status-browser-status-filter-list,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list {
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 0.08rem;
        scrollbar-width: none;
      }

      .app-search-toolbar--status-browser .app-status-browser-status-filter-list::-webkit-scrollbar,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list::-webkit-scrollbar {
        display: none;
      }

      .app-search-toolbar--status-browser .app-status-browser-status-filter-chip,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-chip {
        flex: 0 0 auto;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-label,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-label {
        min-height: 1.4rem;
        padding: 0.08rem 0;
        border: 0;
        border-radius: 0.28rem;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.82rem;
        font-weight: 680;
        line-height: 1.2;
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.22em;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-check,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-check,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-check,
      .app-group-filter-footer .app-status-browser-content-filter-check {
        display: none;
      }

      .app-search-toolbar--status-browser .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label {
        background: transparent;
        color: var(--app-text-secondary);
        text-decoration-style: dotted;
        text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
        text-decoration-thickness: 1px;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-checkbox:checked + .app-status-browser-content-filter-label,
      .app-page-status-filter-row .app-status-browser-content-filter-label.is-selected,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-label.is-selected,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-label.is-selected,
      .app-group-filter-footer .app-status-browser-content-filter-label.is-selected {
        background: transparent;
        color: var(--app-accent);
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        text-decoration-thickness: 1.6px;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-checkbox:hover + .app-status-browser-content-filter-label,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-checkbox:hover + .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-checkbox:hover + .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-checkbox:hover + .app-status-browser-content-filter-label {
        background: color-mix(in srgb, var(--app-accent) 8%, transparent);
        color: var(--app-text);
      }

      .app-page-status-filter-row .app-status-browser-content-filter-checkbox:focus-visible + .app-status-browser-content-filter-label,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-checkbox:focus-visible + .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-checkbox:focus-visible + .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-checkbox:focus-visible + .app-status-browser-content-filter-label {
        background: color-mix(in srgb, var(--app-accent) 10%, transparent);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-accent) 20%, transparent);
      }

      .app-page-status-filter-row .app-status-browser-content-filter-checkbox:disabled + .app-status-browser-content-filter-label,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-checkbox:disabled + .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-checkbox:disabled + .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-checkbox:disabled + .app-status-browser-content-filter-label {
        background: transparent;
        color: var(--app-text-tertiary);
        opacity: 0.5;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-checkbox:disabled:hover + .app-status-browser-content-filter-label,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-checkbox:disabled:hover + .app-status-browser-content-filter-label,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-checkbox:disabled:hover + .app-status-browser-content-filter-label,
      .app-group-filter-footer .app-status-browser-content-filter-checkbox:disabled:hover + .app-status-browser-content-filter-label {
        background: transparent;
        color: var(--app-text-tertiary);
      }

      .app-page-status-filter-row .app-status-browser-content-filter-label--static,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-label--static,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-label--static,
      .app-group-filter-footer .app-status-browser-content-filter-label--static {
        background: transparent;
        color: var(--app-text-secondary);
        cursor: default;
        pointer-events: none;
        text-decoration-line: none;
      }

      .app-page-status-filter-row .app-status-browser-content-filter-label--static.app-status-browser-content-filter-label--disabled,
      .app-search-toolbar--status-browser .app-status-browser-content-filter-label--static.app-status-browser-content-filter-label--disabled,
      .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-label--static.app-status-browser-content-filter-label--disabled,
      .app-group-filter-footer .app-status-browser-content-filter-label--static.app-status-browser-content-filter-label--disabled {
        color: var(--app-text-tertiary);
        opacity: 0.5;
      }

      .app-group-filter-results strong {
        color: var(--app-text);
        font-weight: 700;
      }

      .app-group-summary-nav {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.16rem;
        min-width: 0;
        flex: 1 1 auto;
      }

      .app-group-summary-cluster {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.16rem;
        min-width: 0;
        flex: 1 1 auto;
      }

      .app-group-summary-cluster .app-group-summary-nav {
        flex: 0 1 auto;
      }

      .app-group-summary-separator {
        flex: 0 0 auto;
        color: color-mix(in srgb, var(--app-text-tertiary) 82%, transparent);
        line-height: 1;
        padding: 0 0.16rem;
      }

      .app-group-summary-link {
        display: inline-flex;
        align-items: center;
        padding: 0;
        color: var(--app-accent);
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.01em;
        text-decoration-line: underline;
        text-decoration-style: dotted;
        text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
        text-underline-offset: 0.18em;
        text-decoration-thickness: 1.5px;
      }

      .app-group-summary-button {
        border: 0;
        background: none;
        cursor: pointer;
        font: inherit;
      }

      .app-group-summary-link:hover,
      .app-group-summary-link:focus-visible {
        color: color-mix(in srgb, var(--app-accent) 78%, white 22%);
      }

      .app-group-summary-link.is-active {
        color: var(--app-text);
        text-decoration-style: solid;
        text-decoration-color: currentColor;
      }

      .app-group-summary-link.is-active:hover,
      .app-group-summary-link.is-active:focus-visible {
        color: var(--app-text);
      }

      .app-group-rankings-disclosure.is-open .app-group-summary-link--rankings {
        color: var(--app-text);
        text-decoration: underline;
      }

      .app-group-rankings-disclosure.is-open .app-group-summary-link--rankings:hover,
      .app-group-rankings-disclosure.is-open .app-group-summary-link--rankings:focus-visible {
        color: var(--app-text);
      }

      .app-group-summary-text {
        display: inline-flex;
        align-items: center;
        padding: 0;
        color: var(--app-text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.01em;
      }

      .app-page-summary-actions {
        display: none;
      }

      .app-search-filter-button {
        min-height: 3rem;
        padding: 0.7rem 1rem;
        border-radius: 16px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.92rem;
        font-weight: 600;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .app-search-filter-button:hover {
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-search-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.8rem;
        margin-top: 0.8rem;
        color: var(--app-text-secondary);
        font-size: 0.82rem;
      }

      .app-search-reset {
        color: var(--app-accent);
        font-weight: 600;
      }

      @media (max-width: 760px) {
        .app-search-toolbar--status-browser {
          grid-template-columns: minmax(0, 1fr);
          row-gap: 0.16rem;
        }

        .app-search-toolbar--status-browser .app-group-filter-search-row,
        .app-search-toolbar--status-browser .app-status-browser-status-filter-fieldset,
        .app-status-browser-content-filter-form--toolbar,
        .app-search-toolbar--status-browser .app-status-browser-filter-row {
          grid-column: 1;
        }

        .app-search-toolbar--status-browser .app-group-filter-search-row {
          grid-row: 1;
        }

        .app-search-toolbar--status-browser .app-status-browser-status-filter-fieldset {
          grid-row: 2;
          margin-top: 0.58rem;
        }

        .app-status-browser-content-filter-form--toolbar {
          grid-row: 3;
          width: fit-content;
        }

        .app-search-toolbar--status-browser .app-status-browser-filter-row {
          grid-row: 4;
          align-self: center;
          justify-self: start;
          margin-top: 0.08rem;
        }

        .app-group-filter-search-row {
          flex-direction: column;
        }

        .app-group-filter-groups {
          grid-template-columns: 1fr;
        }

        .app-group-filter-footer {
          flex-wrap: wrap;
          align-items: center;
        }

        .app-status-browser-area-controls {
          flex-direction: column;
          align-items: stretch;
        }

        .app-status-browser-area-select {
          width: 100%;
          min-width: 0;
        }

        .app-status-browser-group-filter-dialog {
          width: 100%;
        }

        .app-status-browser-group-filter-footer {
          align-items: center;
          gap: 0.75rem;
        }

        .app-status-browser-group-filter-actions {
          flex: 0 0 auto;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          margin-left: auto;
        }
      }

      @media (max-width: 360px) {
        .app-search-toolbar--status-browser {
          grid-template-columns: minmax(0, 1fr);
        }

        .app-search-toolbar--status-browser .app-status-browser-filter-row {
          grid-column: 1;
          grid-row: 4;
          justify-self: start;
          margin-top: 0.12rem;
        }
      }

      .app-filter-checklist {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.45rem;
        min-height: 13rem;
        overflow-y: auto;
        padding-right: 0.15rem;
      }

      .app-filter-modal-box {
        width: min(100%, 34rem);
        height: min(35rem, calc(100vh - 3rem));
        display: flex;
        flex-direction: column;
      }

      .app-filter-modal-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
      }

      .app-filter-modal-body {
        flex: 1 1 auto;
        min-height: 0;
      }

      .app-filter-modal-tag-field {
        flex: 1 1 auto;
        min-height: 0;
      }

      .app-filter-option {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.5rem 0.1rem;
        color: var(--app-text);
        font-size: 0.92rem;
      }

      .app-flash-stack {
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 100;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        pointer-events: none;
      }

      .app-flash-stack .alert {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .app-note-time {
        color: var(--app-text-tertiary);
        font-size: 0.74rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
        line-height: 1.2;
        cursor: pointer;
      }

      .app-note-time:hover,
      .app-note-time:focus-visible {
        color: var(--app-text-secondary);
      }

      .app-note-inline-edit {
        width: 100%;
      }

      .app-note-content {
        color: color-mix(in srgb, var(--app-text) 90%, transparent);
        padding-right: 0;
        font-size: 0.98rem;
        line-height: 1.55;
      }

      .app-note-content--linked {
        display: block;
        color: color-mix(in srgb, var(--app-text) 90%, transparent);
        cursor: pointer;
        text-decoration: none;
      }

      .app-note-content--linked:hover,
      .app-note-content--linked:focus-visible {
        color: var(--app-text);
        text-decoration: none;
      }

      .app-note-content > :first-child {
        margin-top: 0;
      }

      .app-note-content > :last-child {
        margin-bottom: 0;
      }

      .app-feed-undo-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        box-sizing: border-box;
        height: var(--app-feed-undo-height, auto);
        margin: 0.3rem 0 0.8rem;
        padding: 0.8rem 0.95rem;
        border-radius: 18px;
        border: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent);
        background: color-mix(in srgb, var(--app-surface-secondary) 92%, transparent);
      }

      .app-feed-undo-card.is-danger {
        border-color: color-mix(in srgb, var(--app-danger) 22%, transparent);
        background: color-mix(in srgb, var(--app-danger-soft) 72%, var(--app-surface-secondary));
      }

      .app-feed-undo-copy {
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
        min-width: 0;
      }

      .app-feed-undo-status {
        color: var(--app-text-tertiary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: -0.01em;
      }

      .app-feed-undo-name {
        color: var(--app-text-secondary);
        font-size: 0.96rem;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: line-through;
        text-decoration-thickness: 1.5px;
        text-decoration-color: color-mix(in srgb, currentColor 78%, transparent);
      }

      .app-feed-undo-form {
        display: inline-flex;
        margin: 0;
      }

      .app-feed-undo-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.3rem;
        padding: 0.52rem 0.95rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        color: var(--app-text);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
      }

      .app-feed-undo-button:hover,
      .app-feed-undo-button:focus-visible {
        background: color-mix(in srgb, var(--app-surface-solid) 94%, transparent);
      }

      .app-inline-edit-shell {
        margin-top: 0.75rem;
        border-radius: 20px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        padding: 1rem;
      }

      .app-inline-edit-shell trix-editor {
        background: var(--app-surface-solid) !important;
      }

      .app-note-edit-tag-field {
        flex: 0 1 auto;
        width: fit-content;
        max-width: 100%;
      }

      .app-note-edit-tag-field .app-tag-field-button {
        white-space: nowrap;
      }

      .app-note-footer {
        margin-top: 0.62rem;
        padding-top: 0.62rem;
        border-top: 1px solid var(--app-border);
      }

      .app-note-footer-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.8rem 1.2rem;
        flex-wrap: wrap;
      }

      .app-note-footer-bar--page-feed {
        flex-wrap: nowrap;
        align-items: center;
      }

      .app-note-footer-meta {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.42rem;
        flex: 0 0 auto;
        min-width: 0;
      }

      .app-note-footer-meta-actions {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        margin: 0;
      }

      .app-note-time--footer {
        display: inline-flex;
        align-items: center;
        align-self: center;
        min-height: 2rem;
        flex: 0 0 auto;
        white-space: nowrap;
      }

      .app-note-action-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.64rem 1.08rem;
        flex: 1 1 auto;
        min-width: 0;
      }

      .app-note-comment-disclosure {
        display: flex;
        flex-direction: column;
      }

      .app-note-inline-disclosure {
        display: contents;
      }

      .app-note-inline-disclosure-panel {
        flex: 1 1 100%;
        width: 100%;
        padding-top: 0.8rem;
        order: 999;
      }

      .app-rating-edit-panel {
        display: flex;
        justify-content: flex-start;
      }

      .app-note-comments-panel,
      .app-rating-comment-panel {
        display: block;
      }

      .app-note-rating-form,
      .app-rating-edit-form,
      .app-tag-rating-form {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        gap: 0.75rem;
      }

      .app-note-rating-slider {
        flex: 1 1 11rem;
        min-width: min(11rem, 100%);
      }

      .app-rating-edit-form,
      .app-rating-comment-form {
        align-items: stretch;
        flex-direction: column;
        width: min(100%, 30rem);
        gap: 0.8rem;
      }

      .app-rating-edit-form .app-rating-form-field,
      .app-rating-edit-form .app-rating-edit-slider,
      .app-rating-comment-form .app-rating-form-field {
        flex: 0 0 auto;
        min-width: 0;
      }

      .app-rating-form-field,
      .app-rating-edit-slider {
        flex: 1 1 14rem;
        min-width: min(14rem, 100%);
      }

      .app-rating-form-field--date {
        flex: 0 1 12rem;
      }

      .app-rating-form-field--subject {
        flex: 0 1 12rem;
      }

      .app-rating-form-field--remarks {
        flex: 1 1 100%;
      }

      .app-rating-remarks-input {
        min-height: 3.5rem;
        padding: 0.95rem 1rem;
        resize: none;
        line-height: 1.5;
      }

      .app-rating-date-input {
        min-width: 10rem;
      }

      .app-rating-subject-select {
        min-width: 10rem;
      }

      .app-rating-subject-chip {
        text-decoration: none;
      }

      .app-rating-subject-chip:hover {
        color: var(--app-text);
        border-color: color-mix(in srgb, var(--app-border) 92%, transparent);
        background: color-mix(in srgb, var(--app-surface-secondary) 92%, white 8%);
      }

      .app-rating-meta-text {
        color: var(--app-text);
        font-size: 0.88rem;
        font-weight: 600;
      }

      .app-rating-meta-text strong {
        font-weight: 800;
      }

      .app-rating-meta-status {
        color: var(--app-text-tertiary);
        font-weight: 600;
      }

      .app-rating-slider {
        display: flex;
        flex-direction: column;
        gap: 0.42rem;
        min-width: 0;
      }

      .app-rating-slider-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
      }

      .app-rating-slider-header--compact {
        justify-content: flex-end;
      }

      .app-rating-slider-label {
        font-size: 0.625rem;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--app-text-secondary);
      }

      .app-rating-slider-value {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        padding: 0.28rem 0.6rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-solid);
        color: var(--app-text);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
      }

      .app-rating-slider-input {
        width: 100%;
        margin: 0;
        accent-color: var(--app-accent);
        background: transparent;
      }

      .app-rating-slider-input::-webkit-slider-runnable-track {
        height: 0.38rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-border) 85%, transparent);
      }

      .app-rating-slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1rem;
        height: 1rem;
        margin-top: -0.31rem;
        border-radius: 999px;
        border: 2px solid var(--app-surface);
        background: var(--app-accent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 40%, transparent);
      }

      .app-rating-slider-input::-moz-range-track {
        height: 0.38rem;
        border: 0;
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-border) 85%, transparent);
      }

      .app-rating-slider-input::-moz-range-thumb {
        width: 1rem;
        height: 1rem;
        border: 2px solid var(--app-surface);
        border-radius: 999px;
        background: var(--app-accent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 40%, transparent);
      }

      .app-rating-slider-scale {
        display: flex;
        justify-content: space-between;
        color: var(--app-text-tertiary);
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1;
      }

      .app-rating-comment-form {
        width: 100%;
        max-width: none;
      }

      .app-rating-comment-form--panel {
        margin-top: 0.8rem;
      }

      .app-rating-comment-input {
        width: 100%;
        min-height: 2.8rem;
        resize: none;
        line-height: 1.5;
      }

      .app-rating-form-actions {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        flex-wrap: wrap;
      }

      .app-rating-comment-form .app-rating-form-actions {
        padding-top: 0.35rem;
      }

      .app-ratings-toolbar {
        margin-bottom: 0.45rem;
      }

      .app-ratings-create {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }

      .app-ratings-create--composer {
        gap: 0.24rem;
      }

      .app-ratings-create.is-open .app-tag-composer {
        display: none;
      }

      .app-ratings-create-header {
        display: flex;
        align-items: center;
      }

      .app-ratings-create-header--compact {
        justify-content: space-between;
        gap: 0.9rem;
        flex-wrap: wrap;
      }

      .app-ratings-create-toggle {
        display: inline-flex;
        align-items: center;
        gap: 0.48rem;
        min-height: var(--app-pill-compact-min-height);
        padding: var(--app-pill-compact-padding-block) var(--app-pill-compact-padding-inline);
        border-radius: var(--app-pill-compact-radius);
        border: 1px solid var(--app-border);
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .app-ratings-create-toggle--composer {
        min-height: 2.45rem;
        padding: 0.48rem 0.88rem;
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
      }

      .app-ratings-create-toggle--icon {
        padding-inline: 0;
        justify-content: center;
      }

      .app-ratings-create-toggle:hover,
      .app-ratings-create-toggle:focus-visible {
        color: var(--app-text);
        background: color-mix(in srgb, var(--app-surface-secondary) 70%, transparent);
        border-color: color-mix(in srgb, var(--app-border) 94%, transparent);
      }

      .app-ratings-create.is-open .app-ratings-create-toggle {
        color: var(--app-accent);
        border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
        background: var(--app-accent-soft);
      }

      .app-ratings-create-panel {
        width: 100%;
      }

      .app-ratings-create-panel--composer {
        margin-bottom: 0.5rem;
        padding: 0.92rem 0.95rem 0.95rem;
        border: 1px solid var(--app-border);
        border-radius: 24px;
        background: color-mix(in srgb, var(--app-surface-secondary) 90%, transparent);
      }

      .app-tag-rating-form--composer {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.82rem;
      }

      .app-tag-rating-form--composer .app-rating-form-field,
      .app-tag-rating-form--composer .app-rating-edit-slider {
        flex: 0 0 auto;
        min-width: 0;
      }

      .app-tag-rating-form-entry-fields {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
      }

      .app-rating-form-field--definition {
        align-self: flex-start;
        width: auto;
        max-width: min(100%, 11rem);
      }

      .app-rating-definition-select {
        width: auto;
        min-width: 8.75rem;
        max-width: 100%;
        min-height: 2.85rem;
        padding-inline: 0.95rem 2.4rem;
        border-radius: 999px;
        font-weight: 700;
      }

      .app-tag-rating-form--composer .app-rating-form-field--remarks,
      .app-tag-rating-form--composer .app-rating-remarks-input {
        width: 100%;
      }

      .app-tag-rating-form--composer .app-rating-form-field--remarks {
        flex: 1 1 15rem;
        min-width: min(15rem, 100%);
      }

      .app-tag-rating-form--composer .app-rating-form-field--score {
        margin-top: 0;
      }

      .app-tag-rating-form--composer .app-rating-slider {
        gap: 0.35rem;
      }

      .app-tag-rating-form--composer .app-rating-remarks-input {
        min-height: 2.9rem;
      }

      .app-tag-rating-form-footer-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
        align-items: end;
        gap: 0.85rem;
        width: 100%;
      }

      .app-rating-form-actions--composer {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        flex: 0 0 auto;
        min-width: 0;
      }

      .app-rating-form-field--date-compact {
        justify-self: end;
        flex: 0 1 10rem;
        min-width: 0;
        width: min(100%, 10rem);
        max-width: 100%;
        margin-left: 0;
      }

      .app-rating-date-input--composer {
        width: 100%;
        min-width: 0;
      }

      .app-ratings-summary {
        display: inline-flex;
        align-items: center;
        gap: 0;
        color: var(--app-text);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 1.2;
      }

      .app-ratings-summary-value {
        color: inherit;
        font-weight: inherit;
      }

      .app-ratings-summary-meta {
        color: var(--app-text-tertiary);
      }

      .app-ratings-summary--header {
        margin-left: auto;
        white-space: nowrap;
      }

      .app-ratings-readonly-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        flex-wrap: wrap;
      }

      .app-note-action-form {
        display: inline-flex;
        margin: 0;
      }

      .app-note-action {
        display: inline-flex;
        align-items: center;
        gap: 0.22rem;
        min-height: 2rem;
        padding: 0.34rem 0.58rem;
        border-radius: 999px;
        border: 1px solid transparent;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.78rem;
        font-weight: 600;
        line-height: 1;
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      }

      .app-note-action svg {
        flex: 0 0 auto;
      }

      .app-note-action:hover {
        background: rgba(60, 60, 67, 0.08);
        border-color: var(--app-border);
        color: var(--app-text);
      }

      .app-note-footer-disclosure {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        min-width: 2rem;
        min-height: 2rem;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-tertiary);
        transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
      }

      .app-note-footer-disclosure:hover,
      .app-note-footer-disclosure:focus-visible {
        background: rgba(60, 60, 67, 0.08);
        border-color: var(--app-border);
        color: var(--app-text);
      }

      .app-note-footer-disclosure--top {
        position: absolute;
        top: 0.54rem;
        right: 0.5rem;
        z-index: 3;
      }

      .app-note-action--primary {
        color: var(--app-accent);
      }

      .app-note-action--primary:hover {
        border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
        background: var(--app-accent-soft);
        color: var(--app-accent);
      }

      .app-note-action--danger:hover {
        color: var(--app-danger);
      }

      .app-note-action-caret {
        width: 0.74rem;
        height: 0.74rem;
        margin-left: 0.08rem;
        transform-origin: center;
        transition: transform 0.18s ease;
      }

      .app-note-comment-disclosure.is-open .app-note-action-caret,
      .app-note-inline-disclosure.is-open .app-note-action-caret,
      .app-feed-page-entry-disclosure.is-open .app-note-action-caret {
        transform: rotate(90deg);
      }

      .app-note-footer-disclosure .app-note-action-caret {
        margin-left: 0;
      }

      .app-note-action--comment {
        gap: 0.18rem;
      }

      .app-comment-thread {
        margin-top: 0.8rem;
        padding-left: 0.95rem;
        border-left: 2px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
      }

      .app-note-comments-panel .app-comment-thread,
      .app-rating-comment-panel .app-comment-thread {
        margin-top: 0;
      }

      .app-rating-comment-panel .app-rating-comment-composer + .app-comment-thread {
        margin-top: 0.65rem;
      }

      .app-comment-entry {
        display: flex;
        flex-direction: column;
        gap: 0.22rem;
        color: var(--app-text-secondary);
        font-size: 0.88rem;
      }

      .app-comment-entry + .app-comment-entry {
        padding-top: 0.8rem;
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
      }

      .app-comment-entry .trix-content {
        font-size: 0.88rem;
        line-height: 1.5;
      }

      .app-comment-thread-footer {
        padding-top: 0.1rem;
      }

      .app-comment-panel {
        margin-top: 1rem;
        border-radius: 18px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-comment-panel .collapse-title {
        color: var(--app-text-secondary);
        font-size: 0.78rem;
        font-weight: 700;
      }

      .app-comment-link {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: var(--app-text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
      }

      .app-library-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16.875rem, 16.875rem));
        gap: 1.1rem;
        justify-content: flex-start;
      }

      .app-library-grid--centered {
        justify-content: center;
      }

      .app-library-grid--fluid {
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(16.875rem, 16.875rem));
        justify-content: space-between;
      }

      .app-library-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 13.75rem;
        height: 13.75rem;
        width: 100%;
        max-width: 16.875rem;
        padding: 1.15rem;
        text-align: left;
      }

      .app-library-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: 1 1 auto;
        min-height: 0;
      }

      .app-library-card-top {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
      }

      .app-library-card-supporting {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        min-width: 0;
      }

      .app-library-card-title-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.85rem;
        min-width: 0;
      }

      .app-library-card-title-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.32rem;
        min-width: 0;
        padding-top: 0.1rem;
      }

      .app-library-card-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 14px;
        border: 1px solid var(--app-icon-border);
        background: var(--app-icon-surface);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-icon-text);
        flex: 0 0 auto;
      }

      .app-library-card-status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.15rem;
        height: 1.15rem;
        color: var(--app-text-tertiary);
        flex: 0 0 auto;
      }

      .app-library-card-status-pin {
        width: 1rem;
        height: 1rem;
      }

      .app-library-card-status-icon.is-pinned {
        color: var(--app-accent);
      }

      .app-relationship-panel {
        min-height: 14rem;
        border-radius: 22px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
        padding: 0.65rem;
      }

      .app-organize-parent-selector {
        display: flex;
        flex-direction: column;
        min-height: 14rem;
      }

      .app-organize-parent-selector .app-relationship-list {
        min-height: 0;
        max-height: min(28rem, 52dvh);
        overflow-y: auto;
        padding-right: 0.12rem;
      }

      .app-organize-selected-groups {
        margin-bottom: 0.75rem;
        padding: 0.82rem 0.9rem;
        border: 1px solid var(--app-border);
        border-radius: 18px;
        background: color-mix(in srgb, var(--app-surface-solid) 72%, var(--app-surface-secondary));
        max-height: min(9rem, 24dvh);
        overflow-y: auto;
      }

      .app-organize-selected-groups.hidden {
        display: none;
      }

      .app-child-groups-panel {
        min-height: 0;
        max-height: min(24rem, calc(100vh - 17rem));
        overflow-y: auto;
      }

      .app-selection-search {
        margin-bottom: 0.75rem;
      }

      .app-relationship-list {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
      }

      .app-relationship-option {
        display: grid;
        grid-template-columns: auto auto minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 0.8rem;
        border-radius: 16px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }

      .app-relationship-option:hover {
        background: rgba(60, 60, 67, 0.06);
        border-color: var(--app-border);
      }

      .app-relationship-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 26%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 48%, transparent);
      }

      .app-relationship-option.is-invalid {
        border-color: color-mix(in srgb, var(--app-danger) 18%, transparent);
        background: color-mix(in srgb, var(--app-danger-soft) 48%, transparent);
      }

      .app-group-picker-list {
        gap: 0.68rem;
      }

      .app-group-picker-section {
        display: grid;
        gap: 0.32rem;
        padding: 0.28rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 82%, transparent);
        border-radius: calc(var(--app-radius-control) + 4px);
        background: color-mix(in srgb, var(--app-surface-solid) 42%, transparent);
      }

      .app-group-picker-branch {
        display: grid;
        gap: 0.28rem;
        min-width: 0;
      }

      .app-group-picker-section-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.35rem;
      }

      .app-group-picker-section-row .app-relationship-option {
        border-color: transparent;
        background: transparent;
      }

      .app-group-picker-section-row .app-relationship-option:hover {
        background: color-mix(in srgb, var(--app-surface-solid) 70%, var(--app-accent-soft));
      }

      .app-group-picker-section-row .app-relationship-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 34%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 54%, transparent);
      }

      .app-group-picker-section-toggle {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-secondary);
        cursor: pointer;
        transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
      }

      .app-group-picker-section-toggle:hover,
      .app-group-picker-section-toggle:focus-visible {
        outline: none;
        border-color: var(--app-border);
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-group-picker-section-toggle svg {
        width: 1rem;
        height: 1rem;
        transition: transform 0.18s ease;
      }

      .app-group-picker-section:not(.is-open) .app-group-picker-section-toggle svg,
      .app-group-picker-branch:not(.is-open) .app-group-picker-section-toggle svg,
      .app-status-browser-group-filter-section:not(.is-open) .app-group-picker-section-toggle svg,
      .app-status-browser-group-filter-branch:not(.is-open) .app-group-picker-section-toggle svg {
        transform: rotate(-90deg);
      }

      .app-group-picker-children,
      .app-group-picker-overflow-panel {
        display: flex;
        flex-direction: column;
        gap: 0.28rem;
      }

      .app-group-picker-children {
        margin: 0.06rem 0 0.12rem 0.9rem;
        padding-left: 0.6rem;
        border-left: 1.5px solid color-mix(in srgb, var(--app-border) 72%, transparent);
      }

      .app-group-picker-children--nested {
        margin-left: 0.95rem;
      }

      .app-group-picker-children .app-relationship-option,
      .app-group-picker-overflow-panel .app-relationship-option {
        padding-block: 0.58rem;
        padding-inline: 0.54rem;
        border-color: transparent;
        background: transparent;
      }

      .app-group-picker-children .app-relationship-option:hover,
      .app-group-picker-overflow-panel .app-relationship-option:hover {
        background: color-mix(in srgb, var(--app-surface-solid) 72%, var(--app-accent-soft));
      }

      .app-group-picker-children .app-relationship-option.is-selected,
      .app-group-picker-overflow-panel .app-relationship-option.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 32%, transparent);
        background: color-mix(in srgb, var(--app-accent-soft) 50%, transparent);
      }

      .app-group-picker-more-button {
        width: fit-content;
        max-width: 100%;
        border: 0;
        background: transparent;
        color: var(--app-accent);
        font-size: 0.84rem;
        font-weight: 740;
        line-height: 1.25;
        padding: 0.35rem 0.15rem;
        cursor: pointer;
      }

      .app-group-picker-more-button:hover,
      .app-group-picker-more-button:focus-visible {
        outline: none;
        color: color-mix(in srgb, var(--app-accent) 82%, var(--app-text));
      }

      .app-relationship-option-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
      }

      .app-relationship-option-title {
        color: var(--app-text);
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.35;
      }

      .app-relationship-option-meta {
        color: var(--app-text-tertiary);
        font-size: 0.76rem;
        font-weight: 500;
        line-height: 1.35;
      }

      .app-relationship-option.is-invalid .app-relationship-option-meta {
        color: var(--app-danger);
      }

      .app-selection-create-row {
        display: block;
        padding: 0.8rem 0.95rem;
        border-radius: 16px;
        border: 1px dashed var(--app-border-strong);
        background: color-mix(in srgb, var(--app-surface-solid) 92%, transparent);
        color: var(--app-accent);
        transition: background-color 0.2s ease, border-color 0.2s ease;
      }

      .app-selection-create-row:hover {
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 24%, transparent);
      }

      .app-selection-create-copy {
        font-size: 0.88rem;
        font-weight: 600;
      }

      .app-relationship-option-icon {
        width: 1.9rem;
        height: 1.9rem;
      }

      .app-relationship-empty {
        color: var(--app-text-secondary);
        font-size: 0.92rem;
        line-height: 1.5;
        padding: 0.65rem;
      }

      .app-library-card-title {
        color: var(--app-text);
        font-size: 1.08rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        min-width: 0;
      }

      .app-library-card-description {
        color: var(--app-text-secondary);
        font-size: 0.88rem;
        line-height: 1.45;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }

      .app-library-card-rating-summary {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.28rem;
        margin: 0;
        color: var(--app-text-secondary);
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.25;
      }

      .app-library-card-rating-summary-value {
        color: var(--app-text);
      }

      .app-library-card-rating-summary-meta {
        color: var(--app-text-tertiary);
        font-weight: 500;
      }

      .app-library-card-footer {
        margin-top: auto;
        padding-top: 0.85rem;
        border-top: 1px solid var(--app-border);
      }

      .app-library-card-metadata {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 0.65rem;
        width: 100%;
      }

      .app-library-card-stat {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        min-width: 0;
        color: var(--app-text-tertiary);
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        text-align: center;
      }

      .app-library-card-stat svg {
        width: 0.92rem;
        height: 0.92rem;
        flex: 0 0 auto;
        color: var(--app-text-secondary);
      }

      .app-library-card-stat-value {
        color: var(--app-text-secondary);
        font-variant-numeric: tabular-nums;
      }

      .app-library-card--add .app-library-card-title {
        color: var(--app-text);
      }

      .app-library-card--add .app-library-card-description,
      .app-library-card--add .app-library-card-footer {
        color: var(--app-text-secondary);
      }

      .app-library-card--add {
        border-style: dashed;
        border-color: color-mix(in srgb, var(--app-border-strong) 88%, var(--app-accent) 12%);
        box-shadow: none;
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-secondary) 86%, var(--app-accent-soft) 14%),
            color-mix(in srgb, var(--app-surface-solid) 92%, var(--app-accent-soft) 8%)
          ) !important;
      }

      .app-library-card--add:hover {
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent);
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-secondary) 80%, var(--app-accent-soft-strong) 20%),
            color-mix(in srgb, var(--app-surface-solid) 88%, var(--app-accent-soft) 12%)
          ) !important;
        box-shadow: 0 18px 35px rgba(15, 23, 42, 0.05);
      }

      .app-library-card-add-icon {
        width: 2.7rem;
        height: 2.7rem;
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--app-border-strong) 78%, var(--app-accent) 22%);
        background: color-mix(in srgb, var(--app-surface-solid) 84%, var(--app-accent-soft) 16%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--app-accent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .app-library-card--add .app-library-card-title {
        color: var(--app-text);
      }

      .app-library-card--add .app-library-card-description,
      .app-library-card--add .app-library-card-footer {
        color: color-mix(in srgb, var(--app-text-secondary) 92%, var(--app-text) 8%);
      }

      .app-library-card--add .app-library-card-footer {
        border-top-color: color-mix(in srgb, var(--app-border-strong) 82%, transparent);
      }

      .app-library-card--add .badge {
        border-color: color-mix(in srgb, var(--app-border-strong) 84%, transparent) !important;
        background: color-mix(in srgb, var(--app-surface-solid) 86%, transparent) !important;
        color: var(--app-text-secondary) !important;
      }

      .app-library-card--add-simple {
        align-items: center;
        justify-content: center;
        border-style: dashed;
        border-color: color-mix(in srgb, var(--app-border-strong) 88%, var(--app-accent) 12%);
        box-shadow: none;
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-secondary) 88%, var(--app-accent-soft) 12%),
            color-mix(in srgb, var(--app-surface-solid) 94%, var(--app-accent-soft) 6%)
          ) !important;
      }

      .app-library-card--add-simple:hover,
      .app-library-card--add-simple:focus-visible {
        border-color: color-mix(in srgb, var(--app-accent) 26%, transparent);
        background:
          linear-gradient(
            180deg,
            color-mix(in srgb, var(--app-surface-secondary) 82%, var(--app-accent-soft-strong) 18%),
            color-mix(in srgb, var(--app-surface-solid) 90%, var(--app-accent-soft) 10%)
          ) !important;
      }

      .app-library-card-add-simple-label {
        color: var(--app-text-secondary);
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 1;
      }

      .app-library-card--add-simple:hover .app-library-card-add-simple-label,
      .app-library-card--add-simple:focus-visible .app-library-card-add-simple-label {
        color: var(--app-text);
      }

      .app-subgroups-section {
        margin-bottom: 1.1rem;
      }

      .app-subgroups-header-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.55rem;
        flex-wrap: wrap;
      }

      .app-subgroups-divider {
        width: 100%;
        height: 1px;
        background: var(--app-border);
        margin: 0 0 1rem;
      }

      .app-feed-divider {
        width: 100%;
        height: 1px;
        background: var(--app-border);
        margin: 0 0 1.25rem;
      }

      .app-tag-feed-list {
        margin-bottom: 0.25rem;
      }

      .app-page-feed-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0.25rem;
        border: none;
        border-radius: 0;
        background: transparent;
        overflow: visible;
        box-shadow: none;
      }

      .app-page-feed-list > .app-feed-row {
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        position: relative;
        cursor: pointer;
        transition: background-color 0.18s ease;
      }

      .app-page-feed-list > .app-feed-row + .app-feed-row {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
      }

      .app-page-feed-list > .app-feed-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.85rem;
        bottom: 0.85rem;
        width: 3px;
        border-radius: 999px;
        background: transparent;
        transition: background-color 0.18s ease, opacity 0.18s ease;
        opacity: 0;
      }

      .app-page-feed-list > .app-feed-row:hover {
        background: color-mix(in srgb, var(--app-accent-soft) 16%, transparent);
      }

      .app-page-feed-list > .app-feed-row:hover::before {
        background: color-mix(in srgb, var(--app-accent) 38%, transparent);
        opacity: 1;
      }

      .app-page-feed-list > .app-feed-undo-card.app-feed-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
        cursor: default;
        padding: 0.8rem 0.95rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent);
        border-radius: 18px;
        background: color-mix(in srgb, var(--app-surface-secondary) 92%, transparent);
        box-shadow: none;
      }

      .app-page-feed-list > .app-feed-undo-card.app-feed-row.is-danger {
        border-color: color-mix(in srgb, var(--app-danger) 22%, transparent);
        background: color-mix(in srgb, var(--app-danger-soft) 72%, var(--app-surface-secondary));
      }

      .app-page-feed-list > .app-feed-undo-card.app-feed-row::before {
        display: none;
      }

      .app-page-feed-list > .app-feed-undo-card.app-feed-row:hover {
        background: color-mix(in srgb, var(--app-danger-soft) 72%, var(--app-surface-secondary));
      }

      .app-page-feed-list > .app-feed-row .app-note-card-body {
        padding: 0.8rem 0.22rem 0.8rem calc(0.26rem + 4px);
      }

      .app-page-feed-list > .app-feed-row .app-note-header {
        margin-bottom: 0.42rem;
      }

      .app-page-feed-list > .app-feed-row .app-note-footer {
        margin-top: 0.48rem;
        padding-top: 0;
        border-top: none;
      }

      .app-page-feed-list .app-note-content,
      .app-page-feed-list .trix-content {
        font-size: 1rem;
        line-height: 1.62;
      }

      .app-page-feed-list .app-feed-page-entry-main {
        gap: 0.48rem;
      }

      .app-page-feed-list .app-feed-page-entry-title-row {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.8rem;
      }

      .app-page-feed-list .app-feed-page-entry-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.92rem;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-border) 80%, transparent);
      }

      .app-page-feed-list .app-feed-page-entry-parent-links {
        margin-left: 0;
        margin-top: 0;
      }

      .app-page-feed-list .app-feed-page-entry .app-library-card-title {
        font-size: 1.04rem;
        line-height: 1.24;
      }

      .app-page-feed-list .app-feed-page-entry-footer {
        margin-top: 0.5rem;
      }

      .app-page-feed-list .app-library-card-metadata {
        gap: 0.55rem 0.9rem;
      }

      .app-page-feed-list .app-note-thread-comment.app-feed-row--nested {
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
      }

      .app-page-feed-list .app-comment-thread > .app-feed-row--nested + .app-feed-row--nested {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
      }

      .app-page-feed-list .app-comment-thread > .app-feed-row--nested .app-note-card-body {
        padding: 0.72rem 0 0.72rem 4px;
      }

      .app-page-feed-list .app-note-meta--page-feed {
        gap: 0.3rem 0.55rem;
      }

      .app-page-feed-list .app-note-chip--page-feed {
        padding: 0.28rem 0.62rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        background: color-mix(in srgb, var(--app-surface-secondary) 88%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.7rem;
        font-weight: 700;
      }

      .app-page-feed-list .app-note-chip--page-feed:hover,
      .app-page-feed-list .app-note-chip--page-feed:focus-visible {
        color: var(--app-text);
        background: color-mix(in srgb, var(--app-surface-secondary) 76%, white 24%);
      }

      .app-page-feed-list .app-note-chip--page-feed.app-note-chip--subject {
        color: var(--app-accent);
        background: var(--app-accent-soft);
        border-color: color-mix(in srgb, var(--app-accent) 18%, transparent);
      }

      .app-page-feed-list .app-feed-row-kind {
        color: var(--app-text-tertiary);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .app-page-feed-list .app-feed-row-status {
        display: inline-flex;
        align-items: center;
        gap: 0.28rem;
        color: var(--app-accent);
        font-size: 0.72rem;
        font-weight: 700;
      }

      .app-page-feed-list .app-feed-row-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        color: var(--app-text-tertiary);
        font-size: 0.74rem;
        font-weight: 650;
      }

      .app-page-feed-list .app-feed-row-summary span {
        display: inline-flex;
        align-items: center;
      }

      .app-page-feed-list .app-feed-row-summary span + span::before {
        content: "•";
        margin-inline: 0.45rem;
        color: color-mix(in srgb, var(--app-text-tertiary) 72%, transparent);
      }

      .app-page-feed-list .app-note-time {
        font-size: 0.68rem;
      }

      .app-page-feed-list .app-note-time--footer {
        font-size: 0.64rem;
        line-height: 1;
      }

      .app-page-feed-list .app-rating-meta-text--page-feed {
        font-size: 0.94rem;
        font-weight: 700;
        letter-spacing: -0.01em;
      }

      .app-page-feed-list .app-rating-meta-text--page-feed strong {
        font-size: 1.15rem;
      }

      .app-page-feed-list .app-note-action-row {
        gap: 0.72rem 1.12rem;
      }

      .app-page-feed-list .app-note-action {
        min-height: auto;
        padding: 0.18rem 0;
        border: none;
        border-radius: 0;
        font-size: 0.76rem;
        font-weight: 700;
        gap: 0.18rem;
      }

      .app-page-feed-list .app-note-action:hover {
        background: transparent;
        border-color: transparent;
      }

      .app-page-feed-list .app-note-footer-meta {
        gap: 0.18rem;
        flex: 0 0 auto;
        min-width: max-content;
      }

      .app-page-feed-list .app-note-footer-meta .app-note-time--footer {
        flex: 0 0 auto;
      }

      .app-page-feed-list .app-feed-page-entry-disclosure-toggle {
        align-self: start;
        justify-self: end;
        margin-left: auto;
        margin-top: -0.08rem;
      }

      .app-page-feed-list .app-note-footer-disclosure {
        width: auto;
        min-width: 0;
        min-height: auto;
        padding: 0.18rem var(--app-sidebar-disclosure-inset) 0.18rem 0.55rem;
        border: none;
        border-radius: 0;
      }

      .app-page-feed-list .app-note-footer-disclosure:hover,
      .app-page-feed-list .app-note-footer-disclosure:focus-visible {
        background: transparent;
        border-color: transparent;
      }

      .app-page-feed-list .app-note-inline-disclosure-panel {
        padding-top: 0.65rem;
      }

      .app-page-feed-list .app-note-comments-panel {
        padding-top: 0.3rem;
      }

      .app-page-feed-list .app-note-reply-composer-panel + .app-note-comments-panel {
        padding-top: 0.65rem;
      }

      .app-page-feed-list .app-note-inline-load-error {
        margin-top: 0.65rem;
        color: var(--app-danger);
        font-size: 0.76rem;
        font-weight: 700;
      }

      .app-page-feed-list .is-loading-notes .app-note-action--comment {
        opacity: 0.72;
        cursor: wait;
      }

      .app-page-feed-list .app-comment-thread {
        margin-top: 0.7rem;
        padding-left: 0.85rem;
        gap: 0.65rem;
        border-left-color: color-mix(in srgb, var(--app-border) 84%, transparent);
      }

      .app-page-feed-list .app-note-comments-panel .app-comment-thread {
        margin-top: 0;
      }

      .app-page-feed-list .app-note-footer:has(> .app-note-comments-panel:not([hidden])) + .app-feed-page-entry-children:not([hidden]) {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
      }

      .app-feed-page-entry {
        overflow: hidden;
      }

      .app-feed-page-entry-link {
        display: block;
        color: inherit;
        text-decoration: none;
      }

      .app-feed-page-entry-link--title {
        display: inline-grid;
        grid-template-columns: auto minmax(0, auto);
        align-items: center;
        gap: 0.78rem;
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
      }

      .app-feed-page-entry-title-cluster {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.36rem 0.55rem;
        min-width: 0;
      }

      .app-feed-entry-kind {
        display: inline-flex;
        align-items: center;
        gap: 0.32rem;
      }

      .app-feed-entry-kind-icon {
        width: 0.76rem;
        height: 0.76rem;
        flex: 0 0 auto;
      }

      .app-feed-page-entry-body {
        gap: 0;
      }

      .app-feed-page-entry-main {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }

      .app-feed-page-entry--nested-minimal .app-feed-page-entry-main {
        gap: 0.35rem;
      }

      .app-feed-page-entry-title-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 0.78rem;
        min-width: 0;
      }

      .app-feed-page-entry-leading {
        display: inline-flex;
        align-items: flex-start;
        flex: 0 0 auto;
      }

      .app-feed-page-entry-title-stack {
        gap: 0.24rem;
        padding-top: 0;
      }

      .app-feed-page-entry-parent-links {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        margin-top: 0;
        margin-left: 0;
        gap: 0.28rem;
      }

      .app-feed-page-entry-parent-links .app-parent-pill {
        max-width: min(22ch, 42vw);
        min-height: 1.28rem;
        padding: 0.1rem 0.44rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-surface-secondary) 68%, transparent);
        font-size: 0.66rem;
        font-weight: 680;
        letter-spacing: 0;
        line-height: 1.05;
      }

      .app-feed-page-entry-parent-links .app-parent-pill--with-context {
        max-width: min(30ch, 54vw);
        min-height: 1.28rem;
        padding: 0.1rem 0.5rem;
        gap: 0.28rem;
      }

      .app-feed-page-entry-parent-links .app-parent-pill-context {
        font-size: 0.84em;
        padding-left: 0.42rem;
      }

      .app-feed-page-entry-heading {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-width: 0;
      }

      .app-feed-page-entry-heading .app-library-card-title {
        min-width: 0;
      }

      .app-feed-page-entry-icon {
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 16px;
      }

      .app-feed-page-entry--nested-minimal .app-feed-page-entry-icon {
        width: 2.45rem;
        height: 2.45rem;
      }

      .app-feed-page-entry .app-library-card-title {
        font-size: 0.98rem;
        line-height: 1.18;
      }

      .app-feed-page-entry-description {
        font-size: 0.9rem;
        line-height: 1.5;
      }

      .app-feed-page-entry-more-link {
        display: inline-flex;
        align-items: center;
        margin-top: 0.58rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--app-accent);
        font-size: 0.78rem;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
      }

      .app-feed-page-entry-more-link:hover,
      .app-feed-page-entry-more-link:focus-visible {
        color: var(--app-text);
      }

      .app-feed-page-entry-more-panel.is-open > .app-feed-page-entry-more-link {
        display: none;
      }

      .app-feed-page-entry-thread--overflow {
        margin-top: 0.58rem;
      }

      .app-feed-page-entry-supporting {
        gap: 0.35rem;
      }

      .app-feed-page-entry-footer {
        margin-top: 0.62rem;
      }

      .app-feed-page-entry-footer .app-note-footer-meta {
        margin-left: 0;
      }

      .app-feed-page-entry-footer .app-note-footer-bar--page-feed .app-note-action-row {
        flex: 1 1 auto;
        min-width: 0;
      }

      .app-feed-page-entry-footer .app-note-footer-bar--page-feed .app-note-footer-meta {
        flex: 0 0 auto;
        margin-left: auto;
      }

      .app-page-feed-list .app-note-footer-disclosure--top {
        top: 0.44rem;
        right: 0;
      }

      .app-feed-page-entry-summary-row {
        margin-bottom: 0.3rem;
      }

      .app-feed-page-entry .app-library-card-stat {
        font-size: 0.77rem;
      }

      .app-feed-page-entry .app-library-card-stat svg {
        width: 0.88rem;
        height: 0.88rem;
      }

      .app-feed-page-entry-children {
        padding-top: 0.65rem;
      }

      .app-feed-page-entry--nested-minimal .app-feed-page-entry-children {
        padding-top: 0.45rem;
      }

      .app-feed-page-entry-thread {
        margin-top: 0;
      }

      .app-feed-page-entry-thread > .app-feed-row {
        margin: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
      }

      .app-feed-page-entry-thread > .app-note-card + .app-note-card {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        padding-top: 0.95rem;
      }

      .app-feed-page-entry-thread > .app-feed-row + .app-feed-row {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
      }

      .app-feed-page-entry-thread > .app-feed-row .app-note-card-body {
        padding: 0.72rem 0 0.72rem 4px;
      }

      @media (max-width: 640px) {
        .app-composer-editor {
          padding-inline: 0.75rem;
        }

        .app-composer-shell trix-toolbar {
          padding-inline: 0.75rem;
        }

        .app-composer-footer {
          flex-direction: column;
          align-items: stretch;
          gap: 0.58rem;
          padding-inline: 0.75rem;
        }

        .app-composer-footer .app-tag-field,
        .app-composer-footer .app-composer-tags {
          width: 100%;
        }

        .app-composer-footer .app-tag-field-button,
        .app-composer-footer .app-composer-submit,
        .app-composer-actions,
        .app-composer-toggle {
          width: 100%;
        }

        .app-composer-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .app-composer-utility-row {
          width: 100%;
          flex-wrap: wrap;
        }

        .app-composer-footer .app-composer-utility-row .app-tag-field,
        .app-composer-footer .app-composer-utility-row .app-composer-tags,
        .app-composer-footer .app-composer-utility-row .app-tag-field-button,
        .app-composer-footer .app-composer-utility-row .app-ratings-create-toggle--composer {
          width: auto;
        }

        .app-composer-toggle {
          justify-content: center;
        }

        .app-composer-shell--bare .app-composer-editor,
        .app-composer-shell--bare trix-toolbar,
        .app-composer-shell--bare .app-composer-footer {
          padding-inline: 0;
        }

        .app-tag-composer .app-composer-footer {
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          gap: 0.75rem;
        }

        .app-tag-composer .app-composer-utility-row {
          width: auto;
          flex-wrap: nowrap;
        }

        .app-tag-composer .app-composer-actions {
          width: auto;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
        }

        .app-tag-composer .app-composer-toggle,
        .app-tag-composer .app-composer-submit {
          width: auto;
        }

        .app-tag-composer-tools {
          width: auto;
        }

        .app-library-grid {
          grid-template-columns: 1fr;
        }

        .app-library-card {
          max-width: none;
        }

        .app-library-card-footer {
          align-items: flex-start;
        }
      }

      .app-comment-entry {
        position: relative;
      }

      .app-segmented-control {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.25rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-segmented-control a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--app-pill-compact-min-height);
        padding: var(--app-pill-compact-padding-block) var(--app-pill-compact-padding-inline);
        border-radius: var(--app-pill-compact-radius);
        color: var(--app-text-secondary);
        font-size: var(--app-pill-compact-font-size);
        font-weight: var(--app-pill-compact-font-weight);
        line-height: 1;
      }

      .app-segmented-control a.active {
        background: var(--app-surface-solid);
        color: var(--app-text);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
      }

      .app-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.35rem 1.4rem 0;
      }

      .app-modal-title {
        display: inline-flex;
        align-items: center;
        color: var(--app-text);
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      .app-modal-body {
        padding: 1.1rem 1.4rem 1.35rem;
      }

      .app-modal-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0 1.4rem 1.4rem;
      }

      .app-modal-footer--end {
        justify-content: flex-end;
      }

      .app-modal-close {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-tertiary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, color 0.2s ease;
      }

      .app-modal-close:hover {
        background: rgba(60, 60, 67, 0.08);
        color: var(--app-text);
      }

      .app-empty-trash-modal {
        width: min(28rem, calc(100vw - 2rem));
        border: 1px solid color-mix(in srgb, var(--app-danger) 18%, var(--app-border));
        border-radius: 1.15rem;
        background: var(--app-surface-solid);
        color: var(--app-text);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
      }

      .app-empty-trash-modal .app-modal-body {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 0.9rem;
        padding-top: 1.2rem;
      }

      .app-empty-trash-warning-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.45rem;
        height: 2.45rem;
        border: 1px solid color-mix(in srgb, var(--app-danger) 28%, transparent);
        border-radius: 0.82rem;
        background: color-mix(in srgb, var(--app-danger-soft) 68%, transparent);
        color: var(--app-danger);
      }

      .app-empty-trash-copy {
        margin: 0;
        color: var(--app-text-secondary);
        font-size: 0.95rem;
        line-height: 1.45;
      }

      .app-empty-trash-copy strong {
        color: var(--app-text);
        font-weight: 750;
      }

      .app-empty-trash-confirm {
        min-width: 8.2rem;
        text-transform: lowercase;
      }

      .app-modal-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .app-modal-field {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
      }

      .app-modal-field-row {
        display: grid;
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.9rem;
        align-items: start;
      }

      .app-modal-label {
        color: var(--app-text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: -0.01em;
      }

      .app-modal-help {
        color: var(--app-text-tertiary);
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .app-export-modal-box {
        width: min(100%, 28rem);
      }

      .app-export-modal-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .app-export-modal-help {
        margin: 0;
        font-size: 0.88rem;
      }

      .app-export-modal-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.75rem;
      }

      .app-export-modal-link {
        min-height: 3rem;
        border-radius: 16px;
        font-weight: 700;
      }

      .app-export-modal-link--json {
        border: 1px solid var(--app-border);
        color: var(--app-text-secondary);
        background: var(--app-surface-secondary);
      }

      .app-modal-toggle-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding-top: 0.2rem;
      }

      .app-modal-toggle-copy {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
      }

      .app-modal-toggle-title {
        color: var(--app-text);
        font-size: 0.92rem;
        font-weight: 600;
      }

      .app-modal-toggle-description {
        color: var(--app-text-tertiary);
        font-size: 0.8rem;
        line-height: 1.4;
      }

      .app-new-group-modal {
        width: min(100%, 30rem);
        max-width: 30rem;
      }

      .app-new-group-modal .app-modal-title {
        font-size: 1.7rem;
        font-weight: 750;
      }

      .app-new-group-form {
        gap: 1.15rem;
        width: 100%;
        align-items: stretch;
      }

      .app-new-group-form .input,
      .app-new-group-form .textarea {
        width: 100%;
        max-width: none;
      }

      .app-new-group-name {
        display: block;
        width: 100%;
        max-width: none;
        font-size: 1.05rem;
      }

      .app-new-group-emoji-field {
        width: 4.75rem;
        max-width: 4.75rem;
      }

      .app-new-group-emoji-input {
        width: 100%;
        min-width: 0;
        text-align: center;
        font-size: 1.4rem;
        padding-inline: 0.35rem;
      }

      .app-new-group-emoji-input::placeholder {
        color: var(--app-text-secondary);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        opacity: 1;
      }

      .app-new-group-description {
        display: block;
        width: 100%;
        max-width: none;
        min-height: 3.75rem;
        resize: none;
        overflow: hidden;
        font-size: 0.98rem;
        line-height: 1.5;
      }

      .app-new-group-pin-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.15rem 0 0.1rem;
      }

      .app-new-group-pin-option {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--app-text);
        font-size: 0.92rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        cursor: pointer;
      }

      .app-new-group-pin-option input {
        cursor: pointer;
      }

      @media (max-width: 640px) {
        .app-modal-field-row {
          grid-template-columns: 1fr;
        }

        .app-new-group-emoji-field {
          max-width: none;
        }
      }

      @media (min-width: 768px) {
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar,
        .app-shell--sidebar-collapsed .app-shell-sidebar {
          width: var(--app-sidebar-collapsed-width);
          flex-basis: var(--app-sidebar-collapsed-width);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-shell,
        .app-shell--sidebar-collapsed .app-sidebar-shell {
          width: var(--app-sidebar-collapsed-width);
          overflow: hidden;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-expanded,
        .app-shell--sidebar-collapsed .app-sidebar-expanded {
          display: flex;
          padding-inline: 0;
          width: var(--app-sidebar-expanded-width);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-panel,
        .app-shell--sidebar-collapsed .app-sidebar-panel {
          gap: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-scroll-region,
        .app-shell--sidebar-collapsed .app-sidebar-scroll-region,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-footer,
        .app-shell--sidebar-collapsed .app-sidebar-footer {
          width: var(--app-sidebar-expanded-width);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-footer,
        .app-shell--sidebar-collapsed .app-sidebar-footer {
          margin-inline: 0;
          padding-inline: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-list,
        .app-shell--sidebar-collapsed .app-sidebar-list {
          gap: var(--app-sidebar-list-gap);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-branch-row,
        .app-shell--sidebar-collapsed .app-sidebar-branch-row {
          grid-template-columns: 1fr;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-utility-link,
        .app-shell--sidebar-collapsed .app-sidebar-group-link,
        .app-shell--sidebar-collapsed .app-sidebar-utility-link {
          width: var(--app-sidebar-rail-link-size);
          min-width: var(--app-sidebar-rail-link-size);
          min-height: var(--app-sidebar-rail-link-size);
          height: var(--app-sidebar-rail-link-size);
          padding: 0;
          gap: 0;
          justify-content: flex-start;
          margin-inline: var(--app-sidebar-active-inset) 0;
          border-radius: 17px;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link-icon,
        .app-shell--sidebar-collapsed .app-sidebar-group-link-icon {
          left: var(--app-sidebar-expanded-group-icon-left);
          transform: translateY(-50%);
          width: var(--app-sidebar-group-icon-size);
          height: var(--app-sidebar-group-icon-size);
          margin: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link .app-sidebar-group-link-icon--generated,
        .app-shell--sidebar-collapsed .app-sidebar-group-link .app-sidebar-group-link-icon--generated {
          display: inline-flex;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link.active,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-utility-link.active,
        .app-shell--sidebar-collapsed .app-sidebar-group-link.active,
        .app-shell--sidebar-collapsed .app-sidebar-utility-link.active {
          background: transparent;
          border-color: transparent;
          box-shadow: none;
          color: var(--app-accent);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link.active::before,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-utility-link.active::before,
        .app-shell--sidebar-collapsed .app-sidebar-group-link.active::before,
        .app-shell--sidebar-collapsed .app-sidebar-utility-link.active::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: var(--app-sidebar-rail-link-size);
          height: var(--app-sidebar-rail-link-size);
          border-radius: 17px;
          background: color-mix(in srgb, var(--app-accent-soft) 82%, var(--app-surface-solid));
          box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 18%, transparent);
          pointer-events: none;
          z-index: 0;
          transition: width 0.18s ease, border-radius 0.18s ease;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-utility-link > svg,
        .app-shell--sidebar-collapsed .app-sidebar-utility-link > svg {
          left: var(--app-sidebar-expanded-utility-icon-left);
          transform: translateY(-50%);
          width: var(--app-sidebar-utility-icon-size);
          height: var(--app-sidebar-utility-icon-size);
          margin: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link-icon.app-group-icon-badge,
        .app-shell--sidebar-collapsed .app-sidebar-group-link-icon.app-group-icon-badge {
          border-radius: var(--app-sidebar-monogram-radius);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link .app-group-icon-badge.is-monogram,
        .app-shell--sidebar-collapsed .app-sidebar-group-link .app-group-icon-badge.is-monogram {
          background: var(--app-icon-surface);
          border-width: var(--app-sidebar-monogram-border-width);
          border-color: var(--app-icon-border);
          color: var(--app-icon-text);
          box-shadow: var(--app-sidebar-monogram-shadow);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link .app-group-icon-badge,
        .app-shell--sidebar-collapsed .app-sidebar-group-link .app-group-icon-badge {
          width: var(--app-sidebar-group-icon-size);
          height: var(--app-sidebar-group-icon-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link .app-group-icon-emoji,
        .app-shell--sidebar-collapsed .app-sidebar-group-link .app-group-icon-emoji {
          font-size: var(--app-sidebar-group-emoji-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link .app-group-icon-monogram,
        .app-shell--sidebar-collapsed .app-sidebar-group-link .app-group-icon-monogram {
          font-size: var(--app-sidebar-monogram-font-size);
          font-weight: 800;
          letter-spacing: 0.01em;
          color: currentColor;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-group-link-label,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-utility-link > span,
        .app-shell--sidebar-collapsed .app-sidebar-group-link-label,
        .app-shell--sidebar-collapsed .app-sidebar-utility-link > span {
          display: block !important;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }

        html.app-shell--sidebar-preload-collapsed .app-sidebar-disclosure-toggle,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-disclosure-spacer,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-branch-count,
        html.app-shell--sidebar-preload-collapsed .app-sidebar-tree-list,
        .app-shell--sidebar-collapsed .app-sidebar-disclosure-toggle,
        .app-shell--sidebar-collapsed .app-sidebar-disclosure-spacer,
        .app-shell--sidebar-collapsed .app-sidebar-branch-count,
        .app-shell--sidebar-collapsed .app-sidebar-tree-list {
          display: none !important;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-shell,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-shell,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-shell,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-shell {
          width: max-content;
          max-width: var(--app-sidebar-expanded-width);
          overflow: visible;
          box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-expanded,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-expanded,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-expanded,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-expanded {
          width: max-content;
          max-width: var(--app-sidebar-expanded-width);
          padding-inline: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-scroll-region,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-footer,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-scroll-region,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-footer,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-scroll-region,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-footer,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-scroll-region,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-footer {
          width: 100%;
          min-width: max-content;
          max-width: 100%;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-footer,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-footer,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-footer,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-footer {
          margin-inline: 0;
          padding-inline: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-panel,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-panel,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-panel,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-panel {
          gap: 0;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-list,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-list,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-list,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-list {
          gap: var(--app-sidebar-list-gap);
          width: 100%;
          min-width: max-content;
          max-width: 100%;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-tree-item,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-row,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-tree-item,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-row,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-tree-item,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-row,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-tree-item,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-row {
          width: 100%;
          min-width: max-content;
          max-width: 100%;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-row,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-row,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-row,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-row {
          grid-template-columns: max-content max-content var(--app-sidebar-disclosure-slot);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link {
          width: max-content;
          min-width: 0;
          min-height: var(--app-sidebar-rail-link-size);
          height: var(--app-sidebar-rail-link-size);
          padding: 0 0.68rem 0 calc(var(--app-sidebar-label-start) - var(--app-sidebar-active-inset));
          gap: 0.62rem;
          justify-content: flex-start;
          margin-inline: var(--app-sidebar-active-inset) 0;
          border-radius: 17px;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link.active,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link.active,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link.active,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link.active,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link.active,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link.active,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link.active,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link.active {
          background: transparent;
          color: var(--app-text);
          box-shadow: none;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link.active::before,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link.active::before,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link.active::before,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link.active::before,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link.active::before,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link.active::before,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link.active::before,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link.active::before {
          display: block;
          left: 0;
          width: 100%;
          border-radius: 17px;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-icon,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-icon,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-icon,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-icon {
          left: var(--app-sidebar-expanded-group-icon-left);
          transform: translateY(-50%);
          width: var(--app-sidebar-group-icon-size);
          height: var(--app-sidebar-group-icon-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link > svg,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link > svg,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link > svg,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link > svg {
          left: var(--app-sidebar-expanded-utility-icon-left);
          transform: translateY(-50%);
          width: var(--app-sidebar-utility-icon-size);
          height: var(--app-sidebar-utility-icon-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-icon.app-group-icon-badge,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-icon.app-group-icon-badge,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-icon.app-group-icon-badge,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-icon.app-group-icon-badge {
          border-radius: var(--app-sidebar-monogram-radius);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link .app-group-icon-badge,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link .app-group-icon-badge,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link .app-group-icon-badge,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link .app-group-icon-badge {
          width: var(--app-sidebar-group-icon-size);
          height: var(--app-sidebar-group-icon-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link .app-group-icon-emoji,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link .app-group-icon-emoji,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link .app-group-icon-emoji,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link .app-group-icon-emoji {
          font-size: var(--app-sidebar-group-emoji-size);
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-label,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link > span,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-label,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link > span,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-group-link-label,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-utility-link > span,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-group-link-label,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-utility-link > span {
          display: block !important;
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-disclosure-toggle,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-disclosure-spacer,
        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-count,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-disclosure-toggle,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-disclosure-spacer,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-count,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-disclosure-toggle,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-disclosure-spacer,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-count,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-disclosure-toggle,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-disclosure-spacer,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-count {
          display: inline-flex !important;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-count,
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-count,
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-branch-count,
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-branch-count {
          transform: none;
        }

        html.app-shell--sidebar-preload-collapsed .app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-tree-list:not([hidden]),
        html.app-shell--sidebar-preload-collapsed .app-shell-sidebar:focus-within .app-sidebar-tree-list:not([hidden]),
        .app-shell--sidebar-collapsed.app-shell--sidebar-hovered .app-shell-sidebar .app-sidebar-tree-list:not([hidden]),
        .app-shell--sidebar-collapsed .app-shell-sidebar:focus-within .app-sidebar-tree-list:not([hidden]) {
          display: flex !important;
        }
      }

      @media (max-width: 767.98px) {
        .app-shell-body {
          display: block;
        }

        .app-shell-sidebar {
          position: fixed;
          inset: 0 auto 0 0;
          width: min(21rem, 88vw);
          transform: translateX(-100%);
          transition: transform 0.22s ease;
          flex: none;
          z-index: 65;
        }

        .app-shell-toggle {
          left: calc(env(safe-area-inset-left, 0px) + 1rem);
          top: calc(env(safe-area-inset-top, 0px) + 0.18rem);
        }

        .app-shell--mobile-open .app-shell-sidebar {
          transform: translateX(0);
        }

        .app-shell--mobile-open .app-shell-overlay {
          opacity: 1;
          pointer-events: auto;
        }

        .app-shell--mobile-open .app-shell-toggle-icon--menu {
          display: none;
        }

        .app-shell--mobile-open .app-shell-toggle-icon--close {
          display: block;
        }

        .app-main {
          --app-main-mobile-padding: 0.5rem;
          padding-inline: var(--app-main-mobile-padding);
          padding-top: 0;
        }

        .app-page-mobile-sticky-bar {
          display: block;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          z-index: 60;
          margin: 0;
        }

        .app-page-scroll-sticky-bar {
          display: none;
        }

        .app-page-mobile-sticky-inner {
          min-height: calc(env(safe-area-inset-top, 0px) + 4.25rem);
          padding-top: calc(env(safe-area-inset-top, 0px) + 0.42rem);
          padding-right: calc(var(--app-main-mobile-padding) + 0.38rem);
          padding-bottom: 0.44rem;
          padding-left: calc(var(--app-main-mobile-padding) + 0.38rem);
        }

        .app-page-mobile-sticky-inner--with-actions {
          grid-template-columns: 2.45rem minmax(0, 1fr) auto;
          grid-template-areas: "menu title actions";
          column-gap: 0.62rem;
          row-gap: 0;
          min-height: calc(env(safe-area-inset-top, 0px) + 4.25rem);
        }

        .app-page-mobile-sticky-inner--with-actions .app-page-mobile-sticky-menu {
          grid-area: menu;
        }

        .app-page-mobile-sticky-inner--with-actions .app-page-mobile-sticky-title {
          grid-area: title;
          width: 100%;
          max-width: 100%;
        }

        .app-page-mobile-sticky-inner--with-actions .app-page-mobile-sticky-actions {
          grid-area: actions;
          justify-self: end;
          width: auto;
          max-width: min(42vw, 8rem);
        }

        .app-shell:has(.app-page-mobile-sticky-bar) .app-main {
          padding-top: calc(env(safe-area-inset-top, 0px) + 4.25rem);
        }

        .app-shell:has(.app-page-mobile-sticky-inner--with-actions) .app-main {
          padding-top: calc(env(safe-area-inset-top, 0px) + 4.25rem);
        }

        .app-shell:has(.app-page-mobile-sticky-bar) .app-shell-toggle {
          display: none;
        }

        .app-shell:has(.app-page-mobile-sticky-bar).app-shell--mobile-open .app-page-mobile-sticky-bar {
          z-index: 66;
        }

        .app-shell:has(.app-page-mobile-sticky-bar).app-shell--mobile-open .app-page-mobile-sticky-menu-icon--menu {
          display: none;
        }

        .app-shell:has(.app-page-mobile-sticky-bar).app-shell--mobile-open .app-page-mobile-sticky-menu-icon--close {
          display: inline-flex;
        }

        .app-page-header--mobile-sticky-replaced {
          display: none;
        }

        .app-page-header--mobile-sticky-replaced + .app-search-toolbar {
          margin-top: 0.8rem;
        }

        #tag-header .app-group-header-content {
          display: none;
        }

        #tag-header .app-group-header-content:has(.app-group-header-form:not(.hidden)) {
          display: block;
          width: 100%;
        }

        #tag-header .app-group-header-main {
          justify-content: flex-end;
          margin-bottom: 0;
        }

        #tag-header .app-group-header-main:has(.app-group-header-form:not(.hidden)) {
          justify-content: stretch;
        }

        #tag-header .app-group-header-actions--desktop {
          display: none;
        }

        #tag-header .app-page-header-top {
          padding-top: 0.9rem;
          margin-bottom: 0.3rem;
        }

        .app-group-filter-footer {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: start;
          column-gap: 0.8rem;
          row-gap: 0.42rem;
          margin-bottom: 0.68rem;
        }

        .app-search-toolbar--status-browser {
          grid-template-columns: minmax(0, 1fr);
        }

        .app-search-toolbar--status-browser .app-status-browser-filter-row {
          grid-column: 1;
          grid-row: auto;
          justify-self: start;
          width: auto;
          margin-top: 0.1rem;
        }

        .app-status-browser-status-filter-list,
        .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list,
        .app-group-filter-footer .app-status-browser-content-filter-list {
          flex-wrap: nowrap;
          gap: 0.42rem;
          overflow-x: auto;
          padding-bottom: 0.12rem;
          scrollbar-width: none;
        }

        .app-status-browser-status-filter-list::-webkit-scrollbar,
        .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list::-webkit-scrollbar,
        .app-group-filter-footer .app-status-browser-content-filter-list::-webkit-scrollbar {
          display: none;
        }

        .app-group-filter-footer .app-status-browser-content-filter-form {
          grid-column: 1 / -1;
          width: 100%;
        }

        .app-search-toolbar--status-browser .app-status-browser-content-filter-form--toolbar {
          grid-column: 1;
          width: fit-content;
          max-width: 100%;
        }

        .app-search-toolbar--status-browser .app-status-browser-status-filter-list,
        .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-list {
          flex-wrap: nowrap;
          gap: 0;
          overflow-x: auto;
          overflow-y: hidden;
        }

        .app-status-browser-group-filter-inline {
          justify-content: flex-start;
          width: auto;
          max-width: 100%;
        }

        .app-status-browser-group-filter-button.is-active {
          width: auto;
          max-width: 100%;
        }

        .app-status-browser-group-filter-button.is-active .app-status-browser-group-filter-value {
          max-width: 5.25rem;
        }

        .app-status-browser-content-filter-label {
          min-height: 1.68rem;
          padding: 0.28rem 0.54rem;
          gap: 0.3rem;
          font-size: 0.72rem;
        }

        .app-status-browser-content-filter-check {
          width: 0.68rem;
          height: 0.68rem;
          border-radius: 0.2rem;
          border-width: 1.25px;
        }

        .app-status-browser-content-filter-check::after {
          width: 0.28rem;
          height: 0.16rem;
          border-left-width: 1.45px;
          border-bottom-width: 1.45px;
        }

        .app-status-browser-content-filter-form--toolbar .app-status-browser-content-filter-check,
        .app-group-filter-footer .app-status-browser-content-filter-check {
          display: none;
        }

        .app-group-summary-nav {
          flex: 0 1 auto;
        }

        .app-group-summary-cluster {
          grid-column: 1;
          grid-row: 1;
          align-self: center;
        }

        .app-ratings-summary--header {
          grid-column: 2;
          grid-row: 1;
          justify-self: end;
          align-self: center;
        }

        .app-page-summary-actions {
          display: inline-flex;
          align-items: center;
          gap: 0.55rem;
          grid-column: 2;
          grid-row: 2;
          justify-self: end;
        }

        .app-group-filter-footer:not(:has(.app-ratings-summary--header)) .app-page-summary-actions {
          grid-row: 1;
          align-self: center;
        }

        .app-page-summary-actions .app-group-header-menu {
          position: relative;
        }

        .app-page-summary-actions .app-page-sort-control,
        .app-page-summary-actions .app-group-header-search-button,
        .app-page-summary-actions .app-group-header-menu-button {
          width: 2.45rem;
          height: 2.45rem;
        }

        .app-ratings-create-panel--composer {
          padding: 0.82rem 0.82rem 0.88rem;
          border-radius: 22px;
        }

        .app-tag-rating-form-footer-row {
          grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem);
        }
      }

      .app-sidebar-utility-monogram,
      .app-sidebar-rail-monogram {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1rem;
        height: 1rem;
        border-radius: 6px;
        border: 1px solid var(--app-border);
        color: var(--app-text);
        font-size: 0.68rem;
        font-weight: 800;
        line-height: 1;
      }

      .app-gratitude-page {
        width: min(100%, 64rem);
        margin: 0 auto;
        padding: 0 0 3rem;
      }

      .app-gratitude-header {
        position: relative;
        margin-bottom: 1.15rem;
      }

      .app-gratitude-title-row {
        display: flex;
        align-items: baseline;
        gap: 0.8rem;
        min-width: 0;
        padding-right: 3.35rem;
        flex-wrap: wrap;
      }

      .app-gratitude-count {
        color: var(--app-text-secondary);
      }

      .app-gratitude-filter-badge {
        align-self: center;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        padding: 0.25rem 0.55rem;
        color: var(--app-text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
      }

      .app-gratitude-settings {
        display: block;
      }

      .app-gratitude-settings-toggle {
        position: absolute;
        top: 0.05rem;
        right: 0;
        width: 2.75rem;
        height: 2.75rem;
      }

      .app-gratitude-settings-toggle::-webkit-details-marker {
        display: none;
      }

      .app-gratitude-settings[open] .app-gratitude-settings-toggle {
        border-color: color-mix(in srgb, var(--app-accent) 22%, transparent);
        background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface-secondary));
        color: var(--app-text);
      }

      .app-gratitude-settings-panel {
        width: 100%;
        margin: 0.9rem 0 0;
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-panel);
        background: var(--app-surface);
        box-shadow: var(--app-shadow);
        padding: clamp(1rem, 2vw, 1.55rem);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }

      .app-gratitude-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
      }

      .app-gratitude-settings-panel h2 {
        margin: 0;
        color: var(--app-text);
        font-size: clamp(1.25rem, 2.4vw, 1.65rem);
        font-weight: 800;
        line-height: 1.1;
      }

      .app-gratitude-settings-form,
      .app-gratitude-filter-form {
        display: grid;
        gap: 0.85rem;
      }

      .app-gratitude-filter-form {
        margin-top: 0;
        border-top: 0;
        padding-top: 0;
      }

      .app-gratitude-filter-form .app-group-filter-panel {
        padding: 0.9rem;
      }

      .app-gratitude-settings-grid,
      .app-gratitude-filter-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 0.9rem;
      }

      .app-gratitude-settings-grid--primary {
        grid-template-columns: minmax(14rem, 1.1fr) minmax(16rem, 0.9fr) auto;
        align-items: end;
      }

      .app-gratitude-settings-grid--secondary {
        grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
        align-items: end;
      }

      .app-gratitude-filter-grid {
        grid-template-columns: minmax(11rem, 0.72fr) repeat(2, minmax(9rem, 1fr));
        align-items: end;
        margin-top: 0.75rem;
      }

      .app-gratitude-settings-grid label,
      .app-gratitude-filter-grid label:not(.app-group-filter-chip):not(.app-gratitude-membership-pill) {
        display: grid;
        gap: 0.34rem;
        color: var(--app-text-secondary);
        font-size: 0.86rem;
        font-weight: 700;
      }

      .app-gratitude-settings-grid :where(.input, .select),
      .app-gratitude-filter-grid :where(.input, .select) {
        min-height: 2.55rem;
        border-radius: var(--app-radius-control);
        border-color: var(--app-border-strong);
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        color: var(--app-text);
        font-size: 0.96rem;
        font-weight: 650;
      }

      .app-gratitude-frequency {
        display: grid;
        grid-template-columns: minmax(4.8rem, 0.44fr) minmax(7.2rem, 0.56fr);
        gap: 0.45rem;
      }

      .app-gratitude-settings-save-slot {
        display: flex;
        align-items: end;
        justify-content: flex-end;
      }

      .app-gratitude-quiet-hours summary,
      .app-gratitude-link {
        color: var(--app-accent);
        font-weight: 800;
        cursor: pointer;
      }

      .app-gratitude-quiet-hours summary {
        width: max-content;
        list-style-position: inside;
      }

      .app-gratitude-quiet-hours[open] summary {
        margin-bottom: 0.8rem;
      }

      .app-gratitude-settings-actions {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin-top: 0.15rem;
      }

      .app-gratitude-filter-actions {
        justify-content: flex-start;
        margin-top: 0.75rem;
      }

      .app-gratitude-save {
        min-height: 2.55rem;
        padding-inline: 1.2rem;
        border-radius: var(--app-radius-control);
      }

      .app-gratitude-reminder-toggle-row,
      .app-gratitude-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--app-text);
        font-weight: 750;
      }

      .app-gratitude-chip {
        position: relative;
      }

      .app-gratitude-reminder-toggle-row input[type="checkbox"] {
        width: 1.05rem;
        height: 1.05rem;
        accent-color: var(--app-accent);
      }

      .app-gratitude-filter-grid fieldset {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        border: 0;
        padding: 0;
        margin: 0;
      }

      .app-gratitude-filter-grid legend {
        flex-basis: 100%;
        margin-bottom: 0.34rem;
        color: var(--app-text-secondary);
        font-size: 0.86rem;
        font-weight: 700;
      }

      .app-gratitude-membership-pill {
        position: relative;
        display: inline-flex;
        min-width: 0;
      }

      .app-gratitude-membership-label {
        min-height: 2.05rem;
        padding: 0.4rem 0.74rem;
      }

      .app-gratitude-chip input {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .app-gratitude-chip span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.55rem;
        border: 1px solid var(--app-border-strong);
        border-radius: var(--app-radius-control);
        padding: 0.52rem 0.95rem;
        background: color-mix(in srgb, var(--app-surface-solid) 70%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.95rem;
        font-weight: 750;
      }

      .app-gratitude-chip input:checked + span {
        border-color: var(--app-accent);
        background: var(--app-accent);
        color: #ffffff;
      }

      .app-gratitude-composer {
        margin-bottom: 1rem;
      }

      .app-gratitude-composer-save {
        min-height: 3.35rem;
        min-width: 6.4rem;
        border-radius: var(--app-radius-control);
        font-size: 1rem;
      }

      .app-gratitude-composer-footer {
        align-items: center;
      }

      .app-gratitude-memberships {
        display: flex;
        gap: 1rem;
        border: 0;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
      }

      .app-gratitude-counter {
        color: var(--app-text-tertiary);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .app-gratitude-counter.is-over {
        color: var(--app-danger);
      }

      .app-gratitude-featured {
        margin: 1.2rem 0;
      }

      .app-gratitude-featured-label {
        color: var(--app-text-secondary);
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0;
        text-transform: uppercase;
        margin-bottom: 0.35rem;
      }

      .app-gratitude-date-heading {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        color: var(--app-text-secondary);
        font-size: 1.28rem;
        font-weight: 850;
        line-height: 1;
        letter-spacing: 0;
        text-transform: uppercase;
        margin: 2.2rem 0 1rem;
      }

      .app-gratitude-date-heading::after {
        content: "";
        flex: 1 1 auto;
        min-width: 2rem;
        border-top: 1px solid var(--app-border);
      }

      .app-gratitude-entry {
        transition: background-color 0.18s ease;
      }

      .app-gratitude-entry.is-featured {
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-panel);
        padding: 0.85rem;
        background: var(--app-surface);
      }

      .app-gratitude-entry-display {
        cursor: pointer;
      }

      .app-gratitude-entry-main {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0.75rem;
        width: 100%;
        border: 0;
        padding: 0;
        background: transparent;
        text-align: left;
        color: var(--app-text);
      }

      .app-gratitude-entry-icon,
      .app-gratitude-entry-kind-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.25rem;
        height: 2.25rem;
        border-radius: var(--app-radius-control);
        background: var(--app-surface-secondary);
        font-size: 1.35rem;
      }

      .app-gratitude-entry-copy {
        display: grid;
        gap: 0.2rem;
        min-width: 0;
      }

      .app-gratitude-entry-content {
        color: var(--app-text);
        font-size: clamp(1.16rem, 2.8vw, 1.45rem);
        line-height: 1.33;
        overflow-wrap: anywhere;
      }

      .app-gratitude-entry-description,
      .app-gratitude-entry-date {
        color: var(--app-text-secondary);
        font-size: 0.92rem;
        line-height: 1.35;
      }

      .app-gratitude-heart-form {
        display: inline-flex;
        margin: 0;
      }

      .app-note-action.app-gratitude-heart {
        width: 2rem;
        min-width: 2rem;
        height: 2rem;
        min-height: 2rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        border: 1px solid transparent;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-tertiary);
        font-size: 1rem;
        line-height: 1;
        box-shadow: none;
      }

      .app-note-action.app-gratitude-heart:hover,
      .app-note-action.app-gratitude-heart:focus-visible {
        border-color: color-mix(in srgb, var(--app-danger) 24%, transparent);
        background: color-mix(in srgb, var(--app-danger-soft) 45%, transparent);
        color: var(--app-danger);
      }

      .app-note-action.app-gratitude-heart.is-hearted {
        border-color: transparent;
        background: transparent;
        color: var(--app-danger);
      }

      .app-gratitude-entry-form {
        display: block;
      }

      .app-gratitude-entry-form.hidden {
        display: none !important;
      }

      .app-gratitude-entry-form .app-inline-edit-shell {
        display: grid;
        gap: 0.55rem;
      }

      .app-gratitude-entry-form :where(.input, .select) {
        border-radius: var(--app-radius-control);
        border-color: var(--app-border-strong);
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent);
        color: var(--app-text);
        font-size: 1rem;
      }

      .app-gratitude-edit-row,
      .app-gratitude-edit-actions {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.55rem;
      }

      .app-gratitude-edit-actions {
        grid-template-columns: minmax(0, 1fr) auto auto;
      }

      .app-gratitude-edit-memberships {
        display: flex;
        gap: 0.85rem;
        margin: 0;
        padding: 0;
        border: 0;
        flex-wrap: wrap;
      }

      .app-gratitude-entry-trash {
        border-color: var(--app-danger);
        color: var(--app-danger);
        border-radius: var(--app-radius-control);
      }

      .app-gratitude-empty {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        padding: 1.4rem 0;
        color: var(--app-text);
        font-weight: 750;
      }

      .app-gratitude-panel-footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 1rem;
        border-top: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        padding-top: 1rem;
      }

      .app-gratitude-panel-close {
        border: 0;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 1rem;
        font-weight: 800;
      }

      .app-gratitude-panel-close:hover,
      .app-gratitude-panel-close:focus-visible {
        color: var(--app-text);
      }

      @media (max-width: 767.98px) {
        .app-gratitude-settings-panel {
          width: 100%;
          max-height: none;
          overflow: visible;
          padding: 1rem;
        }

        .app-gratitude-settings-grid,
        .app-gratitude-edit-actions {
          grid-template-columns: 1fr;
        }

        .app-gratitude-settings-grid--primary {
          grid-template-columns: minmax(0, 1fr) auto;
        }

        .app-gratitude-settings-grid--primary > label:first-child {
          grid-column: 1 / -1;
        }

        .app-gratitude-settings-grid--secondary {
          grid-template-columns: minmax(0, 1fr);
        }

        .app-gratitude-filter-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .app-gratitude-filter-grid fieldset {
          grid-column: 1 / -1;
        }

        .app-gratitude-composer-save {
          width: 100%;
        }

        .app-gratitude-settings-actions {
          align-items: center;
          flex-direction: row;
          justify-content: flex-end;
        }

        .app-gratitude-composer-footer {
          align-items: flex-start;
          flex-direction: column;
        }

        .app-gratitude-entry-content {
          font-size: 1.15rem;
        }
      }

      @media (max-width: 640px) {
        .app-group-header-main {
          gap: 0.75rem;
        }

        .app-ratings-create-toggle {
          padding-inline: 0.82rem;
        }

        .app-group-header-search-button,
        .app-group-header-menu-button,
        .app-group-header-actions .app-page-sort-control {
          width: 2.45rem;
          height: 2.45rem;
        }

        .app-page-mobile-sticky-actions .app-page-sort-control,
        .app-page-mobile-sticky-actions .app-group-header-search-button,
        .app-page-mobile-sticky-actions .app-group-header-menu-button {
          flex-basis: 2.35rem;
          width: 2.35rem;
          height: 2.35rem;
          border-radius: 0.92rem;
        }

        .app-group-header-form-row {
          grid-template-columns: 1fr;
        }

        .app-page-header {
          margin-bottom: 0.5rem;
        }

        .app-group-title-icon {
          width: 3.35rem;
          height: 3.35rem;
          border-radius: 18px;
        }

        .app-page-mobile-sticky-title {
          font-size: 1.66rem;
        }

        .app-page-mobile-sticky-icon-badge .app-group-icon-emoji {
          font-size: 2.45rem;
        }

        .app-page-feed-list > .app-feed-row .app-note-card-body {
          padding: 0.72rem 0 0.72rem calc(0.27rem + 4px);
        }
      }

      .app-criteria-section-card {
        margin-bottom: 1.5rem;
        padding: 1.25rem;
        border: 1px solid var(--app-border);
        border-radius: 1.5rem;
        background: color-mix(in srgb, var(--app-surface-solid) 90%, transparent);
        box-shadow: var(--app-shadow);
      }

      .app-group-criteria-panel {
        margin-top: 0.85rem;
      }

      .app-group-rankings-panel {
        margin-top: 0.85rem;
        margin-bottom: 1rem;
      }

      .app-group-rankings-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .app-overall-rankings-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .app-overall-rankings-row {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.9rem 1rem;
        border: 1px solid var(--app-border);
        border-radius: 1.1rem;
        background: var(--app-surface-solid);
      }

      .app-overall-rankings-position {
        flex: 0 0 auto;
        min-width: 2.6rem;
        color: var(--app-text-secondary);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .app-overall-rankings-main {
        min-width: 0;
        flex: 1 1 auto;
      }

      .app-overall-rankings-link {
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        min-width: 0;
        color: inherit;
        text-decoration: none;
      }

      .app-overall-rankings-link:hover .app-overall-rankings-name,
      .app-overall-rankings-link:focus-visible .app-overall-rankings-name {
        color: var(--app-accent);
      }

      .app-overall-rankings-icon {
        width: 2.8rem;
        height: 2.8rem;
        flex: 0 0 auto;
        border-radius: 1rem;
        overflow: hidden;
      }

      .app-overall-rankings-name {
        display: block;
        color: var(--app-text);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        transition: color 0.16s ease;
      }

      .app-overall-rankings-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.15rem;
        flex: 0 0 auto;
        color: var(--app-text-secondary);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: right;
      }

      .app-form-label-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
      }

      .app-criterion-create-panel {
        width: min(100%, 44rem);
      }

      .app-criteria-management-form {
        width: min(100%, 44rem);
      }

      .app-criteria-management-form-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.65rem;
        margin-top: 0.75rem;
      }

      .app-criteria-create-rating-button {
        align-self: flex-start;
        padding-inline: 0.95rem;
        border: 1px solid color-mix(in srgb, var(--app-accent) 34%, var(--app-border)) !important;
        background: color-mix(in srgb, var(--app-accent-soft) 72%, var(--app-surface-solid)) !important;
        color: var(--app-text) !important;
        box-shadow: 0 10px 22px color-mix(in srgb, var(--app-accent) 12%, transparent);
      }

      .app-criteria-create-rating-button:hover,
      .app-criteria-create-rating-button:focus-visible {
        border-color: color-mix(in srgb, var(--app-accent) 58%, var(--app-border)) !important;
        background: color-mix(in srgb, var(--app-accent-soft) 88%, var(--app-surface-solid)) !important;
        color: var(--app-text) !important;
        box-shadow: var(--app-focus-ring), 0 12px 24px color-mix(in srgb, var(--app-accent) 16%, transparent);
      }

      .app-ratings-create-panel--composer .app-criterion-create-panel {
        margin-top: 0.9rem;
      }

      .app-criterion-definition-form {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        width: min(100%, 40rem);
      }

      .app-criterion-definition-field {
        min-width: 0;
      }

      .app-criterion-definition-inline-fields,
      .app-criterion-definition-advanced-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
        gap: 0.8rem;
        width: 100%;
      }

      .app-criterion-definition-toggle-field {
        max-width: 22rem;
      }

      .app-criterion-importance-slider-field {
        padding-top: 0.15rem;
      }

      .app-criterion-definition-check {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        min-height: 3rem;
        padding: 0.78rem 0.9rem;
        border: 1px solid var(--app-border);
        border-radius: 18px;
        background: color-mix(in srgb, var(--app-surface-secondary) 88%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .app-criterion-definition-check .checkbox {
        margin-top: 0.08rem;
        flex: 0 0 auto;
      }

      .app-criterion-definition-advanced {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
      }

      .app-criteria-disclosure {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .app-criteria-disclosure-button {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 2.45rem;
        padding: 0.52rem 0.88rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 92%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-surface-secondary) 88%, transparent);
        color: var(--app-text-secondary);
        font-size: 0.86rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        line-height: 1;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      }

      .app-criteria-disclosure-button:hover,
      .app-criteria-disclosure-button:focus-visible,
      .app-criteria-disclosure.is-open .app-criteria-disclosure-button {
        background: color-mix(in srgb, var(--app-surface-secondary) 96%, transparent);
        border-color: color-mix(in srgb, var(--app-border) 100%, transparent);
        color: var(--app-text);
      }

      .app-criteria-disclosure-button svg {
        width: 0.95rem;
        height: 0.95rem;
        flex: 0 0 auto;
        transition: transform 0.2s ease;
      }

      .app-criteria-disclosure.is-open .app-criteria-disclosure-button svg {
        transform: rotate(90deg);
      }

      .app-organize-relationship-sections {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
      }

      .app-organize-relationship-section {
        width: 100%;
      }

      .app-organize-relationship-panel {
        width: 100%;
        margin-top: 0.85rem;
      }

      .app-organize-relationship-panel .app-child-groups-selector {
        min-height: min(27.5rem, calc(100dvh - 4rem));
      }

      .app-organize-label-field {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
      }

      .app-organize-label-heading {
        color: var(--app-text-tertiary);
        font-size: 0.625rem;
        font-weight: 900;
        letter-spacing: 0.18em;
        line-height: 1;
        text-transform: uppercase;
      }

      .app-organize-label-help {
        margin: 0;
        color: var(--app-text-secondary);
        font-size: 0.875rem;
        line-height: 1.45;
      }

      .app-help-tip {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
      }

      .app-help-tip-summary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        height: 1.2rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: var(--app-surface-solid);
        color: var(--app-text-secondary);
        font-size: 0.72rem;
        font-weight: 800;
        cursor: pointer;
        list-style: none;
      }

      .app-help-tip-summary::-webkit-details-marker {
        display: none;
      }

      .app-help-tip-bubble {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        width: min(18rem, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        padding: 0.7rem 0.8rem;
        border: 1px solid rgb(229 231 235);
        border-radius: 0.9rem;
        background: rgb(17 24 39);
        color: rgb(243 244 246);
        font-size: 0.78rem;
        line-height: 1.45;
        box-shadow: 0 18px 36px -24px rgb(15 23 42 / 0.75);
      }

      .app-help-tip:not([open]) .app-help-tip-bubble {
        display: none;
      }

      .app-criterion-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.22rem 0.58rem;
        border-radius: 999px;
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .app-criterion-chip--weight {
        background: var(--app-accent-soft);
        color: var(--app-accent);
      }

      .app-criterion-assignment-row,
      .app-drag-list-row {
        padding: 0.9rem 1rem;
        border: 1px solid var(--app-border);
        border-radius: 1.1rem;
        background: var(--app-surface-solid);
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
      }

      .app-criterion-assignment-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .app-drag-list-row,
      .app-criterion-assignment-row-shell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
      }

      .app-criterion-assignment-row.is-dragging,
      .app-drag-list-row.is-dragging {
        border-color: var(--app-accent);
        background: var(--app-accent-soft);
        box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--app-accent) 55%, transparent);
      }

      .app-criterion-assignment-row-main {
        display: flex;
        align-items: flex-start;
        gap: 0.9rem;
        min-width: 0;
        flex: 1 1 auto;
      }

      .app-criterion-assignment-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.5rem;
      }

      .app-criterion-assignment-details {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        padding-top: 0.15rem;
        border-top: 1px solid var(--app-border);
      }

      .app-criterion-assignment-details-copy {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        color: var(--app-text-secondary);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .app-criterion-assignment-details-copy p {
        margin: 0;
      }

      .app-criterion-assignment-usage {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
      }

      .app-criterion-assignment-usage-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
      }

      .app-criterion-weight-form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
      }

      .app-drag-handle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.15rem;
        height: 2.15rem;
        border: 1px solid var(--app-border);
        border-radius: 0.9rem;
        color: var(--app-text-secondary);
        background: var(--app-surface-secondary);
        cursor: grab;
        flex: 0 0 auto;
      }

      .app-drag-handle:active {
        cursor: grabbing;
      }

      .app-drag-handle svg {
        width: 1rem;
        height: 1rem;
      }

      .app-drag-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .app-criterion-rank-value {
        min-width: 4.5rem;
        text-align: right;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--app-text-secondary);
      }

      .app-field-board {
        margin-top: 1rem;
      }

      .app-field-board-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 1rem;
      }

      .app-field-board-scroll {
        margin-top: 1rem;
        overflow-x: auto;
        padding-bottom: 0.15rem;
      }

      .app-field-board-grid {
        display: grid;
        grid-template-columns: minmax(12rem, 1.35fr) repeat(var(--app-field-board-columns), minmax(10.5rem, 1fr));
        min-width: min(100%, calc(12rem + (10.5rem * var(--app-field-board-columns))));
        border: 1px solid var(--app-border);
        border-radius: 1.1rem;
        overflow: hidden;
        background: var(--app-surface-solid);
      }

      .app-field-board-cell {
        display: flex;
        align-items: center;
        min-width: 0;
        min-height: 4rem;
        padding: 0.72rem 0.85rem;
        border-right: 1px solid var(--app-border);
        border-bottom: 1px solid var(--app-border);
      }

      .app-field-board-cell:nth-child(n) {
        background: var(--app-surface-solid);
      }

      .app-field-board-cell--heading {
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 0.32rem;
        min-height: 3.25rem;
        background: color-mix(in srgb, var(--app-surface-secondary) 72%, var(--app-surface-solid));
        color: var(--app-text);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.02em;
      }

      .app-field-board-cell--child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: color-mix(in srgb, var(--app-surface-solid) 96%, var(--app-surface-secondary));
      }

      .app-field-board-cell--heading.app-field-board-cell--child {
        z-index: 2;
      }

      .app-field-board-child-link {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        min-width: 0;
        color: var(--app-text);
        font-size: 0.95rem;
        font-weight: 800;
        text-decoration: none;
      }

      .app-field-board-child-link:hover,
      .app-field-board-child-link:focus-visible {
        color: var(--app-accent);
      }

      .app-field-board-child-icon {
        display: inline-flex;
        width: 2.15rem;
        height: 2.15rem;
        flex: 0 0 auto;
      }

      .app-field-board-child-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app-field-board-choice-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        width: 100%;
      }

      .app-field-board-inline-form {
        min-width: 0;
      }

      .app-field-board-choice {
        width: 100%;
        min-height: 2.35rem;
        border: 1px solid var(--app-border);
        border-radius: 999px;
        background: var(--app-surface-secondary);
        color: var(--app-text-secondary);
        font-size: 0.86rem;
        font-weight: 800;
      }

      .app-field-board-choice:hover,
      .app-field-board-choice:focus-visible,
      .app-field-board-choice.is-selected {
        border-color: color-mix(in srgb, var(--app-accent) 56%, var(--app-border));
        background: var(--app-accent-soft);
        color: var(--app-accent);
      }

      .app-field-board-value-form {
        width: 100%;
      }

      .app-field-board-value-control {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        width: 100%;
      }

      .app-field-board-value-input {
        min-width: 0;
        height: 2.45rem;
        flex: 1 1 auto;
      }

      .app-field-board-unit {
        color: var(--app-text-secondary);
        font-size: 0.78rem;
        font-weight: 800;
      }

      .app-field-board-save {
        flex: 0 0 auto;
      }

      .app-field-board-empty {
        margin-top: 1rem;
        border: 1px dashed var(--app-border);
        border-radius: 1rem;
        padding: 1rem;
        color: var(--app-text-secondary);
        font-size: 0.9rem;
      }

      @media (max-width: 960px) {
        .app-drag-list-row,
        .app-criterion-assignment-row-shell {
          align-items: flex-start;
          flex-direction: column;
        }

        .app-overall-rankings-row {
          align-items: flex-start;
          flex-direction: column;
        }

        .app-overall-rankings-link {
          width: 100%;
        }

        .app-overall-rankings-meta {
          align-items: flex-start;
          text-align: left;
        }

        .app-criterion-assignment-actions {
          width: 100%;
          justify-content: flex-start;
        }

        .app-criterion-weight-form {
          width: 100%;
        }
      }

      .app-composer-toggle.is-active {
        background: color-mix(in srgb, var(--app-accent) 16%, var(--app-surface-solid));
        border-color: color-mix(in srgb, var(--app-accent) 26%, var(--app-border));
        color: var(--app-text);
      }

      .app-composer-toggle--icon {
        width: 2.45rem;
        min-width: 2.45rem;
        height: 2.45rem;
        min-height: 2.45rem;
        padding: 0;
        border-radius: 999px;
      }

      .app-composer-editor-shell {
        position: relative;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .app-composer-toggle--field {
        position: absolute;
        top: auto;
        bottom: 0.28rem;
        right: 0.62rem;
        width: 1.95rem;
        min-width: 1.95rem;
        height: 1.95rem;
        min-height: 1.95rem;
        padding: 0;
        border-radius: 0.78rem;
        border-color: color-mix(in srgb, var(--app-border) 82%, transparent);
        background: color-mix(in srgb, var(--app-surface-solid) 88%, var(--app-surface-secondary));
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
        transform: none;
        z-index: 3;
      }

      .app-composer-toggle-glyph {
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: -0.05em;
      }

      .app-tag-composer {
        --app-tag-composer-editor-height: 2.5rem;
        margin: 0 0 0.7rem;
        overflow: visible;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
      }

      .app-tag-composer,
      .app-tag-composer.is-open,
      .app-tag-composer.is-open:hover,
      .app-tag-composer.is-open.is-rich,
      .app-tag-composer.is-open.is-rich:hover,
      .app-tag-composer.is-open form,
      .app-tag-composer.is-open .app-composer-footer {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }

      .app-tag-composer form {
        display: grid;
        gap: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .app-tag-composer .app-composer-divider {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border: 0;
        border-top: 1px solid var(--app-border);
      }

      .app-tag-composer .app-composer-divider--bottom {
        display: none;
      }

      .app-tag-composer .app-composer-divider--top {
        margin-bottom: 0.56rem;
      }

      .app-tag-composer .app-composer-divider--bottom {
        margin-top: 0;
      }

      .app-tag-composer.is-open .app-composer-divider--bottom {
        display: block;
      }

      .app-tag-composer .app-composer-editor,
      .app-tag-composer.is-open .app-composer-editor {
        margin-top: 0;
        padding: 0;
      }

      .app-status-browser-sections {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .app-status-browser-section {
        margin-bottom: 0;
      }

      .app-status-browser-section-toggle {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
      }

      .app-status-browser-section-heading {
        min-width: 0;
        display: inline-flex;
        align-items: center;
      }

      .app-status-browser-section-caret {
        flex: 0 0 auto;
      }

      .app-status-browser-section-content {
        margin-top: 0.75rem;
      }

      .app-status-browser-section-list {
        display: flex;
        flex-direction: column;
      }

      .app-status-browser-loader {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        gap: 0.46rem;
        min-height: 2.35rem;
        margin: 0.18rem 0 0.2rem calc(0.26rem + 4px);
        color: var(--app-text-tertiary);
        font-size: 0.72rem;
        font-weight: 700;
      }

      .app-status-browser-loader-dot {
        width: 0.46rem;
        height: 0.46rem;
        border-radius: 999px;
        background: color-mix(in srgb, var(--app-accent) 58%, transparent);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--app-accent) 18%, transparent);
        animation: app-status-browser-loader-pulse 1.35s ease-in-out infinite;
      }

      .app-status-browser-loader.has-error {
        color: var(--app-danger);
      }

      @keyframes app-status-browser-loader-pulse {
        0%,
        100% {
          opacity: 0.45;
          transform: scale(0.82);
        }

        50% {
          opacity: 1;
          transform: scale(1);
        }
      }

      .app-tag-composer trix-editor {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        min-height: var(--app-tag-composer-editor-height);
        height: var(--app-tag-composer-editor-height);
        max-height: none;
        overflow-y: hidden;
        padding: 0.5rem 3.2rem 0.5rem 1rem;
        border: 1px solid var(--app-border) !important;
        border-radius: 16px;
        background: var(--app-surface-secondary) !important;
        font-size: 0.9rem;
        line-height: 1.35;
        box-shadow: none;
      }

      .app-tag-composer:not(.is-rich) trix-editor,
      .app-tag-composer.is-open:not(.is-rich) trix-editor,
      .app-tag-composer.is-open.is-rich trix-editor,
      .app-tag-composer.is-open trix-editor {
        min-height: var(--app-tag-composer-editor-height);
        height: var(--app-tag-composer-editor-height);
        max-height: none;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        border-top: 1px solid var(--app-border) !important;
        border-radius: 16px;
      }

      .app-tag-composer trix-editor div,
      .app-tag-composer trix-editor p,
      .app-tag-composer trix-editor blockquote,
      .app-tag-composer trix-editor pre,
      .app-tag-composer trix-editor ul,
      .app-tag-composer trix-editor ol,
      .app-tag-composer trix-editor li,
      .app-tag-composer trix-editor h1,
      .app-tag-composer trix-editor h2,
      .app-tag-composer trix-editor h3 {
        margin-top: 0;
        margin-bottom: 0;
      }

      .app-tag-composer trix-editor:focus {
        outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
        outline-offset: 1px;
      }

      .app-tag-composer trix-toolbar,
      .app-tag-composer.is-open trix-toolbar,
      .app-tag-composer.is-open:not(.is-rich) trix-toolbar {
        position: static;
        margin: 0;
        padding: 0;
        min-height: 0;
        height: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        border: none;
        background: transparent;
      }

      .app-tag-composer.is-open.is-rich trix-toolbar {
        min-height: 1.98rem;
        height: auto;
        max-height: none;
        margin: 0 0 0.32rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        border: 0;
        background: transparent;
      }

      .app-tag-composer.is-open.is-rich trix-toolbar .trix-button-row {
        display: flex;
        align-items: center;
        gap: 0.26rem;
        flex-wrap: wrap;
      }

      .app-tag-composer.is-open.is-rich trix-toolbar .trix-button-group {
        border-radius: 999px;
        border: 1px solid var(--app-border) !important;
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
        overflow: hidden;
      }

      .app-tag-composer.is-open.is-rich trix-toolbar .trix-button {
        min-height: 1.78rem;
        min-width: 1.78rem;
        height: 1.78rem;
        padding: 0;
        font-size: 0.84rem;
        line-height: 1;
      }

      .app-tag-composer.is-open.is-rich trix-toolbar .trix-button--icon::before {
        transform: scale(0.72);
        transform-origin: center;
      }

      .app-tag-composer .app-composer-footer,
      .app-tag-composer.is-open .app-composer-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "tools actions";
        align-items: end;
        gap: 0.58rem;
        padding: 0;
        overflow: visible;
        background: transparent;
      }

      .app-tag-composer.is-open .app-composer-footer {
        max-height: 12rem;
        padding: 0.32rem 0 0.88rem;
      }

      .app-tag-composer .app-composer-utility-row,
      .app-tag-composer-tools {
        grid-area: tools;
        align-items: center;
        gap: 0.56rem;
        flex-wrap: wrap;
        width: auto;
        min-height: 2.45rem;
      }

      .app-tag-composer .app-composer-group-control:not([hidden]) {
        display: inline-flex;
        align-items: center;
        flex: 1 1 auto;
        gap: 0.72rem;
        min-width: 0;
      }

      .app-tag-composer .app-composer-actions {
        grid-area: actions;
        width: auto;
        flex: 0 0 auto;
        align-items: center;
        align-self: end;
        justify-self: end;
        overflow: visible;
      }

      .app-tag-composer .app-composer-selected-groups {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        flex: 1 1 auto;
        gap: 0.62rem 0.72rem;
        min-width: 0;
        max-height: 4.75rem;
        overflow-y: auto;
        padding-right: 0.2rem;
      }

      .app-tag-composer .app-composer-selected-groups:empty {
        display: none;
      }

      .app-tag-composer .app-composer-selected-groups .app-tag-selection-chip {
        max-width: min(100%, 14rem);
      }

      .app-tag-composer .app-composer-submit {
        min-height: 2.45rem;
        padding-inline: 1.25rem;
      }

      .app-child-entry-toggle {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
      }

      .app-child-entry-toggle-group {
        display: inline-flex;
        align-items: center;
        gap: 0.18rem;
        padding: 0.2rem;
        border-radius: 999px;
        border: 1px solid var(--app-border);
        background: var(--app-surface-secondary);
      }

      .app-child-entry-toggle-option {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.05rem;
        padding: 0.45rem 0.95rem;
        border: none;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
      }

      .app-child-entry-toggle-option:hover,
      .app-child-entry-toggle-option:focus-visible {
        color: var(--app-text);
      }

      .app-child-entry-toggle-option.is-selected {
        background: var(--app-surface-solid);
        color: var(--app-text);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
      }

      .app-child-entry-toggle-option--action {
        border: 0;
      }

      .app-child-entry-toggle-group .app-ratings-create-toggle {
        min-height: 2.05rem;
        padding: 0.45rem 0.95rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--app-text-secondary);
        font-size: 0.84rem;
        font-weight: 700;
        line-height: 1;
      }

      .app-child-entry-toggle-group .app-ratings-create-toggle:hover,
      .app-child-entry-toggle-group .app-ratings-create-toggle:focus-visible {
        color: var(--app-text);
        background: transparent;
        border-color: transparent;
      }

      .app-child-entry-toggle-group .app-ratings-create-toggle.is-selected,
      .app-ratings-create.is-open .app-child-entry-toggle-group .app-ratings-create-toggle {
        color: var(--app-text);
        border-color: transparent;
        background: var(--app-surface-solid);
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
      }

      .app-tag-composer .app-tag-field,
      .app-tag-composer .app-composer-tags {
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        gap: 0;
        width: auto;
      }

      .app-tag-composer .app-composer-tags .app-tag-field-button--icon-only,
      .app-tag-composer .app-ratings-create-toggle--icon,
      .app-tag-composer .app-composer-toggle--icon {
        width: 2.45rem;
        min-width: 2.45rem;
        height: 2.45rem;
        min-height: 2.45rem;
        padding: 0 !important;
        border-radius: 999px;
      }

      .app-tag-composer .app-composer-toggle--field.app-composer-toggle--icon {
        width: 1.95rem;
        min-width: 1.95rem;
        height: 1.95rem;
        min-height: 1.95rem;
        border-radius: 0.78rem;
      }

      .app-tag-composer .app-composer-tags .app-tag-field-button--icon-only,
      .app-tag-composer .app-ratings-create-toggle--icon {
        background: color-mix(in srgb, var(--app-surface-solid) 76%, transparent);
        border: 1px solid var(--app-border);
      }

      .app-tag-composer .app-ratings-create-toggle--icon svg,
      .app-tag-composer .app-composer-tags .app-tag-field-button--icon-only svg {
        width: 1.2rem;
        height: 1.2rem;
      }

      .app-tag-composer .app-composer-submit {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
      }

      .app-tag-composer.is-open .app-composer-submit {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
      }

      .app-composer-rate-fields {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        margin-top: 0.56rem;
      }

      .app-tag-composer .app-ratings-create-panel--composer {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .app-composer-rate-meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 10.5rem);
        align-items: end;
        gap: 0.72rem;
      }

      .app-composer-rate-fields .app-rating-form-field--definition,
      .app-composer-rate-fields .app-rating-form-field--date-compact {
        width: 100%;
        max-width: none;
      }

      .app-composer-rate-fields .app-rating-form-field--definition {
        align-self: auto;
      }

      .app-composer-rate-fields .app-rating-definition-select,
      .app-composer-rate-fields .app-rating-date-input--composer {
        width: 100%;
        max-width: none;
      }

      .app-composer-rate-fields .app-rating-definition-select {
        appearance: none;
        min-height: 2.5rem;
        padding-right: 2.55rem;
        border-radius: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.25L7 6.25L13 1.25' stroke='%23A1A1AA' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: right 1rem center;
        background-repeat: no-repeat;
        background-size: 0.78rem auto;
      }

      .app-composer-rate-fields .app-tag-rating-form-entry-fields {
        gap: 0.72rem;
      }

      .app-composer-rate-fields .app-rating-form-field--score,
      .app-composer-rate-fields .app-rating-form-field[data-criterion-form-target='numberPanel'],
      .app-composer-rate-fields .app-rating-form-field[data-criterion-form-target='booleanPanel'] {
        width: 100%;
      }

      .app-gratitude-composer.is-open .app-composer-editor,
      .app-gratitude-composer.is-open.is-rich .app-composer-editor,
      .app-gratitude-composer.is-open:not(.is-rich) .app-composer-editor {
        margin-top: 0;
      }

      .app-gratitude-composer trix-editor,
      .app-gratitude-composer:not(.is-rich) trix-editor,
      .app-gratitude-composer.is-open:not(.is-rich) trix-editor,
      .app-gratitude-composer.is-open.is-rich trix-editor {
        box-sizing: border-box;
        width: 100%;
        min-height: 3.35rem;
        height: auto;
        max-height: none;
        overflow-y: hidden;
        padding: 0.82rem 1rem;
        border: 1px solid var(--app-border) !important;
        border-radius: 20px;
        background: color-mix(in srgb, var(--app-surface-solid) 82%, transparent) !important;
        color: var(--app-text) !important;
        font-size: clamp(1.08rem, 2.3vw, 1.35rem);
        font-weight: 500;
        line-height: 1.35;
      }

      .app-gratitude-composer trix-editor:focus {
        border-color: color-mix(in srgb, var(--app-accent) 38%, var(--app-border-strong)) !important;
        background: var(--app-surface-solid) !important;
        outline: none;
        box-shadow: var(--app-focus-ring);
      }

      @media (max-width: 640px) {
        .app-tag-composer form {
          gap: 0;
        }

        .app-tag-composer .app-composer-footer,
        .app-tag-composer.is-open .app-composer-footer {
          gap: 0.72rem;
          grid-template-columns: minmax(0, 1fr) auto;
          grid-template-areas: "tools actions";
          align-items: end;
        }

        .app-tag-composer .app-composer-utility-row,
        .app-tag-composer-tools {
          flex: 1 1 auto;
        }

        .app-tag-composer .app-composer-actions {
          margin-left: auto;
          justify-self: end;
          width: auto;
          align-items: center;
        }

        .app-tag-composer .app-composer-submit {
          width: auto;
        }

        .app-tag-composer .app-composer-selected-groups .app-tag-selection-chip {
          max-width: min(100%, 12rem);
        }

        .app-composer-rate-meta-row {
          grid-template-columns: 1fr;
        }
      }

      /* Product polish pass: quiet surfaces, consistent rhythm, and stronger affordances. */
      :root {
        --app-bg: #f6f7f9;
        --app-bg-alt: #eef1f5;
        --app-sidebar-bg: #fafbfd;
        --app-surface: rgba(255, 255, 255, 0.86);
        --app-surface-solid: #ffffff;
        --app-surface-secondary: rgba(244, 246, 249, 0.9);
        --app-border: rgba(24, 32, 48, 0.1);
        --app-border-strong: rgba(24, 32, 48, 0.16);
        --app-text: #171a21;
        --app-text-secondary: #606774;
        --app-text-tertiary: #8a92a1;
        --app-accent: #2563eb;
        --app-accent-soft: rgba(37, 99, 235, 0.1);
        --app-accent-soft-strong: rgba(37, 99, 235, 0.16);
        --app-danger: #dc2626;
        --app-danger-soft: rgba(220, 38, 38, 0.1);
        --app-success: #15803d;
        --app-success-soft: rgba(21, 128, 61, 0.11);
        --app-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.06);
        --app-shadow-hover: 0 2px 5px rgba(15, 23, 42, 0.07), 0 16px 38px rgba(15, 23, 42, 0.08);
        --app-radius-card: 8px;
        --app-radius-panel: 10px;
        --app-radius-control: 10px;
        --app-focus-ring: 0 0 0 3px color-mix(in srgb, var(--app-accent) 18%, transparent);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --app-bg: #111318;
          --app-bg-alt: #171a21;
          --app-sidebar-bg: #121419;
          --app-surface: rgba(28, 31, 38, 0.88);
          --app-surface-solid: #1d2129;
          --app-surface-secondary: rgba(38, 43, 52, 0.84);
          --app-border: rgba(228, 232, 240, 0.1);
          --app-border-strong: rgba(228, 232, 240, 0.16);
          --app-text: #f3f5f8;
          --app-text-secondary: #b5bdc9;
          --app-text-tertiary: #8993a3;
          --app-accent: #60a5fa;
          --app-accent-soft: rgba(96, 165, 250, 0.16);
          --app-accent-soft-strong: rgba(96, 165, 250, 0.24);
          --app-danger: #f87171;
          --app-danger-soft: rgba(248, 113, 113, 0.15);
          --app-success: #4ade80;
          --app-success-soft: rgba(74, 222, 128, 0.16);
          --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 14px 34px rgba(0, 0, 0, 0.24);
          --app-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.28), 0 20px 44px rgba(0, 0, 0, 0.3);
        }
      }

      html {
        color-scheme: light dark;
      }

      body {
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--app-bg) 94%, white 6%) 0%, var(--app-bg-alt) 100%);
        letter-spacing: 0;
      }

      :where(.app-shell, .app-shell *, .app-public-shell, .app-public-shell *) {
        letter-spacing: 0 !important;
      }

      :where(a, button, summary, input, textarea, select):focus-visible {
        outline: none;
        box-shadow: var(--app-focus-ring);
      }

      .app-main {
        width: min(100%, 64rem);
        max-width: 64rem;
        box-sizing: border-box;
        padding: clamp(2.15rem, 4vw, 3.4rem) clamp(1rem, 2.8vw, 2.2rem) 3rem;
      }

      .app-shell-main {
        background:
          linear-gradient(180deg, color-mix(in srgb, var(--app-bg) 96%, white 4%) 0%, var(--app-bg-alt) 100%);
      }

      .app-sidebar-shell {
        box-shadow: 1px 0 0 color-mix(in srgb, var(--app-border) 74%, transparent);
      }

      .app-sidebar-group-link,
      .app-sidebar-utility-link {
        min-height: 2.48rem;
        border-radius: var(--app-radius-control);
        padding: 0 var(--app-sidebar-inline-padding) 0 var(--app-sidebar-expanded-label-start);
        width: max-content;
        max-width: 100%;
        flex: 0 1 auto;
        font-size: 0.92rem;
        font-weight: 650;
      }

      .app-sidebar-group-link:hover,
      .app-sidebar-utility-link:hover,
      .app-sidebar-rail-link:hover {
        background: color-mix(in srgb, var(--app-surface-secondary) 78%, transparent);
      }

      .app-sidebar-group-link.active,
      .app-sidebar-utility-link.active,
      .app-sidebar-rail-link.active {
        background: color-mix(in srgb, var(--app-accent-soft) 82%, var(--app-surface-solid));
        color: var(--app-text);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 18%, transparent);
      }

      .card,
      .modal-box,
      .app-auth-card,
      .app-group-filter-panel,
      .app-criteria-section-card,
      .app-criterion-assignment-row,
      .app-criterion-ranking-row,
      .app-inline-edit-shell,
      .app-comment-panel,
      .app-relationship-panel,
      .app-empty-state {
        border-radius: var(--app-radius-card) !important;
        border-color: var(--app-border);
        box-shadow: var(--app-shadow);
      }

      .card:hover {
        transform: translateY(-1px);
        box-shadow: var(--app-shadow-hover);
        border-color: color-mix(in srgb, var(--app-border-strong) 86%, transparent);
      }

      .btn,
      .input,
      .textarea,
      .select,
      .app-title-edit-field,
      .app-description-editor,
      .app-search-input,
      .app-status-browser-group-filter-search-input,
      .app-rating-definition-select,
      .app-rating-date-input,
      .app-rating-remarks-input,
      .app-status-browser-area-select {
        border-radius: var(--app-radius-control) !important;
      }

      .btn {
        min-height: 2.35rem;
        font-weight: 650;
      }

      .btn-primary {
        background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 92%, white 8%), var(--app-accent)) !important;
        box-shadow: none;
      }

      .input,
      .textarea,
      .select,
      trix-editor,
      .app-search-input,
      .app-status-browser-group-filter-search-input,
      .app-rating-definition-select,
      .app-rating-date-input,
      .app-rating-remarks-input,
      .app-status-browser-area-select {
        background: color-mix(in srgb, var(--app-surface-solid) 84%, var(--app-surface-secondary)) !important;
        border-color: var(--app-border) !important;
        color: var(--app-text) !important;
      }

      :where(.input, .textarea, .select, trix-editor, .app-search-input, .app-status-browser-group-filter-search-input, .app-rating-definition-select, .app-rating-date-input, .app-rating-remarks-input):focus {
        border-color: color-mix(in srgb, var(--app-accent) 42%, var(--app-border)) !important;
        box-shadow: var(--app-focus-ring);
      }

      .app-page-header {
        margin-bottom: 0.9rem;
      }

      .app-page-header-top {
        margin-bottom: 0.42rem;
      }

      .app-page-title {
        font-size: clamp(2rem, 4.4vw, 2.9rem);
        font-weight: 760;
        line-height: 1.05;
      }

      .app-page-subtitle {
        max-width: 44rem;
        color: var(--app-text-secondary);
        font-size: 1rem;
        line-height: 1.5;
      }

      .app-group-title-icon {
        width: clamp(3.5rem, 6vw, 4.35rem);
        height: clamp(3.5rem, 6vw, 4.35rem);
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-border) 54%, transparent);
      }

      .app-group-title-icon .app-group-icon-emoji {
        font-size: clamp(2.25rem, 3.7vw, 2.7rem);
      }

      .app-group-header-search-button,
      .app-group-header-menu-button,
      .app-shell-toggle,
      .app-page-mobile-sticky-menu,
      .app-section-edit-button,
      .app-modal-close {
        border-radius: var(--app-radius-control);
      }

      .app-shell-toggle {
        border-radius: 17px;
      }

      .app-group-header-menu-list {
        border-radius: var(--app-radius-panel);
        padding: 0.35rem;
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
      }

      .app-group-header-menu-item {
        border-radius: 8px;
        padding: 0.68rem 0.72rem;
      }

      .app-group-filter-panel {
        padding: 0.85rem;
        background: color-mix(in srgb, var(--app-surface-solid) 74%, var(--app-surface-secondary));
      }

      .app-group-filter-footer {
        margin-top: 0.55rem;
        margin-bottom: 0.85rem;
      }

      .app-group-filter-chip-label,
      .app-parent-pill,
      .app-segmented-control,
      .app-segmented-control a,
      .app-composer-toggle,
      .app-child-entry-toggle-group,
      .app-child-entry-toggle-option,
      .app-ratings-create-toggle,
      .app-note-chip,
      .badge {
        border-radius: 999px;
      }

      .app-group-filter-checkbox:checked + .app-group-filter-chip-label,
      .app-segmented-control a.active,
      .app-child-entry-toggle-option.is-selected,
      .app-child-entry-toggle-group .app-ratings-create-toggle.is-selected,
      .app-ratings-create.is-open .app-child-entry-toggle-group .app-ratings-create-toggle {
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
      }

      .app-tag-composer,
      .app-composer {
        margin-bottom: 0.85rem;
      }

      .app-composer-shell.is-open:not(.app-tag-composer) {
        background: color-mix(in srgb, var(--app-surface-solid) 72%, var(--app-surface-secondary)) !important;
        border-color: var(--app-border);
        box-shadow: var(--app-shadow);
      }

      .app-tag-composer.app-composer-shell.is-open,
      .app-tag-composer.app-composer-shell.is-open:hover,
      .app-tag-composer.app-composer-shell.is-open form,
      .app-tag-composer.app-composer-shell.is-open .app-composer-footer {
        background: transparent !important;
        background-color: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
      }

      .app-composer-shell trix-editor {
        border-radius: var(--app-radius-control) !important;
        background: color-mix(in srgb, var(--app-surface-solid) 84%, var(--app-surface-secondary)) !important;
        font-size: 1rem;
      }

      .app-composer-rate-fields .app-rating-definition-select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.25L7 6.25L13 1.25' stroke='%23A1A1AA' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-position: right 1rem center !important;
        background-repeat: no-repeat !important;
        background-size: 0.78rem auto !important;
      }

      .app-tag-modal {
        height: min(44rem, calc(100vh - 1.25rem)) !important;
        min-height: min(44rem, calc(100vh - 1.25rem)) !important;
        max-height: min(44rem, calc(100vh - 1.25rem)) !important;
      }

      .app-child-groups-modal {
        height: min(44rem, calc(100vh - 1.25rem)) !important;
        min-height: min(44rem, calc(100vh - 1.25rem)) !important;
        max-height: min(44rem, calc(100vh - 1.25rem)) !important;
      }

      .app-page-feed-list {
        gap: 0.18rem;
      }

      .app-page-feed-list > .app-feed-row {
        border-radius: var(--app-radius-card);
        padding-inline: 0.15rem;
      }

      .app-page-feed-list > .app-feed-row + .app-feed-row {
        border-top: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent);
      }

      .app-page-feed-list > .app-feed-row:hover {
        background: color-mix(in srgb, var(--app-surface-solid) 58%, var(--app-accent-soft));
      }

      .app-page-feed-list > .app-feed-row .app-note-card-body {
        padding: 0.88rem 0.62rem;
      }

      .app-page-feed-list .app-note-action {
        color: var(--app-text-tertiary);
      }

      .app-page-feed-list .app-note-action:hover,
      .app-page-feed-list .app-note-action:focus-visible {
        color: var(--app-text);
      }

      .app-library-grid {
        grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
        gap: 0.85rem;
      }

      .app-library-grid--fluid {
        grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
        justify-content: stretch;
      }

      .app-library-card {
        max-width: none;
        min-height: 12.4rem;
        height: 12.4rem;
        padding: 1rem;
      }

      .app-library-card-title {
        font-size: 1.02rem;
        font-weight: 720;
      }

      .app-library-card-icon {
        border-radius: 10px;
      }

      .app-section-block {
        margin-bottom: 1.5rem;
      }

      .app-section-title {
        font-size: 1rem;
        font-weight: 720;
      }

      .app-modal-header {
        padding: 1.1rem 1.15rem 0;
      }

      .app-modal-body {
        padding: 1rem 1.15rem 1.15rem;
      }

      .app-modal-footer {
        padding: 0 1.15rem 1.15rem;
      }

      @media (max-width: 767.98px) {
        .app-main {
          padding-inline: 0.85rem;
          padding-top: 1.35rem;
        }

        .app-page-title {
          font-size: clamp(1.7rem, 9vw, 2.35rem);
        }

        .app-page-mobile-sticky-title {
          font-size: 1.38rem;
          font-weight: 740;
        }

        .app-page-feed-list > .app-feed-row .app-note-card-body {
          padding-inline: 0.42rem;
        }
      }